Skip to content

Commit

Permalink
feat: uppercase text on overview page
Browse files Browse the repository at this point in the history
  • Loading branch information
@frectonz
frectonz committed Jun 23, 2024
1 parent 181ed3c commit a19e107
Show file tree
Hide file tree
Showing 2 changed files with 117 additions and 116 deletions.
4 changes: 2 additions & 2 deletions ui/src/routes/__root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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"
/>
Expand Down
229 changes: 115 additions & 114 deletions ui/src/routes/index.lazy.tsx
View file
Original file line number Diff line number Diff line change
@@ -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,
Expand All @@ -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} />
Expand All @@ -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>
Expand All @@ -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;
Expand Down

0 comments on commit a19e107

Please sign in to comment.