-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Update layout and design for cars dashboard
- Loading branch information
1 parent
e1050dc
commit 2bafbb1
Showing
7 changed files
with
156 additions
and
117 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,92 @@ | ||
| import { Fragment, ReactNode } from "react"; | ||
| import Link from "next/link"; | ||
| import { BatteryCharging, Droplet, Fuel, Trophy, Zap } from "lucide-react"; | ||
| import { Card, CardContent, CardHeader } from "@/components/ui/card"; | ||
| import Typography from "@/components/Typography"; | ||
| import type { Car } from "@/types"; | ||
|
|
||
| interface Category { | ||
| title: string; | ||
| icon: ReactNode; | ||
| } | ||
|
|
||
| type PopularMake = Pick<Car, "make" | "number">; | ||
|
|
||
| interface LeaderboardProps { | ||
| cars: Car[]; | ||
| } | ||
|
|
||
| const CATEGORIES: Category[] = [ | ||
| { | ||
| title: "Overall", | ||
| icon: <Trophy className="h-6 w-6 text-yellow-600" />, | ||
| }, | ||
| { | ||
| title: "Petrol", | ||
| icon: <Fuel className="h-6 w-6 text-red-600" />, | ||
| }, | ||
| { | ||
| title: "Hybrid", | ||
| icon: <Zap className="h-6 w-6 text-blue-600" />, | ||
| }, | ||
| { | ||
| title: "Electric", | ||
| icon: <BatteryCharging className="h-6 w-6 text-green-600" />, | ||
| }, | ||
| { | ||
| title: "Diesel", | ||
| icon: <Droplet className="h-6 w-6 text-gray-600" />, | ||
| }, | ||
| ]; | ||
|
|
||
| const HYBRID_TYPES: string[] = [ | ||
| "Petrol-Electric", | ||
| "Petrol-Electric (Plug-In)", | ||
| "Diesel-Electric", | ||
| ]; | ||
|
|
||
| const getPopularMakes = (cars: Car[], fuelType: string): PopularMake[] => { | ||
| const makeCount: Record<string, number> = {}; | ||
|
|
||
| cars.forEach(({ make, number, fuel_type }) => { | ||
| if ( | ||
| fuelType === "Overall" || | ||
| (fuelType === "Hybrid" && HYBRID_TYPES.includes(fuel_type)) || | ||
| fuel_type === fuelType | ||
| ) { | ||
| makeCount[make] = (makeCount[make] || 0) + (number || 0); | ||
| } | ||
| }); | ||
|
|
||
| return Object.entries(makeCount) | ||
| .map(([make, number]) => ({ make, number })) | ||
| .sort((a, b) => b.number - a.number) | ||
| .slice(0, 3); | ||
| }; | ||
|
|
||
| export const Leaderboard = ({ cars }: LeaderboardProps) => { | ||
| return ( | ||
| <div className="grid grid-cols-1 gap-4"> | ||
| {CATEGORIES.map(({ title, icon }) => ( | ||
| <Card key={title}> | ||
| <CardHeader className="flex items-center"> | ||
| {icon} | ||
| <Typography.H3>{title}</Typography.H3> | ||
| </CardHeader> | ||
| <CardContent> | ||
| <ol className="list-decimal"> | ||
| {getPopularMakes(cars, title).map(({ make, number }) => ( | ||
| <li key={make} className="flex items-center justify-between"> | ||
| <span className="flex items-center gap-x-2"> | ||
| <Link href={`/make/${make}`}>{make}</Link> | ||
| </span> | ||
| <span className="font-semibold">{number}</span> | ||
| </li> | ||
| ))} | ||
| </ol> | ||
| </CardContent> | ||
| </Card> | ||
| ))} | ||
| </div> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| import { formatDateToMonthYear } from "./formatDateToMonthYear"; | ||
|
|
||
| describe("formatDateToMonthYear", () => { | ||
| it("should return the formatted dates correctly", () => { | ||
| expect(formatDateToMonthYear("2024-01")).toBe("Jan 2024"); | ||
| expect(formatDateToMonthYear("2023-12")).toBe("Dec 2023"); | ||
| expect(formatDateToMonthYear("2025-06")).toBe("Jun 2025"); | ||
| }); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| export const MONTHS: string[] = [ | ||
| "Jan", | ||
| "Feb", | ||
| "Mar", | ||
| "Apr", | ||
| "May", | ||
| "Jun", | ||
| "Jul", | ||
| "Aug", | ||
| "Sep", | ||
| "Oct", | ||
| "Nov", | ||
| "Dec", | ||
| ] as const; | ||
|
|
||
| export const formatDateToMonthYear = (dateString: string): string => { | ||
| // After splitting the year and month, convert them to numbers right away | ||
| const [year, month] = dateString.split("-").map(Number); | ||
| return `${MONTHS[month - 1]} ${year}`; | ||
| }; |