feat: create DriverCard component and update App to display driver data

src/App.css

@@ -0,0 +1,53 @@
+body {
+  background-color: #272745;
+  color: white;
+  font-family: "Titillium Web", sans-serif;
+}
+
+.driver-card {
+  background-color: #15151e;
+  border-radius: 30px;
+
+  color: white;
+  font-family: "Titillium Web", sans-serif;
+
+  height: 90px;
+  width: 500px;
+
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+
+  padding: 10px;
+  margin: 9px;
+}
+
+.driver-card img {
+  height: 90px;
+  border-radius: 25px;
+}
+
+.driver-card h1 {
+  font-size: 50px;
+}
+.driver-card h2 {
+  font-size: 22px;
+  font-weight: 400;
+}
+
+.standing-drivers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.standing-drivers {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  width: fit-content;
+}
+.header {
+  align-self: center;
+}

src/App.tsx

@@ -1,31 +1,39 @@
 import './App.css'
-import api,{ type Driver } from './api/api'
+import api, { type Driver } from './api/api'
 import { useEffect, useState } from "react";
 
+import DriverCard from './components/DriverCard'
+
 function App() {
   const { getAllDrivers } = api()
   const [drivers, setDrivers] = useState<Driver[]>([])
 
   useEffect(() => {
     async function loadDrivers() {
-        const allDrivers = await getAllDrivers()
-        setDrivers(allDrivers)
-        console.log(allDrivers)
+      const allDrivers = await getAllDrivers()
+      setDrivers(allDrivers)
+      console.log(allDrivers)
     }
     loadDrivers()
   }, [])
 
   return (
     <>
-      <h1>WEB</h1>
 
-      {drivers.map((driver) => (
-        <div key={driver.driver_number}>
-          <p>{driver.full_name}</p>
-          <img src={driver.headshot_url}></img>
-        </div>
 
-      ))}
+      <div className="standing-drivers">
+        <h1 className="header">F1 The Website</h1>
+        {drivers.map((driver) => (
+
+          <DriverCard key={driver.driver_number}
+            driver={{
+              name: driver.full_name,
+              number: driver.driver_number,
+              headshot_url: driver.headshot_url,
+              team_colour: driver.team_colour
+            }} />
+        ))}
+      </div>
 
     </>
   )

src/api/api.tsx

@@ -2,24 +2,24 @@
 export interface Driver {
     broadcast_name: string;
     driver_number: number;
-    first_name : string,
-    last_name : string,
+    first_name: string,
+    last_name: string,
     full_name: string;
     headshot_url: string;
     meeting_key: number;
-    name_acronym : string;
+    name_acronym: string;
     session_key: number;
     team_colour: string;
     team_name: string;
-    }
+}
 
-export default function api(){
+export default function api() {
     const API = "https://api.openf1.org/v1"
 
 
-    async function getAllDrivers(){
+    async function getAllDrivers() {
         const result = await fetch(`${API}/drivers?session_key=latest`);
-        if (!result.ok) { throw new Error("Failed to fetch drivers");}
+        if (!result.ok) { throw new Error("Failed to fetch drivers"); }
         const drivers: Driver[] = await result.json();
         return drivers
     }

src/components/DriverCard.tsx

@@ -0,0 +1,21 @@
+interface DriverProps {
+    name: string;
+    number: number;
+    headshot_url: string;
+    team_colour: string;
+
+}
+
+
+
+export default function DriverCard({ driver }: { driver: DriverProps }) {
+
+    return (
+        <div className="driver-card" style={{ border: `2px solid #${driver.team_colour}` }}>
+            <h1 style={{ color: `#${driver.team_colour}` }}>{driver.number}</h1>
+            <h2>{driver.name}</h2>
+            <img style={{ backgroundColor: `#${driver.team_colour}` }} src={driver.headshot_url ? driver.headshot_url : 'https://placehold.net/avatar.svg'} alt={driver.name} />
+        </div>
+    )
+}
+