feat: ✨ placeholder add contact form

src/lib/components/LabelInput.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+  import type { HTMLInputTypeAttribute } from "svelte/elements";
+
+  export let label: string;
+  export let id: string | undefined = undefined;
+  export let name: string;
+  export let type: HTMLInputTypeAttribute | undefined = undefined;
+  export let placeholder: string | undefined = undefined;
+</script>
+
+<label>
+  <span>{label}</span>
+  <input {id} {name} {type} {placeholder} />
+</label>
+
+<style lang="scss">
+  label {
+    display: block;
+    font-size: 14px;
+    margin: var(--input-margin, 0);
+
+    span {
+      display: block;
+      margin-bottom: 12px;
+    }
+  }
+
+  input {
+    all: unset;
+    font-size: 16px;
+    border-radius: 6px;
+    border: 1px solid var(--gray200);
+    padding: 8px 12px;
+    transition: border 250ms cubic-bezier(0.76, 0, 0.24, 1);
+    box-sizing: border-box;
+    cursor: text;
+    width: 100%;
+
+    // TODO: Check browser compatibility
+    &:hover:not(:disabled) {
+      border: 1px solid var(--gray300);
+    }
+
+    &:disabled {
+      cursor: not-allowed;
+    }
+  }
+</style>

src/routes/(nav)/[[selectedMember]]/+page.svelte

@@ -1,7 +1,9 @@
 <script lang="ts">
+  import Actions from "./Actions.svelte";
   import Table from "./Table.svelte";
 </script>
 
+<Actions />
 <main>
   <Table />
 </main>

src/routes/(nav)/[[selectedMember]]/Actions.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import AddContact from "./AddContact.svelte";
+  import BulkAddContact from "./BulkAddContact.svelte";
+</script>
+
+<div class="actions">
+  <BulkAddContact />
+  <AddContact />
+</div>
+
+<style lang="scss">
+  .actions {
+    display: flex;
+    justify-content: flex-end;
+    margin: 12px 16px;
+    gap: 12px;
+  }
+</style>

src/routes/(nav)/[[selectedMember]]/AddContact.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  import { melt } from "@melt-ui/svelte";
+  import { PlusCircle } from "lucide-svelte";
+  import type { EventHandler } from "svelte/elements";
+
+  import Dialog from "$lib/components/Dialog.svelte";
+  import LabelInput from "$lib/components/LabelInput.svelte";
+
+  const addContact: EventHandler<SubmitEvent, HTMLFormElement> = (e) => {
+    const formData = new FormData(e.currentTarget);
+    console.log(Object.fromEntries(formData.entries()));
+  };
+</script>
+
+<Dialog title="Add Contact">
+  <button let:trigger use:melt={trigger} slot="trigger">
+    <PlusCircle size={14} /><span>Add Contact</span>
+  </button>
+
+  <form on:submit|preventDefault={addContact} id="add-contact">
+    <LabelInput label="Company" name="company" placeholder="Company" />
+    <LabelInput label="Contact Name" name="contact-name" placeholder="Contact Name" />
+    <LabelInput label="Contact Email" name="contact-email" placeholder="Contact Email" />
+    <LabelInput label="Title" name="title" placeholder="Title" />
+    <LabelInput label="Status" name="status" placeholder="Status" />
+    <LabelInput label="Committee Member" name="committee-member" placeholder="Committee Member" />
+    <LabelInput
+      label="Last Contact Date"
+      name="last-contact-date"
+      placeholder="Last Contact Date"
+    />
+    <LabelInput label="Followup Date" name="followup-date" placeholder="Followup Date" />
+    <LabelInput label="Notes" name="notes" placeholder="Notes" />
+  </form>
+
+  <button slot="bottom" class="action" form="add-contact">
+    <PlusCircle size={14} /><span>Add Contact</span>
+  </button>
+</Dialog>
+
+<style lang="scss">
+  @use "$lib/styles/button" as button;
+
+  button {
+    @include button.button;
+  }
+
+  form {
+    --input-margin: 0 0 16px 0;
+    padding: 24px 16px;
+  }
+
+  .action {
+    margin-left: auto;
+  }
+</style>

src/routes/(nav)/[[selectedMember]]/BulkAddContact.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { PlusCircle } from "lucide-svelte";
+</script>
+
+<button disabled>
+  <PlusCircle size={14} /><span>Bulk Add Member</span>
+</button>
+
+<style lang="scss">
+  @use "$lib/styles/button" as button;
+
+  button {
+    @include button.button;
+  }
+</style>