124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { ArrowLeftIcon, LoaderIcon } from "@lume/icons";
|
|
import { useStorage } from "@lume/storage";
|
|
import { TOPICS, cn } from "@lume/utils";
|
|
import { useState } from "react";
|
|
import { useNavigate } from "react-router-dom";
|
|
import { toast } from "sonner";
|
|
|
|
export function OnboardingInterestScreen() {
|
|
const storage = useStorage();
|
|
const navigate = useNavigate();
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
const [hashtags, setHashtags] = useState([]);
|
|
|
|
const toggleHashtag = (item: string) => {
|
|
const arr = hashtags.includes(item)
|
|
? hashtags.filter((i) => i !== item)
|
|
: [...hashtags, item];
|
|
setHashtags(arr);
|
|
};
|
|
|
|
const toggleAll = (item: string[]) => {
|
|
const sets = new Set([...hashtags, ...item]);
|
|
setHashtags([...sets]);
|
|
};
|
|
|
|
const submit = async () => {
|
|
try {
|
|
setLoading(true);
|
|
|
|
if (!hashtags.length) return navigate("/finish");
|
|
|
|
const save = await storage.createSetting(
|
|
"interests",
|
|
JSON.stringify({ hashtags }),
|
|
);
|
|
|
|
setLoading(false);
|
|
|
|
if (save) return navigate("/finish");
|
|
} catch (e) {
|
|
setLoading(false);
|
|
toast.error(String(e));
|
|
}
|
|
};
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col">
|
|
<div className="h-16 shrink-0 px-8 border-b border-neutral-100 dark:border-neutral-900 flex w-full items-center justify-between">
|
|
<div className="flex flex-col">
|
|
<h3 className="font-semibold">Interests</h3>
|
|
<p className="text-sm font-medium text-neutral-700 dark:text-neutral-300">
|
|
Pick things you'd like to see in your home feed.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
<div className="w-full flex-1 min-h-0 flex flex-col justify-between">
|
|
<div className="flex-1 min-h-0 overflow-y-auto px-8 py-8">
|
|
<div className="flex flex-col gap-8">
|
|
{TOPICS.map((topic, index) => (
|
|
<div key={topic.title + index} className="flex flex-col gap-4">
|
|
<div className="w-full flex items-center justify-between">
|
|
<div className="inline-flex items-center gap-2.5">
|
|
<img
|
|
src={topic.icon}
|
|
alt={topic.title}
|
|
className="size-8 object-cover rounded-lg"
|
|
/>
|
|
<h3 className="text-lg font-semibold">{topic.title}</h3>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleAll(topic.content)}
|
|
className="text-sm font-medium text-blue-500"
|
|
>
|
|
Follow All
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
{topic.content.map((hashtag) => (
|
|
<button
|
|
type="button"
|
|
onClick={() => toggleHashtag(hashtag)}
|
|
className={cn(
|
|
"inline-flex items-center rounded-full bg-neutral-100 dark:bg-neutral-900 border border-transparent px-2 py-1 text-sm font-medium",
|
|
hashtags.includes(hashtag)
|
|
? "border-blue-500 text-blue-500"
|
|
: "",
|
|
)}
|
|
>
|
|
{hashtag}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="h-16 shrink-0 w-full flex items-center px-8 justify-center gap-2 border-t border-neutral-100 dark:border-neutral-900 bg-neutral-50 dark:bg-neutral-950">
|
|
<button
|
|
type="button"
|
|
onClick={() => navigate(-1)}
|
|
className="inline-flex h-9 flex-1 gap-2 shrink-0 items-center justify-center rounded-lg bg-neutral-100 font-medium dark:bg-neutral-900 dark:hover:bg-neutral-800 hover:bg-blue-200"
|
|
>
|
|
<ArrowLeftIcon className="size-4" />
|
|
Back
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={submit}
|
|
className="inline-flex h-9 flex-1 shrink-0 items-center justify-center rounded-lg bg-blue-500 font-semibold text-white hover:bg-blue-600 disabled:opacity-50"
|
|
>
|
|
{loading ? (
|
|
<LoaderIcon className="size-4 animate-spin" />
|
|
) : (
|
|
"Continue"
|
|
)}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|