diff --git a/package.json b/package.json index 9db0880..d3f4c91 100644 --- a/package.json +++ b/package.json @@ -31,6 +31,7 @@ "devDependencies": { "@commitlint/cli": "latest", "@commitlint/config-conventional": "latest", + "@faker-js/faker": "^8.3.1", "@release-it/conventional-changelog": "latest", "@types/node": "latest", "@types/react": "latest", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 5c83cd9..2b25e6e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -31,6 +31,9 @@ devDependencies: '@commitlint/config-conventional': specifier: latest version: 18.4.3 + '@faker-js/faker': + specifier: ^8.3.1 + version: 8.3.1 '@release-it/conventional-changelog': specifier: latest version: 8.0.1(release-it@17.0.1) @@ -344,6 +347,11 @@ packages: engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0} dev: true + /@faker-js/faker@8.3.1: + resolution: {integrity: sha512-FdgpFxY6V6rLZE9mmIBb9hM0xpfvQOSNOLnzolzKwsE1DH+gC7lEKV1p1IbR0lAYyvYd5a4u3qWJzowUkw1bIw==} + engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0, npm: '>=6.14.13'} + dev: true + /@humanwhocodes/config-array@0.11.13: resolution: {integrity: sha512-JSBDMiDKSzQVngfRjOdFXgFfklaXI4K9nLF49Auh21lmBWRLIK3+xTErTWD4KU54pb6coM6ESE7Awz/FNU3zgQ==} engines: {node: '>=10.10.0'} diff --git a/src/app/components/Table.tsx b/src/app/components/Table.tsx new file mode 100644 index 0000000..ebaedd9 --- /dev/null +++ b/src/app/components/Table.tsx @@ -0,0 +1,64 @@ +'use client'; + +import { Fragment } from 'react'; + +interface ITable { + title?: string; + headings: string[]; + data: { [key: string]: React.ReactNode }[]; +} + +export const Table = ({ title, headings, data }: ITable) => { + if (data.length <= 0 && headings.length <= 0) return; + + const Title = title &&

{title}

; + + return ( + <> + {Title} +
+ + {/* head */} + + + {headings.map((header) => ( + + ))} + + + + {/* body */} + + {data.length > 0 && + data.map((row, i) => ( + + + {headings.map( + (key) => + row && ( + + ), + )} + + + + ))} + +
+ {header.replace('_', ' ')} + {/* Placeholder for button */}
+ {row[key]} + + +
+
+ + ); +}; diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 11c1323..2b897e0 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -19,7 +19,9 @@ export default function RootLayout({
- Slick Telemetry +
+ Slick Telemetry +
{children} diff --git a/src/app/results/RaceResults.tsx b/src/app/results/RaceResults.tsx index f1b134e..c16d41b 100644 --- a/src/app/results/RaceResults.tsx +++ b/src/app/results/RaceResults.tsx @@ -23,7 +23,7 @@ const TopThree = () => ( {TopThreeDummy.map((driver) => (

{driver.name}

@@ -37,11 +37,16 @@ const TopThree = () => ( const ResultCard = () => (
-
+
+ 'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' + } + src='/shoe.jpg' alt='Shoes' />
@@ -67,15 +72,20 @@ const ResultCard = () => ( ); const WinterTesting = () => ( -
+
+ 'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg' + } + src='/shoe.jpg' alt='Shoes' />
-
+

Winter Testing

Sakhir, Bahrain

@@ -90,7 +100,7 @@ const WinterTesting = () => ( export const RaceResults = () => ( <> -
+
{/* 10 Placeholder Cards */} {Array.from(Array(10).keys()).map((item) => ( diff --git a/src/app/results/layout.tsx b/src/app/results/layout.tsx index d8823e6..96dba2d 100644 --- a/src/app/results/layout.tsx +++ b/src/app/results/layout.tsx @@ -37,7 +37,7 @@ const ResultsNav = () => { ]; return ( -
+

Results:

{}} /> {}} /> diff --git a/src/app/results/page.tsx b/src/app/results/page.tsx index 7a561a8..d9f7bbf 100644 --- a/src/app/results/page.tsx +++ b/src/app/results/page.tsx @@ -1,22 +1,55 @@ 'use client'; +import { faker } from '@faker-js/faker'; import { clsx } from 'clsx'; import { atom, useAtom } from 'jotai'; import { RaceResults } from './RaceResults'; +import { Table } from '../components/Table'; -const tabHeaders = [ - 'Race Results', - 'Drivers Championship', - 'Constructors Championship', +const tabHeaders = ['Races', 'Drivers', 'Constructors']; + +const Table1Headings = [ + faker.database.column(), + faker.database.column(), + faker.database.column(), + faker.database.column(), +]; +const Table2Headings = [ + faker.database.column(), + faker.database.column(), + faker.database.column(), + faker.database.column(), ]; + const tabs = [ ,
- Tab 2 + ({ ...obj, [value]: faker.lorem.word() }), + {}, + ), + ), + ]} + /> ,
- Tab 3 +
({ ...obj, [value]: faker.lorem.word() }), + {}, + ), + ), + ]} + /> + , , ]; const tabView = atom(0);