Data/Official: Display starting grid data

src/routes/data/official/+layout.svelte

@@ -16,6 +16,7 @@
   >
     <Button href="driverstandings" color="primary" activate_href>Drivers</Button>
     <Button href="teamstandings" color="primary" activate_href>Teams</Button>
+    <Button href="startinggrids" color="primary" activate_href>Grids</Button>
     <Button href="raceresults" color="primary" activate_href>Race Results</Button>
   </div>
 </div>

src/routes/data/official/startinggrids/+page.svelte

@@ -0,0 +1,49 @@
+<script lang="ts">
+  import { Table, type TableColumn } from "$lib/components";
+  import type { PageData } from "./$types";
+  import { get_by_value } from "$lib/database";
+  import type { Race } from "$lib/schema";
+
+  let { data }: { data: PageData } = $props();
+
+  const grids_columns: TableColumn[] = $derived([
+    {
+      data_value_name: "race_step",
+      label: "Race",
+      valuefun: async (value: string): Promise<string> => {
+        const racename: string = get_by_value(await data.races, "step", value)?.name ?? "Invalid";
+        return `<span class='badge variant-filled-surface'>${racename}</span>`;
+      },
+    },
+    {
+      data_value_name: "race_step",
+      label: "Step",
+    },
+    {
+      data_value_name: "driver_code",
+      label: "Driver",
+      valuefun: async (value: string): Promise<string> =>
+        `<span class='badge variant-filled-surface'>${value}</span>`,
+    },
+    {
+      data_value_name: "position",
+      label: "Position",
+    },
+    {
+      data_value_name: "time",
+      label: "Time",
+    },
+  ]);
+</script>
+
+<svelte:head>
+  <title>Formula 11 - Official Starting Grids</title>
+</svelte:head>
+
+{#await data.scraped_startinggrids then grids}
+  <Table
+    data={grids}
+    columns={grids_columns}
+    height="h-[calc(100vh-260px)] lg:h-[calc(100vh-180px)]"
+  />
+{/await}

src/routes/data/official/startinggrids/+page.ts

@@ -0,0 +1,12 @@
+import { fetch_drivers, fetch_races, fetch_scraped_startinggrids } from "$lib/fetch";
+import type { PageLoad } from "../../../$types";
+
+export const load: PageLoad = async ({ fetch, depends }) => {
+  depends("data:scraped_startinggrids", "data:races", "data:drivers");
+
+  return {
+    scraped_startinggrids: fetch_scraped_startinggrids(fetch),
+    races: fetch_races(fetch),
+    drivers: fetch_drivers(fetch),
+  };
+};