Update UI and layout components

sgcarstrends · Nov 12, 2024 · e98771f · e98771f
1 parent 2006dbb
commit e98771f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 12 deletions.
diff --git a/app/components/CarOverviewTrends.tsx b/app/components/CarOverviewTrends.tsx
@@ -1,14 +1,22 @@
 import { Suspense } from "react";
 import { TrendChart } from "@/app/cars/fuel-types/[fuelType]/TrendChart";
 import { DataTable } from "@/components/DataTable";
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
 import type { Car } from "@/types";
 
 interface Props {
   cars: Car[];
 }
 
 export const CarOverviewTrends = ({ cars }: Props) => {
+  const total = cars.reduce((acc, curr) => acc + curr.number, 0);
+
   return (
     <div className="grid grid-cols-1 gap-4">
       <Card>
@@ -23,7 +31,10 @@ export const CarOverviewTrends = ({ cars }: Props) => {
       </Card>
       <Card>
         <CardHeader>
-          <CardTitle>Registrations</CardTitle>
+          <CardTitle>Distribution Table</CardTitle>
+          <CardDescription>
+            A total of <span className="font-bold">{total}</span> registrations
+          </CardDescription>
         </CardHeader>
         <CardContent>
           <DataTable data={cars} />

diff --git a/components/DataTable.tsx b/components/DataTable.tsx
@@ -1,6 +1,6 @@
 import Link from "next/link";
-import { Progress } from "@/app/components/Progress";
 import Typography from "@/components/Typography";
+import { Progress } from "@/components/ui/progress";
 import {
   Table,
   TableBody,
@@ -44,19 +44,24 @@ export const DataTable = ({ data }: Props) => {
           </TableRow>
         )}
         {data.length > 0 &&
-          data.map((item, index) => (
-            <TableRow key={item._id}>
+          data.map(({ make, number }, index) => (
+            <TableRow key={make}>
               <TableCell>
-                <Link href={`/make/${item.make}`}>{item.make}</Link>
+                <Link href={`/cars/brands/${make}`}>{make}</Link>
               </TableCell>
-              <TableCell>{item.number}</TableCell>
+              <TableCell>{number}</TableCell>
               <TableCell>
-                <Progress value={marketShare(item.number)}>
-                  {formatPercent(marketShare(item.number), {
+                <Typography.Muted>
+                  {formatPercent(marketShare(number), {
                     minimumFractionDigits: 2,
                     maximumFractionDigits: 2,
                   })}
-                </Progress>
+                </Typography.Muted>
+                <Progress
+                  value={marketShare(number) * 100}
+                  className="h-1.5"
+                  indicatorColor="bg-primary"
+                />
               </TableCell>
             </TableRow>
           ))}

diff --git a/constants/index.ts b/constants/index.ts
@@ -1,9 +1,9 @@
 export const CARS = {
   TABLE: {
     HEADERS: {
-      MAKE: "Make",
+      MAKE: "Brands",
       COUNT: "Count",
-      MARKET_SHARE: "Market Share",
+      MARKET_SHARE: "Distribution",
     },
   },
 };