Data/Season: Add create team button

src/lib/components/cards/TeamCard.svelte

@@ -38,7 +38,10 @@
     const meta = $modalStore[0].meta;
 
     team = meta.team;
+    require_inputs = meta.require_inputs;
     disable_inputs = meta.disable_inputs;
+    banner_template = meta.banner_template;
+    logo_template = meta.logo_template;
   }
 </script>
 

src/lib/components/form/Button.svelte

@@ -14,13 +14,13 @@
     children: Snippet;
 
     /** The main color variant, e.g. "primary" or "secondary". */
-    color?: string | undefined;
+    color?: string;
 
     /** Set the button type to "submit" (otherwise "button"). Only if "href" is undefined. */
     submit?: boolean;
 
     /** Make the button act as a link. */
-    href?: string | undefined;
+    href?: string;
 
     /** Add a width class to the button. */
     width?: string;

src/routes/data/season/+page.svelte

@@ -9,7 +9,7 @@
     type ModalStore,
   } from "@skeletonlabs/skeleton";
 
-  import { Table, type LazyDropdownOption, type TableColumn } from "$lib/components";
+  import { Button, Table, type LazyDropdownOption, type TableColumn } from "$lib/components";
   import { get_by_value } from "$lib/database";
   import {
     DRIVER_HEADSHOT_HEIGHT,
@@ -24,7 +24,6 @@
 
   let current_tab: number = $state(0);
   if (form?.tab) {
-    // console.log(`Form returned current_tab=${form.current_tab}`);
     current_tab = form.tab;
   }
 
@@ -128,6 +127,23 @@
     modalStore.trigger(modalSettings);
   };
 
+  const create_team_handler = (event: Event) => {
+    const modalSettings: ModalSettings = {
+      type: "component",
+      component: "teamCard",
+      meta: {
+        banner_template:
+          get_by_value(data.graphics, "name", "team_banner_template")?.file_url ?? "Invalid",
+        logo_template:
+          get_by_value(data.graphics, "name", "team_logo_template")?.file_url ?? "Invalid",
+        require_inputs: true,
+        disable_inputs: !data.admin,
+      },
+    };
+
+    modalStore.trigger(modalSettings);
+  };
+
   const drivers_columns: TableColumn[] = [
     {
       data_value_name: "code",
@@ -291,7 +307,11 @@
       <!-- Teams Tab -->
       <!-- Teams Tab -->
       <!-- Teams Tab -->
-      <!-- TODO: Add team -->
+      <div class="pb-2">
+        <Button width="w-full" color="surface" onclick={create_team_handler}>
+          <b>Create New Team</b>
+        </Button>
+      </div>
       <Table data={data.teams} columns={teams_columns} handler={teams_handler} />
     {:else if current_tab === 1}
       <!-- Drivers Tab -->