- {/* 10 Placeholder Cards */}
- {Array.from(Array(10).keys()).map((item) => (
-
- ))}
+// Loading animation
+const shimmer =
+ 'before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/60 before:to-transparent';
+
+//
+//
+//
+//
+const WinterTestingSkeleton = () => (
+
);
+
+export const RaceResults = () => {
+ return (
+
+
+
+
+ {/* 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 96dba2d..b905a02 100644
--- a/src/app/results/layout.tsx
+++ b/src/app/results/layout.tsx
@@ -1,7 +1,7 @@
'use client';
-import { f1Seasons } from './utils';
-import { Dropdown } from '../components/Dropdown';
+import { f1Seasons } from '../lib/utils';
+import { Dropdown } from '../ui/Dropdown';
// Default Next Layout
export default function ResultsLayout({
@@ -17,27 +17,27 @@ export default function ResultsLayout({
);
}
-const ResultsNav = () => {
- const seasons = f1Seasons();
- const dummyRaces = [
- 'All Races',
- 'Bahrain',
- 'Mexico',
- 'Monaco',
- 'Imola',
- 'Spain',
- ];
- const dummyDrivers = [
- 'All Drivers',
- 'Drive 1',
- 'Drive 2',
- 'Drive 3',
- 'Drive 4',
- 'Drive 5',
- ];
+const seasons = f1Seasons();
+const dummyRaces = [
+ 'All Races',
+ 'Bahrain',
+ 'Mexico',
+ 'Monaco',
+ 'Imola',
+ 'Spain',
+];
+const dummyDrivers = [
+ 'All Drivers',
+ 'Drive 1',
+ 'Drive 2',
+ 'Drive 3',
+ 'Drive 4',
+ 'Drive 5',
+];
+const ResultsNav = () => {
return (
-
+
Results:
{}} />
{}} />
diff --git a/src/app/results/page.tsx b/src/app/results/page.tsx
index 6185d5b..ef5f2c4 100644
--- a/src/app/results/page.tsx
+++ b/src/app/results/page.tsx
@@ -1,128 +1,31 @@
'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';
+import {
+ constructorsData,
+ ConstuctorHeadings,
+ driverData,
+ DriverHeadings,
+} from '../lib/placerholder-results';
+import { Table } from '../ui/Table';
+import { Tabs } from '../ui/Tabs';
const tabHeaders = ['Races', 'Drivers', 'Constructors'];
-
-const DriverHeadings = [
- 'Position',
- 'Driver',
- 'Constructor',
- 'Points',
- // Race Starts
- // Race Finishes
- // Podiums
-];
-const ConstuctorHeadings = [
- 'Position',
- 'Constructor',
- 'Points',
- 'Drivers',
- // Best Result
- // DNFs
-];
-
-const formatDriver = (key: string, i: number) => {
- switch (key) {
- case 'Position':
- return i + 1;
- case 'Driver':
- case 'Constructor':
- return faker.lorem.word();
- case 'Points':
- return faker.number.int(26);
- }
-};
-const formatConstructor = (key: string, i: number) => {
- switch (key) {
- case 'Position':
- return i + 1;
- case 'Constructor':
- return faker.lorem.word();
- case 'Points':
- return faker.number.int(51);
- case 'Drivers':
- return (
- <>
- {faker.lorem.word()} - {faker.number.int(26)}, {faker.lorem.word()} -{' '}
- {faker.number.int(26)}
- >
- );
- }
-};
-
const tabs = [
,
-
- DriverHeadings.reduce(
- (obj, value) => ({ ...obj, [value]: formatDriver(value, index) }),
- {},
- ),
- )}
- />
+
,
-
- ConstuctorHeadings.reduce(
- (obj, value) => ({
- ...obj,
- [value]: formatConstructor(value, index),
- }),
- {},
- ),
- )}
- />
- ,
+ ,
,
];
-const tabView = atom(0);
-export default function Page() {
- // Testing Jotai & Atoms
- const [tabIndex, setTabIndex] = useAtom(tabView);
-
- // Active tab has matching tabIndex
- const TabButtons = tabHeaders.map((header, i) => (
- setTabIndex(i)}
- >
- {header}
-
- ));
-
- // Hide containers not matching tabIndex
- const TabContainers = tabs.map((tab, i) => (
-
- {tab}
-
- ));
+export default function Page() {
return (
-
-
- {TabButtons}
-
- {TabContainers}
-
+
);
}
diff --git a/src/app/results/utils.tsx b/src/app/results/utils.tsx
deleted file mode 100644
index faf70ea..0000000
--- a/src/app/results/utils.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * @description
- * Get all possible seasons/years with results
- * @return {*} {string[]}
- */
-export const f1Seasons = (): string[] => {
- // Discuss : Bump to fetch call to get data
- // ! Alter to be dynamic
- const testingDate = new Date('02/22/2024');
-
- const currDate = new Date();
- let currYear = currDate.getFullYear();
-
- // Compare curr date to testing date (Feb 22 2024)
- // If same year as testing and before testing date
- // Get previous year
- if (
- testingDate.getFullYear() === currYear &&
- currDate.getTime() < testingDate.getTime()
- ) {
- currYear -= 1;
- }
-
- // Fill array with values between range
- return Array.from({ length: currYear - 1950 + 1 }, (_v, index) =>
- (currYear - index).toString(),
- );
-};
diff --git a/src/app/components/Dropdown.tsx b/src/app/ui/Dropdown.tsx
similarity index 100%
rename from src/app/components/Dropdown.tsx
rename to src/app/ui/Dropdown.tsx
diff --git a/src/app/ui/Nav.tsx b/src/app/ui/Nav.tsx
new file mode 100644
index 0000000..ee4756f
--- /dev/null
+++ b/src/app/ui/Nav.tsx
@@ -0,0 +1,67 @@
+export const Nav = () => (
+
+
+
+
+
+
+
+
+
+ 53 days until Winter Testing
+
+
+
+
+
+);
diff --git a/src/app/components/Table.tsx b/src/app/ui/Table.tsx
similarity index 100%
rename from src/app/components/Table.tsx
rename to src/app/ui/Table.tsx
diff --git a/src/app/ui/Tabs.tsx b/src/app/ui/Tabs.tsx
new file mode 100644
index 0000000..0463850
--- /dev/null
+++ b/src/app/ui/Tabs.tsx
@@ -0,0 +1,47 @@
+import clsx from 'clsx';
+import { atom, useAtom } from 'jotai';
+
+const tabView = atom(0);
+
+interface ITabs {
+ headers: string[];
+ containers: React.ReactNode[];
+}
+
+export const Tabs = ({ headers, containers }: ITabs) => {
+ // Testing Jotai & Atoms
+ const [tabIndex, setTabIndex] = useAtom(tabView);
+
+ // Active tab has matching tabIndex
+ const TabButtons = headers.map((header, i) => (
+ setTabIndex(i)}
+ >
+ {header}
+
+ ));
+
+ // Hide containers not matching tabIndex
+ const TabContainers = containers.map((tab, i) => (
+
+ {tab}
+
+ ));
+
+ return (
+
+
+ {TabButtons}
+
+ {TabContainers}
+
+ );
+};
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 3dd0ac8..5cdef42 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -16,7 +16,15 @@ const config: Config = {
'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
},
},
+ keyframes: {
+ shimmer: {
+ '100%': {
+ transform: 'translateX(100%)',
+ },
+ },
+ },
},
+
plugins: [require('daisyui')],
};
export default config;