docs: add sparkle button

mehdibha · mehdibha · commit 8bc2ec80cf32 · 2024-03-21T00:18:29.000+01:00
diff --git a/content/components/animations/sparkle-button.mdx b/content/components/animations/sparkle-button.mdx
@@ -1,7 +1,7 @@
 ---
 title: Sparkle button
 description: A beautiful sparkle animation button
-thumbnail: https://h2rsi9anqnqbkvkf.public.blob.vercel-storage.com/EQocBJl-zK05DNFBYpzBdrpZUABq1OfNjUwYtz.mp4
+video: /previews/components/sparkle-button.mp4
 ---
 
 <ComponentPreview name="components/sparkle-button/demo" />
diff --git a/content/components/marketing/hero-section.mdx b/content/components/marketing/hero-section.mdx
diff --git a/content/pages/pricing.mdx b/content/pages/pricing.mdx
@@ -1,6 +1,6 @@
 ---
 title: Pricing page
-thumbnail: /images/lib/pages/pricing.png
+thumbnail: /previews/pages/pricing.png
 ---
 
 <ComponentPreview name="pages/pricing" aspect="page" centered={false} />
diff --git a/content/templates/taxonomy.mdx b/content/templates/taxonomy.mdx
@@ -1,7 +1,7 @@
 ---
 title: Taxonomy
 description: An open source application built using the new router, server components and everything new in Next.js 13.
-thumbnail: /images/lib/templates/taxonomy.png
+thumbnail: /previews/templates/taxonomy.png
 keywords: 
   - Next.js
   - Stripe
diff --git a/content/templates/turbocharger.mdx b/content/templates/turbocharger.mdx
@@ -1,7 +1,7 @@
 ---
 title: Turbocharger
 description: A SaaS starter built with Turborepo, Next.js, TailwindCSS, Prisma, and Stripe.
-thumbnail: /images/lib/templates/turbocharger.png
+thumbnail: /previews/templates/turbocharger.png
 keywords: 
   - Turborepo 
   - Next.js
diff --git a/public/images/lib/templates/turbocharger.png b/public/images/lib/templates/turbocharger.png
diff --git a/public/previews/components/sparkle-button.mp4 b/public/previews/components/sparkle-button.mp4
diff --git a/src/app/[...slug]/page.tsx b/src/app/[...slug]/page.tsx
@@ -148,22 +148,20 @@ const DataGrid = ({ type, items }: { type: string; items: Item[] }) => {
                   }
                 )}
               >
-                {item.metadata.thumbnail ? (
-                  item.metadata.thumbnail.includes("mp4") ? (
-                    <video
-                      src={item.metadata.thumbnail}
-                      muted
-                      loop
-                      autoPlay
-                      className="opacity-90 duration-150 group-hover:opacity-100"
-                    />
-                  ) : (
-                    <img
-                      src={item.metadata.thumbnail}
-                      alt={item.metadata.title}
-                      className="opacity-90 duration-150 group-hover:opacity-100"
-                    />
-                  )
+                {item.metadata.video ? (
+                  <video
+                    src={item.metadata.video}
+                    muted
+                    loop
+                    autoPlay
+                    className="opacity-90 duration-150 group-hover:opacity-100"
+                  />
+                ) : item.metadata.thumbnail ? (
+                  <img
+                    src={item.metadata.thumbnail}
+                    alt={item.metadata.title}
+                    className="opacity-90 duration-150 group-hover:opacity-100"
+                  />
                 ) : (
                   <p className="text-muted-foreground">No thumbnail</p>
                 )}
diff --git a/src/autogenerated/previews.ts b/src/autogenerated/previews.ts
@@ -8,16 +8,7 @@ export const previews = {
     code: [
       {
         title: "demo.tsx",
-        code: 'import { Button } from "@/lib/components/sparkle-button";\r\n\r\nexport default function SparkleButton() {\r\n  return <Button variant="sparkle">Get started</Button>;\r\n}\r\n',
-      },
-    ],
-  },
-  "components/hero-section": {
-    component: React.lazy<React.FC>(() => import("@/lib/components/hero-section")),
-    code: [
-      {
-        title: "hero-section.tsx",
-        code: 'import React from "react";\r\nimport Link from "next/link";\r\nimport { ArrowRightIcon, SearchIcon, SparklesIcon } from "lucide-react";\r\nimport { badgeVariants } from "@/components/ui/badge";\r\nimport { Button } from "@/components/ui/button";\r\nimport { cn } from "@/utils/classes";\r\n\r\nexport default function Demo() {\r\n  return (\r\n    <section>\r\n      <Link\r\n        href="https://github.com/mehdibha/rcopy"\r\n        target="_blank"\r\n        className={cn(\r\n          badgeVariants({ variant: "outline", size: "md" }),\r\n          "cursor-pointer space-x-2 font-mono delay-75 duration-200 hover:bg-secondary"\r\n        )}\r\n      >\r\n        <SparklesIcon size={18} />\r\n        <span>Star us on GitHub</span> <ArrowRightIcon size={15} />\r\n      </Link>\r\n      <h1 className="mt-4 max-w-2xl font-display text-5xl font-bold leading-tight">\r\n        Copy and paste components for you React App\r\n      </h1>\r\n      <h2 className="text-md mt-6 text-muted-foreground md:text-lg lg:text-xl">\r\n        Copy the code, paste it, customize it, own it. Done.\r\n      </h2>\r\n      <div className="mt-10 flex space-x-4">\r\n        <Button size="lg" variant="default">\r\n          Explore components\r\n        </Button>\r\n        <Button size="lg" variant="outline">\r\n          <SearchIcon size={20} className="mr-2" />\r\n          Quick search\r\n        </Button>\r\n      </div>\r\n    </section>\r\n  );\r\n}\r\n',
+        code: 'import { SparkleButton } from "@/lib/components/sparkle-button";\r\n\r\nexport default function Demo() {\r\n  return <SparkleButton size="lg">Get started</SparkleButton>;\r\n}\r\n',
       },
     ],
   },
@@ -48,7 +39,7 @@ export const previews = {
       },
       {
         title: "cta.tsx",
-        code: 'import React from "react";\r\nimport Link from "next/link";\r\nimport { Button } from "@/components/ui/button";\r\nimport { cn } from "@/utils/classes";\r\n\r\ninterface CallToActionProps {\r\n  headline: string;\r\n  subheadline: string;\r\n  cta: {\r\n    label: string;\r\n    href: string;\r\n  };\r\n  className?: string;\r\n}\r\n\r\nexport const CallToAction = (props: CallToActionProps) => {\r\n  const { headline, subheadline, cta, className } = props;\r\n  return (\r\n    <section className={cn("mx-auto max-w-xl text-center", className)}>\r\n      <h2 className="font-display text-4xl font-semibold tracking-tighter sm:text-5xl">{headline}</h2>\r\n      <p className="mt-4 text-muted-foreground">{subheadline}</p>\r\n      <Button asChild size="lg" className="mt-8">\r\n        <Link href={cta.href}>{cta.label}</Link>\r\n      </Button>\r\n    </section>\r\n  );\r\n};\r\n',
+        code: 'import React from "react";\r\nimport Link from "next/link";\r\nimport { Button } from "@/components/ui/button";\r\nimport { cn } from "@/utils/classes";\r\n\r\ninterface CallToActionProps {\r\n  headline: string;\r\n  subheadline: string;\r\n  cta: {\r\n    label: string;\r\n    href: string;\r\n  };\r\n  className?: string;\r\n}\r\n\r\nexport const CallToAction = (props: CallToActionProps) => {\r\n  const { headline, subheadline, cta, className } = props;\r\n  return (\r\n    <section className={cn("mx-auto max-w-xl text-center", className)}>\r\n      <h2 className="font-display text-4xl font-semibold tracking-tighter sm:text-5xl">\r\n        {headline}\r\n      </h2>\r\n      <p className="mt-4 text-muted-foreground">{subheadline}</p>\r\n      <Button asChild size="lg" className="mt-8">\r\n        <Link href={cta.href}>{cta.label}</Link>\r\n      </Button>\r\n    </section>\r\n  );\r\n};\r\n',
       },
       {
         title: "faq.tsx",
diff --git a/src/lib/components/hero-section.tsx b/src/lib/components/hero-section.tsx
diff --git a/src/lib/components/sparkle-button/demo.tsx b/src/lib/components/sparkle-button/demo.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/lib/components/sparkle-button";
+import { SparkleButton } from "@/lib/components/sparkle-button";
 
-export default function SparkleButton() {
-  return <Button variant="sparkle">Get started</Button>;
+export default function Demo() {
+  return <SparkleButton size="lg">Get started</SparkleButton>;
 }
diff --git a/src/lib/components/sparkle-button/index.tsx b/src/lib/components/sparkle-button/index.tsx
@@ -3,12 +3,9 @@ import { Slot } from "@radix-ui/react-slot";
 import { type VariantProps, cva, cn } from "@/utils/classes";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-80",
+  "group relative grid overflow-hidden duration-300 inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-80 ",
   {
     variants: {
-      variant: {
-        sparkle: "",
-      },
       size: {
         default: "h-10 px-4 py-2",
         sm: "h-9 rounded-md px-3",
@@ -17,7 +14,6 @@ const buttonVariants = cva(
       },
     },
     defaultVariants: {
-      variant: "sparkle",
       size: "default",
     },
   }
@@ -29,44 +25,24 @@ export interface ButtonProps
   asChild?: boolean;
 }
 
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
+const SparkleButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, size, asChild = false, ...props }, ref) => {
     const Comp = asChild ? Slot : "button";
-    if (variant === "sparkle") {
-      return (
-        <button
-          className={cn(
-            "group relative grid overflow-hidden rounded-full duration-300",
-            buttonVariants({ size, className })
-          )}
-        >
-          <span>
-            <span
-              className={cn(
-                "spark mask-gradient animate-flip before:animate-rotate absolute inset-0 h-[100%] w-[100%] overflow-hidden rounded-lg [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]",
-                { "rounded-full": size === "sm" }
-              )}
-            />
-          </span>
+    return (
+      <Comp ref={ref} className={cn(buttonVariants({ size }), className)}>
+        <span>
           <span
             className={cn(
-              "backdrop absolute inset-[1px] rounded-md bg-secondary transition-colors duration-200 group-hover:bg-primary",
-              { "rounded-full": size === "sm" }
+              "absolute inset-0 h-[100%] w-[100%] animate-flip overflow-hidden rounded-lg [mask:linear-gradient(white,_transparent_50%)] before:absolute before:aspect-square before:w-[200%] before:rotate-[-90deg] before:animate-rotate before:bg-[conic-gradient(from_0deg,transparent_0_340deg,white_360deg)] before:content-[''] before:[inset:0_auto_auto_50%] before:[translate:-50%_-15%]"
             )}
           />
-          <span className="z-10">{props.children}</span>
-        </button>
-      );
-    }
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
+        </span>
+        <span className="backdrop absolute inset-[1px] rounded-md bg-secondary transition-colors duration-200" />
+        <span className="z-10">{props.children}</span>
+      </Comp>
     );
   }
 );
-Button.displayName = "Button";
+SparkleButton.displayName = "Button";
 
-export { Button, buttonVariants };
+export { SparkleButton };
diff --git a/src/utils/docs.ts b/src/utils/docs.ts
@@ -10,6 +10,7 @@ export interface DocFrontmatter {
   title: string;
   description?: string;
   thumbnail?: string;
+  video?: string;
   keywords?: string[];
   externalLink?: string;
 }
@@ -20,6 +21,7 @@ export interface DocMetadata {
   breadcrumbs: { label: string; href: string }[];
   description?: string;
   thumbnail?: string;
+  video?: string;
 }
 
 export interface Category {
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -151,6 +151,16 @@ const config = {
             opacity: "0",
           },
         },
+        flip: {
+          to: {
+            transform: "rotate(360deg)",
+          },
+        },
+        rotate: {
+          to: {
+            transform: "rotate(90deg)",
+          },
+        },
       },
       animation: {
         "accordion-down": "accordion-down 0.2s ease-out",
@@ -161,6 +171,8 @@ const config = {
         "gradient-foreground-2": "gradient-foreground-2 8s infinite",
         "gradient-background-3": "gradient-background-3 8s infinite",
         "gradient-foreground-3": "gradient-foreground-3 8s infinite",
+        flip: "flip 6s infinite steps(2, end)",
+        rotate: "rotate 3s linear infinite both",
       },
     },
   },

Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`		`-import { Button } from "@/lib/components/sparkle-button";`
	`1`	`+import { SparkleButton } from "@/lib/components/sparkle-button";`
`2`	`2`
`3`		`-export default function SparkleButton() {`
`4`		`- return <Button variant="sparkle">Get started</Button>;`
	`3`	`+export default function Demo() {`
	`4`	`+ return <SparkleButton size="lg">Get started</SparkleButton>;`
`5`	`5`	`}`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,7 @@ export interface DocFrontmatter {`
`10`	`10`	`title: string;`
`11`	`11`	`description?: string;`
`12`	`12`	`thumbnail?: string;`
	`13`	`+ video?: string;`
`13`	`14`	`keywords?: string[];`
`14`	`15`	`externalLink?: string;`
`15`	`16`	`}`
`@@ -20,6 +21,7 @@ export interface DocMetadata {`
`20`	`21`	`breadcrumbs: { label: string; href: string }[];`
`21`	`22`	`description?: string;`
`22`	`23`	`thumbnail?: string;`
	`24`	`+ video?: string;`
`23`	`25`	`}`
`24`	`26`
`25`	`27`	`export interface Category {`