feat: custom themes for previews

Author: mehdibha

content/components/inputs/date-picker.mdx

@@ -6,12 +6,9 @@ thumbnail:
   video: /previews/components/core/date-picker.mp4
 ---
 
-<ComponentPreview name="demos/components/core/date-picker" />
-
 ## Installation
 
 <Steps>
   <Step>Copy and paste the following code into your project.</Step>
-  <ComponentSource name="components/core/default/date-picker" />
   <Step>Update the import paths to match your project setup.</Step>
 </Steps>

package.json

@@ -56,6 +56,7 @@
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
     "cmdk": "^0.2.0",
+    "colord": "^2.9.3",
     "date-fns": "^3.2.0",
     "embla-carousel-react": "8.0.0-rc19",
     "framer-motion": "^11.0.3",
@@ -68,6 +69,7 @@
     "next-mdx-remote": "^4.4.1",
     "next-themes": "^0.2.1",
     "react": "18.2.0",
+    "react-colorful": "^5.6.1",
     "react-day-picker": "^8.10.0",
     "react-dom": "18.2.0",
     "react-hook-form": "^7.49.3",
@@ -87,7 +89,8 @@
     "vaul": "^0.9.0",
     "vfile": "^6.0.1",
     "vfile-matter": "^5.0.0",
-    "zod": "^3.22.4"
+    "zod": "^3.22.4",
+    "zustand": "^4.5.2"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",

pnpm-lock.yaml

@@ -1,3 +1,9 @@
+import { Loader2Icon } from "lucide-react";
+
 export default function Loading() {
-  return <div>loading...</div>;
+  return (
+    <div className="flex min-h-[calc(100vh-80px)] items-center justify-center">
+      <Loader2Icon size={30} className="animate-spin" />
+    </div>
+  );
 }

src/app/(docs)/[...slug]/loading.tsx

@@ -85,7 +85,7 @@ export default async function Page({ params }: PageProps) {
         <h1 className="text-4xl font-bold">{metadata.title}</h1>
         <p className="mt-2 text-muted-foreground">{metadata.description}</p>
         {categories && categories.length > 0 && (
-          <div className="mt-6 flex flex-wrap gap-4">
+          <div className="mt-6 flex flex-wrap gap-2">
             {categories.map((category, index) => (
               <Button key={index} size="sm" variant="secondary" asChild className="h-7">
                 <Link href={category.href}>{category.label}</Link>

src/app/(docs)/[...slug]/page.tsx

@@ -1,15 +1,14 @@
 import React from "react";
 import { Code } from "bright";
 import { tabs } from "@/components/code-highlighter/code-tabs";
-import { ScrollArea } from "@/lib/components/core/default/scroll-area";
 import {
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
 } from "@/lib/components/core/default/tabs";
-import { cn } from "@/lib/utils/classes";
 import { previews } from "@/autogenerated/previews";
+import { Preview } from "./preview";
 
 type PreviewsKeys = keyof typeof previews;
 
@@ -24,7 +23,7 @@ export const ComponentPreview = ({
   className?: string;
   aspect?: "default" | "page";
 }) => {
-  const preview = React.useMemo(() => {
+  const component = React.useMemo(() => {
     const Component = previews[name]?.component;
 
     if (!Component) {
@@ -55,21 +54,9 @@ export const ComponentPreview = ({
           <TabsTrigger value="code">Code</TabsTrigger>
         </TabsList>
         <TabsContent value="preview" className="rounded-md border">
-          <ScrollArea
-            viewportProps={{
-              className: cn({ "min-h-[350px] max-h-[800px]": aspect === "default" }),
-            }}
-          >
-            <div
-              className={cn("min-h-[350px] w-full bg-card/50", {
-                "flex items-center justify-center px-8 py-8": centered,
-              })}
-            >
-              <div className={cn("flex w-full items-center justify-center", className)}>
-                {preview}
-              </div>
-            </div>
-          </ScrollArea>
+          <Preview aspect={aspect} centered={centered} className={className}>
+            {component}
+          </Preview>
         </TabsContent>
         <TabsContent value="code" className="rounded border">
           <Code