create nav external links and add provider rewards link (#235)

## Goal

The goal of this PR is to create nav external links component and add
provider rewards link to that.

Closes #214 

## Discussion

- added external links component
- added new link
- styled

## Demo

Logged in and displaying hover state on Provider Rewards (mouse was not
captured in screen grab):
<img width="969" alt="Screenshot 2025-05-01 at 4 40 36 PM"
src="https://github.com/user-attachments/assets/51b62c01-086a-49b4-b8cb-763cc5fa10d9"
/>

Logged out state:
<img width="985" alt="Screenshot 2025-05-01 at 4 39 37 PM"
src="https://github.com/user-attachments/assets/daf7fc87-324e-437c-ba2f-960d747fd89e"
/>

Author: claireclark1

src/components/features/Nav/Nav.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { logout } from '$lib/stores';
   import { isLoggedIn } from '$lib/stores';
+  import NavExternalLinks from './NavExternalLinks.svelte';
   import NavItem from './NavItem.svelte';
 
   let url = $state();
@@ -15,8 +16,8 @@
   };
 </script>
 
-<div class="min-w-f80 bg-navy fixed flex h-full flex-col items-center justify-center text-white md:w-[128px]">
-  <div class="flex w-[100%] flex-col">
+<div class="min-w-f80 bg-navy fixed flex h-full flex-col items-center justify-between text-white md:w-[128px]">
+  <div class="flex w-[100%] flex-col pt-[127px]">
     <NavItem href="/" isActive={url === '/' || url === '/become-a-provider'} onClick={() => (url = '/')}>Home</NavItem>
     {#if $isLoggedIn === true}
       <NavItem href="/activity-log" isActive={url === '/activity-log'} onClick={() => (url = '/activity-log')}
@@ -25,10 +26,11 @@
     {/if}
     <NavItem href="/faq" isActive={url === '/faq'} onClick={() => (url = '/faq')}>FAQ's</NavItem>
     {#if $isLoggedIn === true}
-      <NavItem href="https://faucet.testnet.frequency.xyz/" target="_blank">Testnet Faucet</NavItem>
       <NavItem id="logout-button" href="/" onClick={handleLogout}>Logout</NavItem>
     {:else}
       <NavItem />
     {/if}
   </div>
+
+  <NavExternalLinks />
 </div>

src/components/features/Nav/NavExternalLinks.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  import NavItem from './NavItem.svelte';
+</script>
+
+{#snippet navItem(label: string, link: string)}
+  <NavItem class="py-f8 h-auto" href={link} target="_blank">{label}</NavItem>
+{/snippet}
+
+<div class="pb-f20 pt-f8 border-t">
+  {@render navItem('Provider Rewards', 'https://rewards.frequency.xyz/providers/')}
+  {@render navItem('Testnet Faucet', 'https://faucet.testnet.frequency.xyz/')}
+</div>

src/components/features/Nav/NavItem.svelte

@@ -1,5 +1,7 @@
 <script lang="ts">
-  interface Props {
+  import type { HTMLAttributes } from 'svelte/elements';
+
+  interface Props extends HTMLAttributes<HTMLAnchorElement> {
     href?: string;
     isActive?: boolean;
     onClick?: () => void;
@@ -8,16 +10,16 @@
     children?: import('svelte').Snippet;
   }
 
-  let { href = '', isActive = false, onClick = () => {}, id = '', target = '', children }: Props = $props();
+  let { href = '', isActive = false, onClick = () => {}, id = '', target = '', children, ...rest }: Props = $props();
 </script>
 
 <a
   {id}
   {href}
   onclick={onClick}
-  class={` flex h-[100px] items-center justify-center text-sm font-bold ${
+  class={`hover:text-teal flex h-[100px] items-center justify-center text-sm font-bold ${
     isActive && 'text-teal shadow-blue-border shadow-teal bg-white'
-  }`}
+  } ${rest.class}`}
   {target}
 >
   {@render children?.()}