refactor(component-showcase) remove charts (#255)

Author: TheOrcDev

components/examples/component-showcase.tsx

@@ -1,4 +1,4 @@
-import { Activity, Users } from "lucide-react";
+import { Activity, Sword, Users } from "lucide-react";
 
 import { LoginForm } from "@/components/ui/8bit/blocks/login-form";
 import {
@@ -20,8 +20,6 @@ import { Textarea } from "@/components/ui/8bit/textarea";
 
 import { CommandExample } from "@/components/examples/command";
 
-import ChartAreaStep from "../ui/8bit/blocks/chart-area-step";
-import ChartBarMultiple from "../ui/8bit/blocks/chart-bar";
 import GameOver from "../ui/8bit/blocks/game-over";
 import MainMenu from "../ui/8bit/blocks/main-menu";
 import { Skeleton } from "../ui/8bit/skeleton";
@@ -61,30 +59,14 @@ export default function ComponentShowcase() {
 
         <Card>
           <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">
-              Product Details
-            </CardTitle>
+            <CardTitle className="text-sm font-medium">Warriors</CardTitle>
+            <Sword className="size-4 text-muted-foreground" />
           </CardHeader>
           <CardContent>
-            <div className="grid gap-6">
-              <div className="grid gap-3">
-                <Label htmlFor="name">Name</Label>
-                <Input
-                  id="name"
-                  type="text"
-                  className="w-full"
-                  defaultValue="Gamer Gear"
-                />
-              </div>
-              <div className="grid gap-3">
-                <Label htmlFor="description">Description</Label>
-                <Textarea
-                  id="description"
-                  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
-                  className="min-h-32"
-                />
-              </div>
-            </div>
+            <div className="text-2xl font-bold">+100</div>
+            <p className="text-xs text-muted-foreground">
+              +100 since last month
+            </p>
           </CardContent>
         </Card>
       </div>
@@ -93,7 +75,7 @@ export default function ComponentShowcase() {
       <div className="flex flex-col gap-4 lg:col-span-2">
         <GameOver />
 
-        <Card>
+        {/* <Card>
           <CardHeader className="flex flex-row items-center justify-between">
             <CardTitle className="text-sm font-medium">
               Total visitors in the last 6 months
@@ -103,25 +85,17 @@ export default function ComponentShowcase() {
           <CardContent>
             <ChartAreaStep />
           </CardContent>
-        </Card>
+        </Card> */}
 
         <LoginForm />
+
+        <Skeleton className="w-full h-full flex flex-col justify-center items-center">
+          Skeleton
+        </Skeleton>
       </div>
 
       {/* Column 3 */}
       <div className="flex flex-col gap-4 w-full">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between">
-            <CardTitle className="text-sm font-medium">
-              Total visitors
-            </CardTitle>
-            <Users className="size-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <ChartBarMultiple />
-          </CardContent>
-        </Card>
-
         <Card>
           <CardHeader>
             <CardTitle>Product Status</CardTitle>
@@ -147,9 +121,34 @@ export default function ComponentShowcase() {
 
         <CommandExample />
 
-        <Skeleton className="w-full h-full flex flex-col justify-center items-center">
-          Skeleton
-        </Skeleton>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-sm font-medium">
+              Product Details
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <div className="grid gap-6">
+              <div className="grid gap-3">
+                <Label htmlFor="name">Name</Label>
+                <Input
+                  id="name"
+                  type="text"
+                  className="w-full"
+                  defaultValue="Gamer Gear"
+                />
+              </div>
+              <div className="grid gap-3">
+                <Label htmlFor="description">Description</Label>
+                <Textarea
+                  id="description"
+                  defaultValue="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam auctor, nisl nec ultricies ultricies, nunc nisl ultricies nunc, nec ultricies nunc nisl nec nunc."
+                  className="min-h-32"
+                />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
       </div>
     </div>
   );