8 add favorites functionality

src/App.css

@@ -124,3 +124,18 @@ body {
   padding: 0.5rem;
   margin-bottom: 0.5rem;
 }
+
+.favorite-button {
+  color: orange;
+  background-color: #15151e;
+  padding: 0.5rem 1rem;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  border: none;
+  font-size: 1.7rem;
+}
+.favorite-button:hover {
+  color: white;
+}
+
+

src/App.tsx

@@ -15,6 +15,25 @@ const sessionDate = new Intl.DateTimeFormat("en-GB", {
 type SortOrder = "none" | "asc" | "desc";
 
 function App() {
+  const [favorites, setFavorites] = useState<number[]>(() =>
+    JSON.parse(localStorage.getItem("favorites") ?? "[]"),
+  );
+  const [showFavorites, setShowFavorites] = useState(false);
+
+  useEffect(() => {
+    localStorage.setItem("favorites", JSON.stringify(favorites));
+  }, [favorites]);
+
+  function toggleFavorite(driverNumber: number) {
+    setFavorites((current) => {
+      if (current.includes(driverNumber)) {
+        return current.filter((number) => number !== driverNumber);
+      }
+
+      return [...current, driverNumber];
+    });
+  }
+
   const [search, setSearch] = useState(
     () => sessionStorage.getItem("search") ?? "",
   );
@@ -101,7 +120,9 @@ function App() {
         .toLowerCase()
         .includes(search.toLowerCase());
       const matchesTeam = team === "all" || driver.team_name === team;
-      return matchesSearch && matchesTeam;
+      const matchesFavorites =
+        !showFavorites || favorites.includes(driver.driver_number);
+      return matchesSearch && matchesTeam && matchesFavorites;
     })
     .sort((a, b) => {
       if (sortOrder === "asc") {
@@ -145,6 +166,8 @@ function App() {
   return (
     <>
       <SearchAndFilter
+        showFavorites={showFavorites}
+        onShowFavoritesChange={setShowFavorites}
         search={search}
         onSearchChange={setSearch}
         team={team}
@@ -162,10 +185,12 @@ function App() {
           : driversWithStandingsError
             ? "Could not load drivers."
             : filteredDrivers.length === 0
-              ? "No drivers match your search and team filter."
+              ? "No drivers match your filters."
               : filteredDrivers.map((driver) => (
                   <DriverCard
                     key={driver.driver_number}
+                    isFavorite={favorites.includes(driver.driver_number)}
+                    onToggleFavorite={() => toggleFavorite(driver.driver_number)}
                     teamStanding={teamStandings.find(
                       (team) => team.team_name === driver.team_name,
                     )}

src/components/DriverCard.tsx

@@ -16,12 +16,30 @@ interface DriverCardProps {
     teamStanding?: TeamStandings;
     teamStandingsPending: boolean;
     teamStandingsError: boolean;
+    isFavorite: boolean;
+    onToggleFavorite: () => void;
 }
 
-export default function DriverCard({ driver, teamStanding, teamStandingsPending, teamStandingsError }: DriverCardProps) {
+export default function DriverCard({
+    driver,
+    teamStanding,
+    teamStandingsPending,
+    teamStandingsError,
+    isFavorite,
+    onToggleFavorite,
+}: DriverCardProps) {
 
     return (
         <div className="driver-card" style={{ border: `2px solid #${driver.team_colour}` }}>
+            <button
+                className="favorite-button"
+                type="button"
+                onClick={onToggleFavorite}
+                aria-label={`Favorite ${driver.name}`}
+                aria-pressed={isFavorite}
+            >
+                {isFavorite ? "★" : "☆"}
+            </button>
             <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} />
@@ -31,8 +49,8 @@ export default function DriverCard({ driver, teamStanding, teamStandingsPending,
                 Team points: {teamStandingsPending
                     ? 'Loading...'
                     : teamStandingsError
-                    ? 'Could not load points'
-                    : teamStanding?.points_current ?? 'Unavailable'}
+                        ? 'Could not load points'
+                        : teamStanding?.points_current ?? 'Unavailable'}
             </p>
         </div>
     )

src/components/SearchAndFilter.tsx

@@ -1,4 +1,6 @@
 interface SearchAndFilterProps {
+  showFavorites: boolean;
+  onShowFavoritesChange: (value: boolean) => void;
   search: string;
   onSearchChange: (value: string) => void;
   team: string;
@@ -9,6 +11,8 @@ interface SearchAndFilterProps {
 }
 
 function SearchAndFilter({
+  showFavorites,
+  onShowFavoritesChange,
   search,
   onSearchChange,
   team,
@@ -43,6 +47,14 @@ function SearchAndFilter({
         <option value="desc">Position: High to Low</option>
         <option value="asc">Position: Low to High</option>
       </select>
+
+      <button
+        type="button"
+        onClick={() => onShowFavoritesChange(!showFavorites)}
+        aria-pressed={showFavorites}
+      >
+        Favorites
+      </button>
     </div>
   );
 }