61 lines
2.0 KiB
TypeScript
61 lines
2.0 KiB
TypeScript
import { CheckIcon, LoaderIcon } from "@lume/icons";
|
|
import { useStorage } from "@lume/storage";
|
|
import { onboardingAtom } from "@lume/utils";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import { motion } from "framer-motion";
|
|
import { useSetAtom } from "jotai";
|
|
import { useState } from "react";
|
|
|
|
export function OnboardingFinishScreen() {
|
|
const storage = useStorage();
|
|
const queryClient = useQueryClient();
|
|
const setOnboarding = useSetAtom(onboardingAtom);
|
|
|
|
const [loading, setLoading] = useState(false);
|
|
|
|
const finish = async () => {
|
|
setLoading(true);
|
|
|
|
if (storage.interests) {
|
|
await queryClient.invalidateQueries({ queryKey: ["foryou-9998"] });
|
|
}
|
|
|
|
setLoading(false);
|
|
setOnboarding({ open: false, newUser: false });
|
|
};
|
|
|
|
return (
|
|
<motion.div
|
|
initial={{ opacity: 0, x: -20 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
exit={{ opacity: 0, x: -20 }}
|
|
className="w-full h-full flex flex-col gap-2 items-center justify-center"
|
|
>
|
|
<CheckIcon className="size-12 text-teal-500" />
|
|
<div className="text-center">
|
|
<p className="text-lg font-medium">Profile setup complete!</p>
|
|
<p className="leading-tight text-neutral-600 dark:text-neutral-400">
|
|
You can exit the setup here and start using Lume.
|
|
</p>
|
|
</div>
|
|
<div className="mt-4 flex flex-col gap-2 items-center">
|
|
<button
|
|
type="button"
|
|
onClick={finish}
|
|
className="inline-flex items-center justify-center gap-2 w-44 font-medium h-11 rounded-xl bg-blue-100 text-blue-500 hover:bg-blue-200 dark:bg-blue-900 dark:text-blue-500 dark:hover:bg-blue-800"
|
|
>
|
|
{loading ? <LoaderIcon className="size-4 animate-spin" /> : "Close"}
|
|
</button>
|
|
<a
|
|
href="https://github.com/luminous-devs/lume/issues"
|
|
target="_blank"
|
|
className="inline-flex items-center justify-center gap-2 w-44 px-5 font-medium h-11 rounded-xl hover:bg-neutral-100 dark:hover:bg-neutral-900 text-neutral-700 dark:text-neutral-600"
|
|
rel="noreferrer"
|
|
>
|
|
Report a issue
|
|
</a>
|
|
</div>
|
|
</motion.div>
|
|
);
|
|
}
|