diff options
| author | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
|---|---|---|
| committer | Kha Nguyen <hi@khanguyen.com> | 2025-07-24 17:04:27 -0500 |
| commit | 8e737d87e0accbf1d433f4c8b1e8e0f125849799 (patch) | |
| tree | 386560ac1449991da1ab6d43637e82046a725e71 /apps/web/src/components/onboarding.tsx | |
| parent | 1ccacf6bb5db579cf6f343d9de57bce92d296f5f (diff) | |
| download | opencut-8e737d87e0accbf1d433f4c8b1e8e0f125849799.tar.gz | |
Revert "merge main"
This reverts commit 1ccacf6bb5db579cf6f343d9de57bce92d296f5f.
Diffstat (limited to 'apps/web/src/components/onboarding.tsx')
| -rw-r--r-- | apps/web/src/components/onboarding.tsx | 242 |
1 files changed, 121 insertions, 121 deletions
diff --git a/apps/web/src/components/onboarding.tsx b/apps/web/src/components/onboarding.tsx index 1b43978e..80b5f99c 100644 --- a/apps/web/src/components/onboarding.tsx +++ b/apps/web/src/components/onboarding.tsx @@ -1,121 +1,121 @@ -"use client"; - -import { Dialog, DialogContent } from "./ui/dialog"; -import { Button } from "./ui/button"; -import { ArrowRightIcon } from "lucide-react"; -import { useState, useEffect } from "react"; -import ReactMarkdown from "react-markdown"; - -export function Onboarding() { - const [step, setStep] = useState(0); - const [isOpen, setIsOpen] = useState(false); - - useEffect(() => { - const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding"); - if (!hasSeenOnboarding) { - setIsOpen(true); - } - }, []); - - const handleNext = () => { - setStep(step + 1); - }; - - const handleClose = () => { - setIsOpen(false); - localStorage.setItem("hasSeenOnboarding", "true"); - }; - - const renderStepContent = () => { - switch (step) { - case 0: - return ( - <div className="space-y-5"> - <div className="space-y-3"> - <Title title="Welcome to OpenCut Beta! 🎉" /> - <Description description="You're among the first to try OpenCut - 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="⚠️ This is a super early beta!" /> - <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." /> - <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" /> - </div> - <NextButton onClick={handleNext}>Next</NextButton> - </div> - ); - case 2: - return ( - <div className="space-y-5"> - <div className="space-y-3"> - <Title title="🦋 Have fun testing!" /> - <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), chat with cool people and share feedback to help make OpenCut 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] !outline-none"> - {renderStepContent()} - </DialogContent> - </Dialog> - ); -} - -function Title({ title }: { title: string }) { - return <h2 className="text-lg md:text-xl font-bold">{title}</h2>; -} - -function Subtitle({ subtitle }: { subtitle: string }) { - return <h3 className="text-lg font-medium">{subtitle}</h3>; -} - -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="w-4 h-4" /> - </Button> - ); -} +"use client";
+
+import { Dialog, DialogContent } from "./ui/dialog";
+import { Button } from "./ui/button";
+import { ArrowRightIcon } from "lucide-react";
+import { useState, useEffect } from "react";
+import ReactMarkdown from "react-markdown";
+
+export function Onboarding() {
+ const [step, setStep] = useState(0);
+ const [isOpen, setIsOpen] = useState(false);
+
+ useEffect(() => {
+ const hasSeenOnboarding = localStorage.getItem("hasSeenOnboarding");
+ if (!hasSeenOnboarding) {
+ setIsOpen(true);
+ }
+ }, []);
+
+ const handleNext = () => {
+ setStep(step + 1);
+ };
+
+ const handleClose = () => {
+ setIsOpen(false);
+ localStorage.setItem("hasSeenOnboarding", "true");
+ };
+
+ const renderStepContent = () => {
+ switch (step) {
+ case 0:
+ return (
+ <div className="space-y-5">
+ <div className="space-y-3">
+ <Title title="Welcome to OpenCut Beta! 🎉" />
+ <Description description="You're among the first to try OpenCut - 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="⚠️ This is a super early beta!" />
+ <Description description="OpenCut started just one month ago. There's still a ton of things to do to make this editor amazing." />
+ <Description description="If you're curious, check out our roadmap [here](https://opencut.app/roadmap)" />
+ </div>
+ <NextButton onClick={handleNext}>Next</NextButton>
+ </div>
+ );
+ case 2:
+ return (
+ <div className="space-y-5">
+ <div className="space-y-3">
+ <Title title="🦋 Have fun testing!" />
+ <Description description="Join our [Discord](https://discord.gg/zmR9N35cjK), chat with cool people and share feedback to help make OpenCut 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] !outline-none">
+ {renderStepContent()}
+ </DialogContent>
+ </Dialog>
+ );
+}
+
+function Title({ title }: { title: string }) {
+ return <h2 className="text-lg md:text-xl font-bold">{title}</h2>;
+}
+
+function Subtitle({ subtitle }: { subtitle: string }) {
+ return <h3 className="text-lg font-medium">{subtitle}</h3>;
+}
+
+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="w-4 h-4" />
+ </Button>
+ );
+}
|
