From 8af65a6c305910a68988bb52aa38af73f7b5a4af Mon Sep 17 00:00:00 2001
From: Jake Hamilton <jake.hamilton@hey.com>
Date: Thu, 24 Oct 2024 14:19:28 -0700
Subject: [PATCH] refactor(header): extract nav link component, add search
 widget stub, recolor header

---
 src/lib/components/Nav.svelte     | 12 ++++++++++++
 src/lib/components/NavLink.svelte | 10 ++++++++++
 src/lib/components/Search.svelte  |  7 +++++++
 src/routes/+layout.svelte         |  8 ++++----
 src/routes/Nav.svelte             | 17 -----------------
 5 files changed, 33 insertions(+), 21 deletions(-)
 create mode 100644 src/lib/components/Nav.svelte
 create mode 100644 src/lib/components/NavLink.svelte
 create mode 100644 src/lib/components/Search.svelte
 delete mode 100644 src/routes/Nav.svelte

diff --git a/src/lib/components/Nav.svelte b/src/lib/components/Nav.svelte
new file mode 100644
index 0000000..35599d5
--- /dev/null
+++ b/src/lib/components/Nav.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+	import NavLink from "./NavLink.svelte";
+	import Search from "./Search.svelte";
+</script>
+
+<div
+	class="max-md:hidden flex gap-x-4 h-full items-center grow"
+>
+	<Search />
+	<NavLink href="/docs/intro">Docs</NavLink>
+	<NavLink href="https://fleurixos.org" class="text-coral-600">Try {DISTRO}</NavLink>
+</div>
diff --git a/src/lib/components/NavLink.svelte b/src/lib/components/NavLink.svelte
new file mode 100644
index 0000000..2886a68
--- /dev/null
+++ b/src/lib/components/NavLink.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+	let props = $props()
+</script>
+
+<a
+	{...props}
+	class="{props.class ?? ""} no-link-style hover:underline"
+>
+	{@render props.children?.()}
+</a>
diff --git a/src/lib/components/Search.svelte b/src/lib/components/Search.svelte
new file mode 100644
index 0000000..7e0ac06
--- /dev/null
+++ b/src/lib/components/Search.svelte
@@ -0,0 +1,7 @@
+<div class="flex grow justify-end pl-4">
+	<input
+		type="text"
+		placeholder="Search..."
+		class="rounded-md bg-zinc-100 px-4 py-[6px] text-md/10 grow-0 focus:grow transition-all hover:ring-1 hover:ring-zinc-500 focus:outline-none focus:ring-2 focus:ring-coral-200 placeholder:text-zinc-500"
+	/>
+</div>
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 7cadc62..b753a9a 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -2,7 +2,7 @@
 	import { page } from "$app/stores";
 	import "../main.css";
 	import Footer from "./Footer.svelte";
-	import Nav from "./Nav.svelte";
+	import Nav from "$lib/components/Nav.svelte";
 
 	let { children } = $props();
 	globalThis.PKGS = "petalpkgs";
@@ -17,11 +17,11 @@
     <meta name="theme-color" content="#136951">
 </svelte:head>
 
-<div class="flex flex-col text-blue-950 underline-offset-[4px]">
-	<nav class="min-h-16 h-16 bg-teal-700 text-coral-50 mb-2">
+<div class="flex flex-col underline-offset-[4px]">
+	<nav class="min-h-16 h-16 bg-zinc-50 mb-2">
 		<div class="mx-auto container flex h-full justify-between">
 			<a class="flex h-full items-center justify-center font-aladin text-3xl/10
-					  text-coral-50 hover:text-coral-100 no-link-style gap-x-2"
+					  text-zinc-800 no-link-style gap-x-2 hover:bg-clip-text hover:bg-gradient-to-r hover:from-coral-400 hover:from-10% hover:to-coral-300 hover:text-transparent"
 			   href="/">
 				<enhanced:img src="$lib/assets/flower.svg" width="32" height="32" alt="flower" />
 				floral.systems
diff --git a/src/routes/Nav.svelte b/src/routes/Nav.svelte
deleted file mode 100644
index 05c5364..0000000
--- a/src/routes/Nav.svelte
+++ /dev/null
@@ -1,17 +0,0 @@
-{#snippet link(to, title)}
-	<a
-		href={to}
-		class="no-link-style
-    		   py-1 px-2 h-min bg-coral-100 rounded-md border-b-2 border-r-2 border-coral-200 text-blue-950 hover:bg-coral-200"
-		>{title}</a
-	>
-{/snippet}
-
-<div class="max-md:hidden text-lg flex gap-2 h-full items-center">
-	{@render link("/docs/intro", "intro")}
-	{@render link("/colors", "colors")}
-	<!--
-		{@render link("https://fleurixos.org", `Try ${DISTRO}`)}
-		{@render link("https://petalpkgs.org", `Use ${PKGS}`)}
-	-->
-</div>