fix: format

Author: mehdibha

content/components/marketing/hero/hero-simple.tsx

@@ -19,7 +19,7 @@ export default function Demo() {
         <SparklesIcon size={18} />
         <span>Star us on GitHub</span> <ArrowRightIcon size={15} />
       </Link>
-      <h1 className="font-display mt-4 text-5xl font-bold leading-tight max-w-2xl">
+      <h1 className="font-display mt-4 max-w-2xl text-5xl font-bold leading-tight">
         Copy and paste components for you React App
       </h1>
       <h2 className="text-md mt-6 text-muted-foreground md:text-lg lg:text-xl">

package.json

@@ -5,7 +5,7 @@
   "type": "module",
   "scripts": {
     "build": "next build",
-    "build:preview-imports": "tsx ./scripts/build-preview-imports.ts",
+    "build:previews": "tsx ./scripts/build-previews.ts",
     "start": "next start",
     "dev": "next dev",
     "typecheck": "tsc --noEmit",

scripts/build-preview-imports.ts scripts/build-previews.ts

@@ -132,7 +132,7 @@ const DataGrid = ({ type, items }: { type: string; items: Item[] }) => {
               >
                 {item.thumbnail ? (
                   item.thumbnail.includes("mp4") ? (
-                    <video src={item.thumbnail} muted loop autoPlay/>
+                    <video src={item.thumbnail} muted loop autoPlay />
                   ) : (
                     <img src={item.thumbnail} alt={item.title} />
                   )

src/app/[...slug]/page.tsx

@@ -43,7 +43,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
           <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%]",
+                "spark mask-gradient 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%]",
                 { "rounded-full": size === "sm" }
               )}
             />

src/components/animations/sparkle-button.tsx

@@ -8,9 +8,9 @@ export const allPreviews = {
     component: React.lazy<React.FC>(() => import("~/content/components/animations/sparkle-button")),
     code : `import { Button } from "@/components/animations/sparkle-button";
 
-export const Demo = () => {
+export default function Demo() {
   return <Button variant="sparkle">Get started</Button>;
-};
+}
 `
   },
   "components/marketing/hero/hero-simple": {
@@ -36,7 +36,7 @@ export default function Demo() {
         <SparklesIcon size={18} />
         <span>Star us on GitHub</span> <ArrowRightIcon size={15} />
       </Link>
-      <h1 className="font-display mt-4 text-5xl font-bold leading-tight max-w-2xl">
+      <h1 className="font-display mt-4 max-w-2xl text-5xl font-bold leading-tight">
         Copy and paste components for you React App
       </h1>
       <h2 className="text-md mt-6 text-muted-foreground md:text-lg lg:text-xl">

src/components/autogenerated.tsx

@@ -42,7 +42,7 @@ export const ComponentPreview = ({ name }: { name: AllPreviewsKeys }) => {
         </TabsContent>
         <TabsContent value="code" className="rounded border">
           <div className=" p-1">
-            <ScrollArea className="h-[350px] relative">
+            <ScrollArea className="relative h-[350px]">
               {typeof code === "string" && (
                 <CopyButton code={code} className="absolute right-4 top-2 z-30" />
               )}

src/components/component-preview.tsx

@@ -2,8 +2,8 @@ import type { ComponentProps } from "react";
 import Link from "next/link";
 import { Code } from "bright";
 import { ComponentPreview } from "@/components/component-preview";
-import { cn } from "@/utils/classes";
 import { CopyButton } from "@/components/copy-button";
+import { cn } from "@/utils/classes";
 
 // This file was created to be used in src/components/remote-mdx.tsx
 // TODO: It can be simplified, refactored, and/or removed.
@@ -142,7 +142,10 @@ export const components = {
     const language = className?.replace(/language-/, "");
     return (
       <div className="relative">
-        <CopyButton code={props.children?.toString() ?? ""} className="absolute top-2 right-2 z-30" />
+        <CopyButton
+          code={props.children?.toString() ?? ""}
+          className="absolute right-2 top-2 z-30"
+        />
         <Code
           lang={language}
           style={{ marginTop: 0, marginBottom: 0 }}