From 397b59eb697fea5cc4740cc1bb785af0287f9ea5 Mon Sep 17 00:00:00 2001
From: Claire Olmstead <olmsteadclaire@gmail.com>
Date: Mon, 2 Dec 2024 13:32:49 -0800
Subject: [PATCH] update all props

---
 src/components/ConnectProvider.svelte |  9 +++++++--
 src/components/DropDownMenu.svelte    | 26 +++++++++++++++++++-------
 src/components/Modal.svelte           | 10 +++++++---
 src/components/NavItem.svelte         | 14 +++++++++-----
 4 files changed, 42 insertions(+), 17 deletions(-)

diff --git a/src/components/ConnectProvider.svelte b/src/components/ConnectProvider.svelte
index 3665b929..a89ade39 100644
--- a/src/components/ConnectProvider.svelte
+++ b/src/components/ConnectProvider.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
   import Modal from '../components/Modal.svelte';
   import LoginForm from './LoginForm.svelte';
-  export let close = () => {};
-  export let isOpen: boolean = false;
+
+  interface Props {
+    close: () => {};
+    isOpen: boolean;
+  }
+
+  let { close, isOpen = false }: Props = $props();
 </script>
 
 <Modal id="connect-provider" {close} {isOpen}>
diff --git a/src/components/DropDownMenu.svelte b/src/components/DropDownMenu.svelte
index ce7c991d..2bcc3cd5 100644
--- a/src/components/DropDownMenu.svelte
+++ b/src/components/DropDownMenu.svelte
@@ -1,11 +1,23 @@
 <script lang="ts" generics="T extends { toString: () => string }">
-  export let label: string;
-  export let id: string = '';
-  export let options: T[]; // eslint-disable-line no-undef
-  export let value: T | null = null; // eslint-disable-line no-undef
-  export let placeholder: string = '';
-  export let onChange: (() => void) | undefined = undefined;
-  export let formatter: (value: T) => string = (value) => value.toString(); // eslint-disable-line no-undef
+  interface Props {
+    label: string;
+    id: string;
+    options: T[];
+    value: T | null;
+    placeholder: string;
+    onChange: (() => void) | undefined;
+    formatter: (value: T) => string;
+  }
+
+  let {
+    label,
+    id = '',
+    options,
+    value = null,
+    placeholder = '',
+    onChange = undefined,
+    formatter = (value) => value.toString(),
+  }: Props = $props();
 </script>
 
 <div>
diff --git a/src/components/Modal.svelte b/src/components/Modal.svelte
index 701bb28d..3312e0fd 100644
--- a/src/components/Modal.svelte
+++ b/src/components/Modal.svelte
@@ -1,7 +1,11 @@
 <script lang="ts">
-  export let id: string;
-  export let close = () => {};
-  export let isOpen: boolean = false;
+  interface Props {
+		id: string;
+    close: () => {};
+    isOpen: boolean
+	}
+
+	let { id, close, isOpen = false }: Props = $props();
 </script>
 
 {#if isOpen}
diff --git a/src/components/NavItem.svelte b/src/components/NavItem.svelte
index 02c467bc..635365f5 100644
--- a/src/components/NavItem.svelte
+++ b/src/components/NavItem.svelte
@@ -1,9 +1,13 @@
 <script lang="ts">
-  export let href: string = '';
-  export let isActive: boolean = false;
-  export let onClick: () => void = () => {};
-  export let id: string = '';
-  export let target: string = '';
+  interface Props {
+    href: string;
+    isActive: boolean;
+    onClick: () => void;
+    id: string;
+    target: string;
+  }
+
+  let { href = '', isActive = false, onClick = () => {}, id = '', target = '' }: Props = $props();
 </script>
 
 <a