Merge pull request #165 from sgcarstrends/164-clean-up-pages

Clean up cars and COE pages
sgcarstrends · Nov 3, 2024 · fa75592 · fa75592
2 parents abd6430 + 03063ad
commit fa75592
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 64 deletions.
diff --git a/app/cars/fuel-types/[fuelType]/page.tsx b/app/cars/fuel-types/[fuelType]/page.tsx
@@ -2,11 +2,9 @@ import { Suspense } from "react";
 import { fetchMonths } from "@/app/cars/utils/fetchMonths";
 import { CarOverviewTrends } from "@/app/components/CarOverviewTrends";
 import { EmptyData } from "@/components/EmptyData";
-import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { API_URL, SITE_TITLE, SITE_URL } from "@/config";
 import {
   type Car,
@@ -56,15 +54,10 @@ export const generateMetadata = async ({
   };
 };
 
-const tabItems: Record<string, string> = {
-  petrol: "/cars/fuel-types/petrol",
-  hybrid: "/cars/fuel-types/hybrid",
-  electric: "/cars/fuel-types/electric",
-  diesel: "/cars/fuel-types/diesel",
-};
+const fuelTypes = ["petrol", "hybrid", "electric", "diesel"];
 
 export const generateStaticParams = () =>
-  Object.keys(tabItems).map((fuelType) => ({ fuelType }));
+  fuelTypes.map((fuelType) => ({ fuelType }));
 
 const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
   const { fuelType } = params;
@@ -106,28 +99,19 @@ const CarsByFuelTypePage = async ({ params, searchParams }: Props) => {
   return (
     <section>
       <StructuredData data={structuredData} />
-      <div className="flex flex-col gap-y-8">
-        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex items-end gap-x-2">
+      <div className="flex flex-col gap-4">
+        <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          <div className="flex items-end gap-2">
             <Typography.H1 className="uppercase">
               {capitaliseWords(fuelType)}
             </Typography.H1>
           </div>
-          <Suspense fallback={null}>
-            <MonthSelector months={months} />
-          </Suspense>
+          <div className="lg:justify-self-end">
+            <Suspense fallback={null}>
+              <MonthSelector months={months} />
+            </Suspense>
+          </div>
         </div>
-        <Tabs defaultValue={fuelType}>
-          <TabsList>
-            {Object.entries(tabItems).map(([title, href]) => (
-              <LinkWithParams key={title} href={href}>
-                <TabsTrigger value={title}>
-                  {capitaliseWords(title)}
-                </TabsTrigger>
-              </LinkWithParams>
-            ))}
-          </TabsList>
-        </Tabs>
         <CarOverviewTrends cars={filteredCars} />
       </div>
     </section>

diff --git a/app/cars/vehicle-types/[vehicleType]/page.tsx b/app/cars/vehicle-types/[vehicleType]/page.tsx
@@ -2,12 +2,9 @@ import { Suspense } from "react";
 import { fetchMonths } from "@/app/cars/utils/fetchMonths";
 import { CarOverviewTrends } from "@/app/components/CarOverviewTrends";
 import { EmptyData } from "@/components/EmptyData";
-import { LinkWithParams } from "@/components/LinkWithParams";
 import { MonthSelector } from "@/components/MonthSelector";
 import { StructuredData } from "@/components/StructuredData";
 import Typography from "@/components/Typography";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { API_URL, SITE_TITLE, SITE_URL } from "@/config";
 import {
   type Car,
@@ -55,17 +52,17 @@ export const generateMetadata = async ({
   };
 };
 
-const tabItems: Record<string, string> = {
-  hatchback: "/cars/vehicle-types/hatchback",
-  sedan: "/cars/vehicle-types/sedan",
-  "multi-purpose vehicle": "/cars/vehicle-types/multi-purpose vehicle",
-  "station-wagon": "/cars/vehicle-types/station-wagon",
-  "sports utility vehicle": "/cars/vehicle-types/sports utility vehicle",
-  "coupe/convertible": "/cars/vehicle-types/coupe%2Fconvertible",
-};
+const vehicleTypes = [
+  "hatchback",
+  "sedan",
+  "multi-purpose vehicle",
+  "station-wagon",
+  "sports utility vehicle",
+  "coupe/convertible",
+];
 
 export const generateStaticParams = () =>
-  Object.keys(tabItems).map((vehicleType) => ({ vehicleType }));
+  vehicleTypes.map((vehicleType) => ({ vehicleType }));
 
 const CarsByVehicleTypePage = async ({ params, searchParams }: Props) => {
   const { vehicleType } = params;
@@ -107,33 +104,19 @@ const CarsByVehicleTypePage = async ({ params, searchParams }: Props) => {
   return (
     <section>
       <StructuredData data={structuredData} />
-      <div className="flex flex-col gap-y-8">
-        <div className="flex flex-col gap-2 lg:flex-row lg:items-center lg:justify-between">
-          <div className="flex items-end gap-x-2">
+      <div className="flex flex-col gap-4">
+        <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
+          <div className="flex items-end gap-2">
             <Typography.H1 className="uppercase">
               {capitaliseWords(decodeURIComponent(vehicleType))}
             </Typography.H1>
           </div>
-          <Suspense fallback={null}>
-            <MonthSelector months={months} />
-          </Suspense>
+          <div className="lg:justify-self-end">
+            <Suspense fallback={null}>
+              <MonthSelector months={months} />
+            </Suspense>
+          </div>
         </div>
-        <Tabs defaultValue={decodeURIComponent(vehicleType)}>
-          <ScrollArea>
-            <TabsList>
-              {Object.entries(tabItems).map(([title, href]) => {
-                return (
-                  <LinkWithParams key={title} href={href}>
-                    <TabsTrigger value={title}>
-                      {capitaliseWords(title)}
-                    </TabsTrigger>
-                  </LinkWithParams>
-                );
-              })}
-            </TabsList>
-            <ScrollBar orientation="horizontal" />
-          </ScrollArea>
-        </Tabs>
         <CarOverviewTrends cars={filteredCars} />
       </div>
     </section>

diff --git a/app/coe/(prices)/page.tsx b/app/coe/(prices)/page.tsx
@@ -86,13 +86,13 @@ const COEPricesPage = async ({ searchParams }: Props) => {
   return (
     <>
       <StructuredData data={structuredData} />
-      <div className="flex flex-col gap-y-8">
+      <div className="flex flex-col gap-y-4">
         <Typography.H1>COE Results</Typography.H1>
-        <div className="grid gap-4 lg:grid-cols-12">
-          <div className="grid grid-cols-1 gap-4 lg:col-span-8">
+        <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
+          <div className="xl:col-span-8">
             <COEPremiumChart data={data} months={months} />
           </div>
-          <div className="grid grid-cols-1 gap-4 lg:col-span-4">
+          <div className="xl:col-span-4">
             <COECategories />
           </div>
         </div>