From a19e10715e0e9ea669f28509711d19325a0d81d0 Mon Sep 17 00:00:00 2001
From: frectonz <fraol0912@gmail.com>
Date: Sun, 23 Jun 2024 16:18:47 +0300
Subject: [PATCH] feat: uppercase text on overview page

---
 ui/src/routes/__root.tsx     |   4 +-
 ui/src/routes/index.lazy.tsx | 229 ++++++++++++++++++-----------------
 2 files changed, 117 insertions(+), 116 deletions(-)

diff --git a/ui/src/routes/__root.tsx b/ui/src/routes/__root.tsx
index b5da5ef..ca3ad73 100644
--- a/ui/src/routes/__root.tsx
+++ b/ui/src/routes/__root.tsx
@@ -120,8 +120,8 @@ function MobileNav() {
               xmlns="http://www.w3.org/2000/svg"
             >
               <path
-                fill-rule="evenodd"
-                clip-rule="evenodd"
+                fillRule="evenodd"
+                clipRule="evenodd"
                 d="M6 16C6 15.4696 6.21071 14.9609 6.58579 14.5858C6.96086 14.2107 7.46957 14 8 14H40C40.5304 14 41.0391 14.2107 41.4142 14.5858C41.7893 14.9609 42 15.4696 42 16C42 16.5304 41.7893 17.0391 41.4142 17.4142C41.0391 17.7893 40.5304 18 40 18H8C7.46957 18 6.96086 17.7893 6.58579 17.4142C6.21071 17.0391 6 16.5304 6 16ZM6 32C6 31.4696 6.21071 30.9609 6.58579 30.5858C6.96086 30.2107 7.46957 30 8 30H28C28.5304 30 29.0391 30.2107 29.4142 30.5858C29.7893 30.9609 30 31.4696 30 32C30 32.5304 29.7893 33.0391 29.4142 33.4142C29.0391 33.7893 28.5304 34 28 34H8C7.46957 34 6.96086 33.7893 6.58579 33.4142C6.21071 33.0391 6 32.5304 6 32Z"
                 className="fill-primary"
               />
diff --git a/ui/src/routes/index.lazy.tsx b/ui/src/routes/index.lazy.tsx
index d7b9640..c368b1a 100644
--- a/ui/src/routes/index.lazy.tsx
+++ b/ui/src/routes/index.lazy.tsx
@@ -1,34 +1,35 @@
 import { createFileRoute } from "@tanstack/react-router";
 import {
+  Workflow,
+  TextSearch,
   DatabaseZap,
   Table as TableIcon,
-  TextSearch,
-  Workflow,
+  LucideIcon,
 } from "lucide-react";
 import {
   Bar,
-  BarChart,
-  ResponsiveContainer,
-  Tooltip,
-  TooltipProps,
   XAxis,
   YAxis,
+  Tooltip,
+  BarChart,
+  TooltipProps,
+  ResponsiveContainer,
 } from "recharts";
+import {
+  NameType,
+  ValueType,
+} from "recharts/types/component/DefaultTooltipContent";
 
 import { fetchOverview } from "@/api";
 import {
   Card,
+  CardTitle,
+  CardHeader,
   CardContent,
   CardDescription,
-  CardHeader,
-  CardTitle,
 } from "@/components/ui/card";
 import { Skeleton } from "@/components/ui/skeleton";
 import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
-import {
-  NameType,
-  ValueType,
-} from "recharts/types/component/DefaultTooltipContent";
 
 export const Route = createFileRoute("/")({
   component: Index,
@@ -39,76 +40,56 @@ export const Route = createFileRoute("/")({
 function Index() {
   const data = Route.useLoaderData();
 
+  const cards: InfoCardProps[] = [
+    {
+      title: "TABLES",
+      value: data.tables.toLocaleString(),
+      description: "The number of tables in the DB.",
+      icon: TableIcon,
+    },
+    {
+      title: "INDEXES",
+      value: data.indexes.toLocaleString(),
+      description: "The number of indexes in the DB.",
+      icon: DatabaseZap,
+    },
+    {
+      title: "VIEWS",
+      value: data.views.toLocaleString(),
+      description: "The number of views in the DB.",
+      icon: TextSearch,
+    },
+    {
+      title: "TRIGGERS",
+      value: data.triggers.toLocaleString(),
+      description: "The number of triggers in the DB.",
+      icon: Workflow,
+    },
+  ];
+
   return (
     <>
       <h2 className="scroll-m-20 border-b pb-2 text-muted-foreground text-3xl tracking-tight first:mt-0">
-        Exploring{" "}
+        EXPLORING{" "}
         <span className="font-bold text-foreground">{data.file_name}</span>
       </h2>
 
       <div className="grid gap-4 md:grid-cols-2 md:gap-8 lg:grid-cols-4">
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Tables</CardTitle>
-            <TableIcon className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {data.tables.toLocaleString()}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              The number of tables in the DB.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Indexes</CardTitle>
-            <DatabaseZap className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {data.indexes.toLocaleString()}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              The number of indexes across the whole DB.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Views</CardTitle>
-            <TextSearch className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {data.views.toLocaleString()}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              The number of views in the DB.
-            </p>
-          </CardContent>
-        </Card>
-        <Card>
-          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
-            <CardTitle className="text-sm font-medium">Triggers</CardTitle>
-            <Workflow className="h-4 w-4 text-muted-foreground" />
-          </CardHeader>
-          <CardContent>
-            <div className="text-2xl font-bold">
-              {data.triggers.toLocaleString()}
-            </div>
-            <p className="text-xs text-muted-foreground">
-              The number of triggers in the DB.
-            </p>
-          </CardContent>
-        </Card>
+        {cards.map((card, i) => (
+          <InfoCard
+            key={i}
+            title={card.title}
+            value={card.value}
+            description={card.description}
+            icon={card.icon}
+          />
+        ))}
       </div>
 
       <div className="grid gap-8 lg:grid-cols-2 xl:grid-cols-7">
         <Card className="xl:col-span-4">
           <CardHeader>
-            <CardTitle>Rows Per Table</CardTitle>
+            <CardTitle>ROWS PER TABLE</CardTitle>
           </CardHeader>
           <CardContent className="pl-2">
             <TheBarChart counts={data.counts} />
@@ -117,63 +98,41 @@ function Index() {
         <Card className="xl:col-span-3">
           <CardHeader className="flex flex-row items-center">
             <div className="grid gap-2">
-              <CardTitle>More metadata</CardTitle>
-              <CardDescription>More info about the DB</CardDescription>
+              <CardTitle>MORE METADATA</CardTitle>
+              <CardDescription>More info about the DB.</CardDescription>
             </div>
           </CardHeader>
           <CardContent>
             <Table>
               <TableBody>
-                <TableRow>
-                  <TableCell>
-                    <div className="font-medium">File size</div>
-                    <div className="text-sm text-muted-foreground md:inline">
-                      The size of the DB on disk.
-                    </div>
-                  </TableCell>
-                  <TableCell className="text-right">{data.file_size}</TableCell>
-                </TableRow>
+                <MetadataRow
+                  name="FILE SIZE"
+                  description="The size of the DB on disk."
+                  value={data.file_size}
+                />
 
                 {data.sqlite_version && (
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">SQLite version</div>
-                      <div className="text-sm text-muted-foreground md:inline">
-                        The SQLite version the DB was created with.
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      {data.sqlite_version}
-                    </TableCell>
-                  </TableRow>
+                  <MetadataRow
+                    name="SQLite VERSION"
+                    description="The SQLite version the DB was created with."
+                    value={data.sqlite_version}
+                  />
                 )}
 
                 {data.created && (
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Created on</div>
-                      <div className="text-sm text-muted-foreground md:inline">
-                        The date and time when the DB was created.
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      {data.created.toUTCString()}
-                    </TableCell>
-                  </TableRow>
+                  <MetadataRow
+                    name="CREATED ON"
+                    description="The date and time when the DB was created."
+                    value={data.created.toUTCString()}
+                  />
                 )}
 
                 {data.modified && (
-                  <TableRow>
-                    <TableCell>
-                      <div className="font-medium">Modified on</div>
-                      <div className="text-sm text-muted-foreground md:inline">
-                        The date and time when the DB was last modified.
-                      </div>
-                    </TableCell>
-                    <TableCell className="text-right">
-                      {data.modified.toUTCString()}
-                    </TableCell>
-                  </TableRow>
+                  <MetadataRow
+                    name="MODIFIED ON"
+                    description="The date and time when the DB was created."
+                    value={data.modified.toUTCString()}
+                  />
                 )}
               </TableBody>
             </Table>
@@ -184,6 +143,48 @@ function Index() {
   );
 }
 
+type InfoCardProps = {
+  title: string;
+  value: string;
+  description: string;
+  icon: LucideIcon;
+};
+
+function InfoCard({ title, value, description, icon: Icon }: InfoCardProps) {
+  return (
+    <Card>
+      <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+        <CardTitle className="text-sm font-medium">{title}</CardTitle>
+        <Icon className="h-4 w-4 text-muted-foreground" />
+      </CardHeader>
+      <CardContent>
+        <div className="text-2xl font-bold">{value}</div>
+        <p className="text-xs text-muted-foreground">{description}</p>
+      </CardContent>
+    </Card>
+  );
+}
+
+type MetadataRowProps = {
+  name: string;
+  description: string;
+  value: string;
+};
+
+function MetadataRow({ name, description, value }: MetadataRowProps) {
+  return (
+    <TableRow>
+      <TableCell>
+        <div className="font-medium">{name}</div>
+        <div className="text-sm text-muted-foreground md:inline">
+          {description}
+        </div>
+      </TableCell>
+      <TableCell className="text-right">{value}</TableCell>
+    </TableRow>
+  );
+}
+
 type TheBarChartProps = {
   counts: {
     count: number;