chore(results): placeholder tables for Drivers and Constructors stand…

…ings Introduce faker lib for fake placeholder within new Table component. Additionally, appended some additional styling
Slick-Telemetry · Dec 30, 2023 · 8919315 · 8919315
1 parent 0063b6b
commit 8919315
Show file tree

Hide file tree

Showing 7 changed files with 133 additions and 15 deletions.
diff --git 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
diff --git a/src/app/components/Table.tsx 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 && <h2 className='text-xl'>{title}</h2>;
+
+  return (
+    <>
+      {Title}
+      <div className='overflow-x-auto'>
+        <table className='table'>
+          {/* head */}
+          <thead>
+            <tr>
+              {headings.map((header) => (
+                <th
+                  key={header}
+                  className='uppercase'
+                  suppressHydrationWarning={true}
+                >
+                  {header.replace('_', ' ')}
+                </th>
+              ))}
+              <th>{/* Placeholder for button */}</th>
+            </tr>
+          </thead>
+          {/* body */}
+          <tbody>
+            {data.length > 0 &&
+              data.map((row, i) => (
+                <Fragment key={title + '-' + i}>
+                  <tr
+                  // fontWeight={700}
+                  // bgGradient={`linear(to-r, #ffffff, #${row.color})`}
+                  >
+                    {headings.map(
+                      (key) =>
+                        row && (
+                          <td key={key} suppressHydrationWarning={true}>
+                            {row[key]}
+                          </td>
+                        ),
+                    )}
+                    <th>
+                      <button className='btn btn-ghost btn-xs'>details</button>
+                    </th>
+                  </tr>
+                </Fragment>
+              ))}
+          </tbody>
+        </table>
+      </div>
+    </>
+  );
+};
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -19,7 +19,9 @@ export default function RootLayout({
     <html lang='en'>
       <body className={inter.className}>
         <div className='navbar bg-base-100'>
-          <a className='btn btn-ghost text-xl'>Slick Telemetry</a>
+          <div className='container mx-auto'>
+            <a className='btn btn-ghost text-xl'>Slick Telemetry</a>
+          </div>
         </div>
         {children}
       </body>

diff --git a/src/app/results/RaceResults.tsx b/src/app/results/RaceResults.tsx
@@ -23,7 +23,7 @@ const TopThree = () => (
     {TopThreeDummy.map((driver) => (
       <div
         key={driver.name}
-        className='grid grid-cols-2 items-center border-b border-black bg-slate-200 px-4 py-2'
+        className='grid grid-cols-2 items-center border-b border-black bg-base-300 px-4 py-2'
       >
         <div className='flex flex-col'>
           <p>{driver.name}</p>
@@ -37,11 +37,16 @@ const TopThree = () => (
 
 const ResultCard = () => (
   <div className='card overflow-hidden bg-base-100 shadow-xl'>
-    <div className='relative flex min-h-32 items-end border-b p-4 '>
+    <div className='relative flex min-h-32 items-end p-4 '>
       <figure className='absolute inset-0 z-0 bg-gradient-to-tr from-base-100'>
         <Image
+          width={928}
+          height={548}
           className='w-full mix-blend-overlay'
-          src='https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
+          loader={() =>
+            'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
+          }
+          src='/shoe.jpg'
           alt='Shoes'
         />
       </figure>
@@ -67,15 +72,20 @@ const ResultCard = () => (
 );
 
 const WinterTesting = () => (
-  <div className='relative flex min-h-32 items-center overflow-hidden rounded p-4'>
+  <div className='card relative  min-h-32 justify-center overflow-hidden rounded-2xl p-4'>
     <figure className='absolute inset-0 z-0 flex items-center justify-end bg-gradient-to-r from-base-100'>
       <Image
+        width={928}
+        height={548}
         className='w-full mix-blend-overlay'
-        src='https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
+        loader={() =>
+          'https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg'
+        }
+        src='/shoe.jpg'
         alt='Shoes'
       />
     </figure>
-    <div className='relative z-0 flex gap-4'>
+    <div className='relative z-0 flex items-center gap-4'>
       <div>
         <h3>Winter Testing</h3>
         <p>Sakhir, Bahrain</p>
@@ -90,7 +100,7 @@ const WinterTesting = () => (
 export const RaceResults = () => (
   <>
     <WinterTesting />
-    <div className='mt-4 grid grid-cols-2 gap-4'>
+    <div className='mt-4 grid gap-4 md:grid-cols-2 2xl:grid-cols-3'>
       {/* 10 Placeholder Cards */}
       {Array.from(Array(10).keys()).map((item) => (
         <ResultCard key={item} />

diff --git a/src/app/results/layout.tsx b/src/app/results/layout.tsx
@@ -37,7 +37,7 @@ const ResultsNav = () => {
   ];
 
   return (
-    <div className='navbar rounded-box bg-base-300'>
+    <div className='container navbar mx-auto my-4 rounded-box bg-base-300'>
       <h2 className='p-2 text-lg font-bold'>Results:</h2>
       <Dropdown value={seasons[0]} items={seasons} action={() => {}} />
       <Dropdown value={dummyRaces[0]} items={dummyRaces} action={() => {}} />

diff --git 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 = [
   <RaceResults key='Race Results' />,
   <div key='Drivers Championship' className='rounded bg-base-100 p-4'>
-    Tab 2
+    <Table
+      headings={Table1Headings}
+      data={[
+        ...Array(20).fill(
+          Table1Headings.reduce(
+            (obj, value) => ({ ...obj, [value]: faker.lorem.word() }),
+            {},
+          ),
+        ),
+      ]}
+    />
   </div>,
   <div key='Constructors Championship' className='rounded bg-base-100 p-4'>
-    Tab 3
+    <Table
+      headings={Table2Headings}
+      data={[
+        ...Array(10).fill(
+          Table2Headings.reduce(
+            (obj, value) => ({ ...obj, [value]: faker.lorem.word() }),
+            {},
+          ),
+        ),
+      ]}
+    />
+    ,
   </div>,
 ];
 const tabView = atom<number>(0);