"use client" import { useEffect, useState } from "react" import { useRouter } from "next/navigation" import { ChevronDownIcon, ResetIcon } from "@radix-ui/react-icons" import { DatabaseIcon } from "lucide-react" import { toast } from "sonner" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" import { Collapsible, CollapsibleContent, CollapsibleTrigger, } from "@/components/ui/collapsible" import { IntroDisclosure } from "../ui/intro-disclosure" const steps = [ { title: "Welcome to Cult UI", short_description: "Discover our modern component library", full_description: "Welcome to Cult UI! Let's explore how our beautifully crafted components can help you build stunning user interfaces with ease.", media: { type: "image" as const, src: "/feature-3.png", alt: "Cult UI components overview", }, }, { title: "Customizable Components", short_description: "Style and adapt to your needs", full_description: "Every component is built with customization in mind. Use our powerful theming system with Tailwind CSS to match your brand perfectly.", media: { type: "image" as const, src: "/feature-2.png", alt: "Component customization interface", }, action: { label: "View Theme Builder", href: "/docs/theming", }, }, { title: "Responsive & Accessible", short_description: "Built for everyone", full_description: "All components are fully responsive and follow WAI-ARIA guidelines, ensuring your application works seamlessly across all devices and is accessible to everyone.", media: { type: "image" as const, src: "/feature-1.png", alt: "Responsive design demonstration", }, }, { title: "Start Building", short_description: "Create your next project", full_description: "You're ready to start building! Check out our comprehensive documentation and component examples to create your next amazing project.", action: { label: "View Components", href: "/docs/components", }, }, ] type StorageState = { desktop: string | null mobile: string | null } export function IntroDisclosureDemo() { const router = useRouter() const [open, setOpen] = useState(true) const [openMobile, setOpenMobile] = useState(true) const [debugOpen, setDebugOpen] = useState(false) const [storageState, setStorageState] = useState({ desktop: null, mobile: null, }) const updateStorageState = () => { setStorageState({ desktop: localStorage.getItem("feature_intro-demo"), mobile: localStorage.getItem("feature_intro-demo-mobile"), }) } // Update storage state whenever localStorage changes useEffect(() => { updateStorageState() window.addEventListener("storage", updateStorageState) return () => window.removeEventListener("storage", updateStorageState) }, []) // Update storage state after reset const handleReset = () => { // localStorage.removeItem("feature_intro-demo") setOpen(true) if (storageState.desktop === "false") { toast.info("Clear the local storage to trigger the feature again") setDebugOpen(true) } if (storageState.desktop === null) { updateStorageState() } } const handleResetMobile = () => { // localStorage.removeItem("feature_intro-demo-mobile") setOpenMobile(true) updateStorageState() } const handleClearDesktop = () => { localStorage.removeItem("feature_intro-demo") updateStorageState() router.refresh() toast.success("Desktop storage cleared") } const handleClearMobile = () => { localStorage.removeItem("feature_intro-demo-mobile") updateStorageState() router.refresh() toast.success("Mobile storage cleared") } const handleDebugOpenChange = (open: boolean) => { if (open) { updateStorageState() } setDebugOpen(open) } return (

IntroDisclosure Demo

Experience our feature introduction component in both desktop and mobile variants. Click the reset buttons to restart the demos.

(Disclosure)

Desktop View

toast.success("Tour completed")} onSkip={() => toast.info("Tour skipped")} />

Status: {open ? "Active" : "Completed/Skipped"}

(Drawer + Swipe)

Mobile View

toast.success("Mobile tour completed")} onSkip={() => toast.info("Mobile tour skipped")} forceVariant="mobile" />

Status: {openMobile ? "Active" : "Completed/Skipped"}

{" "} Browser Local Storage State

These values represent the "Don't show again" checkbox state.
- When set to{" "} true, the intro will be hidden.
- When{" "} null, the intro will be shown.

Desktop State:{" "}


                        {storageState.desktop === null
                          ? "null"
                          : storageState.desktop}

Mobile State:{" "}


                        {storageState.mobile === null
                          ? "null"
                          : storageState.mobile}

) }

intro-disclosure

Source Code