136 lines
3.5 KiB
TypeScript
136 lines
3.5 KiB
TypeScript
"use client";
|
|
|
|
import { ArrowRightIcon } from "lucide-react";
|
|
import { useState } from "react";
|
|
import ReactMarkdown from "react-markdown";
|
|
import { SOCIAL_LINKS } from "@/lib/site/social";
|
|
import { useLocalStorage } from "@/hooks/storage/use-local-storage";
|
|
import { Button } from "../ui/button";
|
|
import { Dialog, DialogBody, DialogContent, DialogTitle } from "../ui/dialog";
|
|
|
|
export function Onboarding() {
|
|
const [step, setStep] = useState(0);
|
|
const [hasSeenOnboarding, setHasSeenOnboarding] = useLocalStorage({
|
|
key: "hasSeenOnboarding",
|
|
defaultValue: false,
|
|
});
|
|
|
|
const isOpen = !hasSeenOnboarding;
|
|
|
|
const handleNext = () => {
|
|
setStep(step + 1);
|
|
};
|
|
|
|
const handleClose = () => {
|
|
setHasSeenOnboarding({ value: true });
|
|
};
|
|
|
|
const getStepTitle = () => {
|
|
switch (step) {
|
|
case 0:
|
|
return "Welcome to NeuralCut Beta! 🎉";
|
|
case 1:
|
|
return "⚠️ This is a super early beta!";
|
|
case 2:
|
|
return "🦋 Have fun testing!";
|
|
default:
|
|
return "NeuralCut Onboarding";
|
|
}
|
|
};
|
|
|
|
const renderStepContent = () => {
|
|
switch (step) {
|
|
case 0:
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="space-y-3">
|
|
<Title title="Welcome to NeuralCut Beta! 🎉" />
|
|
<Description description="You're among the first to try NeuralCut - the fully open source CapCut alternative." />
|
|
</div>
|
|
<NextButton onClick={handleNext}>Next</NextButton>
|
|
</div>
|
|
);
|
|
case 1:
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="space-y-3">
|
|
<Title title={getStepTitle()} />
|
|
<Description description="There's still a ton of things to do to make this editor amazing." />
|
|
<Description description="A lot of features are still missing. We're working hard to build them out!" />
|
|
<Description description="If you're curious, check out our roadmap [here](https://neuralcut.app/roadmap)" />
|
|
</div>
|
|
<NextButton onClick={handleNext}>Next</NextButton>
|
|
</div>
|
|
);
|
|
case 2:
|
|
return (
|
|
<div className="space-y-5">
|
|
<div className="space-y-3">
|
|
<Title title={getStepTitle()} />
|
|
<Description
|
|
description={`Join our [Discord](${SOCIAL_LINKS.discord}), chat with cool people and share feedback to help make NeuralCut the best editor ever.`}
|
|
/>
|
|
</div>
|
|
<NextButton onClick={handleClose}>Finish</NextButton>
|
|
</div>
|
|
);
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Dialog open={isOpen} onOpenChange={handleClose}>
|
|
<DialogContent className="sm:max-w-[425px]">
|
|
<DialogTitle>
|
|
<span className="sr-only">{getStepTitle()}</span>
|
|
</DialogTitle>
|
|
<DialogBody>{renderStepContent()}</DialogBody>
|
|
</DialogContent>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function Title({ title }: { title: string }) {
|
|
return <h2 className="text-lg font-bold md:text-xl">{title}</h2>;
|
|
}
|
|
|
|
function Description({ description }: { description: string }) {
|
|
return (
|
|
<div className="text-muted-foreground">
|
|
<ReactMarkdown
|
|
components={{
|
|
p: ({ children }) => <p className="mb-0">{children}</p>,
|
|
a: ({ href, children }) => (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className="text-foreground hover:text-foreground/80 underline"
|
|
>
|
|
{children}
|
|
</a>
|
|
),
|
|
}}
|
|
>
|
|
{description}
|
|
</ReactMarkdown>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
function NextButton({
|
|
children,
|
|
onClick,
|
|
}: {
|
|
children: React.ReactNode;
|
|
onClick: () => void;
|
|
}) {
|
|
return (
|
|
<Button onClick={onClick} variant="default" className="w-full">
|
|
{children}
|
|
<ArrowRightIcon className="size-4" />
|
|
</Button>
|
|
);
|
|
}
|