feat: add authentication and charts blocks pages with example components

app/blocks/page.tsx → app/blocks/authentication/authentication.tsx

@@ -1,30 +1,14 @@
-import { Metadata } from "next";
-
 import { LoginForm } from "@/components/ui/8bit/blocks/login-form";
 import { LoginForm as LoginForm2 } from "@/components/ui/8bit/blocks/login-form-2";
 import { LoginForm as LoginFormWithImage } from "@/components/ui/8bit/blocks/login-form-with-image";
 
-import CopyCommandButton from "../docs/components/copy-command-button";
-import { OpenInV0Button } from "../docs/components/open-in-v0-button";
-import LoginPage from "../login/page";
-
-export const metadata: Metadata = {
-  title: "Building Retro Blocks for the Web - 8bitcn/ui",
-  description:
-    "Clean, retro building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.",
-};
+import CopyCommandButton from "../../docs/components/copy-command-button";
+import { OpenInV0Button } from "../../docs/components/open-in-v0-button";
+import LoginPage from "../../login/page";
 
-export default function BlocksPage() {
+export default function AuthenticationBlocks() {
   return (
-    <div className="flex flex-col p-4 gap-5 pt-10">
-      <h1 className={`${"retro"} md:text-2xl font-bold`}>
-        Building Retro Blocks for the Web
-      </h1>
-      <p className="max-w-2xl text-sm md:text-base">
-        Clean, retro building blocks. Copy and paste into your apps. Works with
-        all React frameworks. Open Source. Free forever.
-      </p>
-
+    <>
       <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
         <div className="flex flex-col md:flex-row gap-2 items-center justify-between">
           <h2 className="text-sm text-muted-foreground sm:pl-3">
@@ -103,6 +87,6 @@ export default function BlocksPage() {
           <LoginFormWithImage />
         </div>
       </div>
-    </div>
+    </>
   );
 }

app/blocks/authentication/page.tsx

@@ -0,0 +1,37 @@
+import { Metadata } from "next";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/8bit/button";
+
+import AuthenticationBlocks from "./authentication";
+
+export const metadata: Metadata = {
+  title: "Building Retro Blocks for the Web - 8bitcn/ui",
+  description:
+    "Clean, retro building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.",
+};
+
+export default function BlocksPage() {
+  return (
+    <div className="flex flex-col p-4 gap-5 pt-10">
+      <h1 className={`${"retro"} md:text-2xl font-bold`}>
+        Building Retro Blocks for the Web
+      </h1>
+      <p className="max-w-2xl text-sm md:text-base">
+        Clean, retro building blocks. Copy and paste into your apps. Works with
+        all React frameworks. Open Source. Free forever.
+      </p>
+
+      <div className="flex gap-5">
+        <Link href="/blocks/authentication">
+          <Button>Authentication</Button>
+        </Link>
+        <Link href="/blocks/charts">
+          <Button>Charts</Button>
+        </Link>
+      </div>
+
+      <AuthenticationBlocks />
+    </div>
+  );
+}

app/blocks/charts/charts.tsx

@@ -0,0 +1,75 @@
+import { Users } from "lucide-react";
+
+import { ChartExample } from "@/components/ui/8bit/blocks/chart";
+import ChartBarMultiple from "@/components/ui/8bit/blocks/chart-bar";
+import {
+  Card,
+  CardContent,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/8bit/card";
+
+import CopyCommandButton from "../../docs/components/copy-command-button";
+import { OpenInV0Button } from "../../docs/components/open-in-v0-button";
+
+export default function ChartsBlocks() {
+  return (
+    <div className="flex flex-col gap-10">
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
+        <div className="flex flex-col md:flex-row gap-2 items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            A simple bar chart
+          </h2>
+
+          <div className="flex flex-col md:flex-row items-center gap-2">
+            <CopyCommandButton
+              command="npx shadcn@latest add 8bit-chart"
+              copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-chart.json`}
+            />
+            <OpenInV0Button name="8bit-chart" className="w-fit" />
+          </div>
+        </div>
+
+        <Card className="w-full md:w-[600px] mx-auto">
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">
+              Total visitors in the last 6 months
+            </CardTitle>
+            <Users className="size-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <ChartExample />
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex flex-col gap-4 border rounded-lg p-4 min-h-[450px]">
+        <div className="flex flex-col md:flex-row gap-2 items-center justify-between">
+          <h2 className="text-sm text-muted-foreground sm:pl-3">
+            A multiple bar chart
+          </h2>
+
+          <div className="flex flex-col md:flex-row items-center gap-2">
+            <CopyCommandButton
+              command="npx shadcn@latest add 8bit-chart-bar"
+              copyCommand={`pnpm dlx shadcn@canary add ${process.env.NEXT_PUBLIC_BASE_URL}/r/8bit-chart-bar.json`}
+            />
+            <OpenInV0Button name="8bit-chart-bar" className="w-fit" />
+          </div>
+        </div>
+
+        <Card className="w-full md:w-[600px] mx-auto">
+          <CardHeader className="flex flex-row items-center justify-between">
+            <CardTitle className="text-sm font-medium">
+              Total visitors in the last 6 months
+            </CardTitle>
+            <Users className="size-4 text-muted-foreground" />
+          </CardHeader>
+          <CardContent>
+            <ChartBarMultiple />
+          </CardContent>
+        </Card>
+      </div>
+    </div>
+  );
+}

app/blocks/charts/page.tsx

@@ -0,0 +1,37 @@
+import { Metadata } from "next";
+import Link from "next/link";
+
+import { Button } from "@/components/ui/8bit/button";
+
+import ChartsBlocks from "./charts";
+
+export const metadata: Metadata = {
+  title: "Building Retro Blocks for the Web - 8bitcn/ui",
+  description:
+    "Clean, retro building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.",
+};
+
+export default function BlocksPage() {
+  return (
+    <div className="flex flex-col p-4 gap-5 pt-10">
+      <h1 className={`${"retro"} md:text-2xl font-bold`}>
+        Building Retro Blocks for the Web
+      </h1>
+      <p className="max-w-2xl text-sm md:text-base">
+        Clean, retro building blocks. Copy and paste into your apps. Works with
+        all React frameworks. Open Source. Free forever.
+      </p>
+
+      <div className="flex gap-5">
+        <Link href="/blocks/authentication">
+          <Button>Authentication</Button>
+        </Link>
+        <Link href="/blocks/charts">
+          <Button>Charts</Button>
+        </Link>
+      </div>
+
+      <ChartsBlocks />
+    </div>
+  );
+}

app/docs/components/copy-command-button.tsx

@@ -20,7 +20,11 @@ export default function CopyCommandButton({
   };
 
   return (
-    <Button variant="outline" onClick={copy} className="text-xs md:text-sm">
+    <Button
+      variant="outline"
+      onClick={copy}
+      className="text-xs md:text-sm font-mono"
+    >
       <Terminal className="size-3 md:size-4" /> {command}
     </Button>
   );

components/examples/navigation-menu.tsx

@@ -83,7 +83,7 @@ export default function NavigationMenuDemo() {
               <ListItem href="/docs/components/accordion" title="Components">
                 Re-usable components built using Radix UI and Tailwind CSS.
               </ListItem>
-              <ListItem href="/blocks" title="Building Blocks">
+              <ListItem href="/blocks/authentication" title="Building Blocks">
                 Building Retro Blocks for the Web
               </ListItem>
             </ul>

config/nav-items.ts

@@ -197,7 +197,7 @@ export const navItems = {
     },
     {
       label: "Blocks",
-      href: "/blocks",
+      href: "/blocks/authentication",
     },
     {
       label: "Themes",