Skip to content

Commit

Permalink
feat: uppercase text on tables page
Browse files Browse the repository at this point in the history
  • Loading branch information
@frectonz
frectonz committed Jun 23, 2024
1 parent a19e107 commit 520c2ff
Show file tree
Hide file tree
Showing 3 changed files with 77 additions and 88 deletions.
29 changes: 29 additions & 0 deletions ui/src/components/info-card.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
import { LucideIcon } from "lucide-react";
import { Card, CardContent, CardHeader, CardTitle } from "./ui/card";

export type InfoCardProps = {
title: string;
value: string;
description: string;
icon: LucideIcon;
};

export 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>
);
}
24 changes: 1 addition & 23 deletions ui/src/routes/index.lazy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {
TextSearch,
DatabaseZap,
Table as TableIcon,
LucideIcon,
} from "lucide-react";
import {
Bar,
Expand All @@ -29,6 +28,7 @@ import {
CardDescription,
} from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { InfoCard, InfoCardProps } from "@/components/info-card";
import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";

export const Route = createFileRoute("/")({
Expand Down Expand Up @@ -143,28 +143,6 @@ 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;
Expand Down
112 changes: 47 additions & 65 deletions ui/src/routes/tables.lazy.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,24 +1,24 @@
import "react-data-grid/lib/styles.css";

import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { Link, createFileRoute } from "@tanstack/react-router";
import {
DatabaseZap,
HardDrive,
Table as TableIcon,
DatabaseZap,
TableProperties,
Table as TableIcon,
} from "lucide-react";
import { CodeBlock, irBlack as CodeDarkTheme } from "react-code-blocks";
import DataGrid from "react-data-grid";
import { z } from "zod";
import DataGrid from "react-data-grid";
import { Link, createFileRoute } from "@tanstack/react-router";
import { useInfiniteQuery, useQuery } from "@tanstack/react-query";
import { CodeBlock, irBlack as CodeDarkTheme } from "react-code-blocks";

import { fetchTable, fetchTableData, fetchTables } from "@/api";

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { cn } from "@/lib/utils";
import { Card } from "@/components/ui/card";
import { Skeleton } from "@/components/ui/skeleton";
import { useTheme } from "@/provider/theme.provider";
import { fetchTable, fetchTableData, fetchTables } from "@/api";
import { InfoCard, InfoCardProps } from "@/components/info-card";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";

export const Route = createFileRoute("/tables")({
component: Tables,
Expand Down Expand Up @@ -71,67 +71,49 @@ function Table({ name }: Props) {

if (!data) return <TableSkeleton />;

const cards: InfoCardProps[] = [
{
title: "ROW COUNT",
value: data.row_count.toLocaleString(),
description: "The number of rows in the table.",
icon: TableIcon,
},
{
title: "INDEXES",
value: data.index_count.toLocaleString(),
description: "The number of indexes in the table.",
icon: DatabaseZap,
},
{
title: "COLUMNS",
value: data.column_count.toLocaleString(),
description: "The number of columns in the table.",
icon: TableProperties,
},
{
title: "TABLE SIZE",
value: data.table_size,
description: "The size of the table on disk.",
icon: HardDrive,
},
];

return (
<div className="flex flex-1 flex-col gap-4 md:gap-8">
<h2 className="px-2 text-foreground scroll-m-20 border-b pb-2 text-3xl font-semibold tracking-tight first:mt-0">
{data.name}
</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">Row Count</CardTitle>
<TableIcon className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{data.row_count.toLocaleString()}
</div>
<p className="text-xs text-muted-foreground">
The number of rows in the table.
</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.index_count.toLocaleString()}
</div>
<p className="text-xs text-muted-foreground">
The number of indexes in the table.
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Columns</CardTitle>
<TableProperties className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">
{data.column_count.toLocaleString()}
</div>
<p className="text-xs text-muted-foreground">
The number of columns in the table.
</p>
</CardContent>
</Card>
<Card>
<CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
<CardTitle className="text-sm font-medium">Table Size</CardTitle>
<HardDrive className="h-4 w-4 text-muted-foreground" />
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{data.table_size}</div>
<p className="text-xs text-muted-foreground">
The size of the table on disk.
</p>
</CardContent>
</Card>
{cards.map((card, i) => (
<InfoCard
key={i}
title={card.title}
value={card.value}
description={card.description}
icon={card.icon}
/>
))}
</div>

{data.sql && (
Expand Down

0 comments on commit 520c2ff

Please sign in to comment.