Skip to content

Commit

Permalink
Fix padding and margins
Browse files Browse the repository at this point in the history
  • Loading branch information
Ru Chern Chong committed Jul 2, 2024
1 parent d74bd20 commit a3fbe03
Show file tree
Hide file tree
Showing 3 changed files with 66 additions and 62 deletions.
118 changes: 60 additions & 58 deletions app/cars/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -193,71 +193,73 @@ const CarsPage = async ({ searchParams }: CarsPageProps) => {
<li>Yearly OR YTD if not a full year metrics</li>
<li>Show trending Petrol/Electric/Hybrid makes</li>
</ul>
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card>
<CardHeader>
<CardTitle>Total</CardTitle>
<CardDescription>Last 4 weeks</CardDescription>
</CardHeader>
<CardContent>
<div className="text-lg font-semibold text-primary">{total}</div>
</CardContent>
<CardFooter></CardFooter>
</Card>
</div>
<div className="grid gap-4 lg:grid-cols-4">
<div className="grid gap-4 lg:col-span-2 xl:col-span-3">
<StatisticsCard
title="By Fuel Type"
data={numberByFuelType}
total={total}
/>
<StatisticsCard
title="By Vehicle Type"
data={numberByVehicleType}
total={total}
/>
</div>
{/*TODO: Interim solution*/}
<div className="grid gap-4 lg:col-span-2 xl:col-span-1">
<div className="flex flex-col gap-y-4">
<div className="grid grid-cols-2 gap-4 lg:grid-cols-4">
<Card>
<CardHeader>
<CardTitle>Popularity</CardTitle>
<CardDescription>For the month of {month}</CardDescription>
<CardTitle>Total</CardTitle>
<CardDescription>Last 4 weeks</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-2">
<PopularityList
title="Overall"
data={getPopularMakesByFuelType()}
/>
<PopularityList
title="Petrol"
data={getPopularMakesByFuelType(FUEL_TYPE.PETROL)}
/>
<PopularityList
title="Hybrid"
data={getPopularMakesByFuelType("hybrid")}
/>
<PopularityList
title="Electric"
data={getPopularMakesByFuelType(FUEL_TYPE.ELECTRIC)}
/>
<PopularityList
title="Diesel"
data={getPopularMakesByFuelType(FUEL_TYPE.DIESEL)}
/>
{/*TODO: Interim solution*/}
{Object.keys(numberByFuelType).includes(FUEL_TYPE.OTHERS) && (
<PopularityList
title="Others"
data={getPopularMakesByFuelType(FUEL_TYPE.OTHERS)}
/>
)}
</div>
<div className="text-lg font-semibold text-primary">{total}</div>
</CardContent>
<CardFooter></CardFooter>
</Card>
</div>
<div className="grid gap-4 lg:grid-cols-4">
<div className="grid gap-4 lg:col-span-2 xl:col-span-3">
<StatisticsCard
title="By Fuel Type"
data={numberByFuelType}
total={total}
/>
<StatisticsCard
title="By Vehicle Type"
data={numberByVehicleType}
total={total}
/>
</div>
{/*TODO: Interim solution*/}
<div className="grid gap-4 lg:col-span-2 xl:col-span-1">
<Card>
<CardHeader>
<CardTitle>Popularity</CardTitle>
<CardDescription>For the month of {month}</CardDescription>
</CardHeader>
<CardContent>
<div className="grid gap-2">
<PopularityList
title="Overall"
data={getPopularMakesByFuelType()}
/>
<PopularityList
title="Petrol"
data={getPopularMakesByFuelType(FUEL_TYPE.PETROL)}
/>
<PopularityList
title="Hybrid"
data={getPopularMakesByFuelType("hybrid")}
/>
<PopularityList
title="Electric"
data={getPopularMakesByFuelType(FUEL_TYPE.ELECTRIC)}
/>
<PopularityList
title="Diesel"
data={getPopularMakesByFuelType(FUEL_TYPE.DIESEL)}
/>
{/*TODO: Interim solution*/}
{Object.keys(numberByFuelType).includes(FUEL_TYPE.OTHERS) && (
<PopularityList
title="Others"
data={getPopularMakesByFuelType(FUEL_TYPE.OTHERS)}
/>
)}
</div>
</CardContent>
</Card>
</div>
</div>
</div>
{/*TODO: Interim solution*/}
{Object.keys(numberByFuelType).includes(FUEL_TYPE.OTHERS) && (
Expand Down
4 changes: 3 additions & 1 deletion app/components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import Link from "next/link";
import Image from "next/image";
import { Separator } from "@/components/ui/separator";
import banner from "@/app/banner.png";

interface FooterLink {
href: string;
Expand Down Expand Up @@ -42,7 +44,7 @@ export const Footer = () => {
<FooterSection key={title} title={title} links={links} />
))}
</div>
<Separator className="my-4" />
<Separator className="my-8" />
<div className="flex flex-col items-center justify-between gap-4 text-sm text-gray-600 md:flex-row">
<div>
Data provided by{" "}
Expand Down
6 changes: 3 additions & 3 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit a3fbe03

Please sign in to comment.