From e7f6c217195e78c26887a57b8c7dce526346be4a Mon Sep 17 00:00:00 2001
From: neil <neil@neils-MacBook-Pro.local>
Date: Wed, 21 Dec 2022 15:58:37 +0800
Subject: [PATCH] #36 show results in popup

---
 .../SearchResults/SearchResults.svelte        | 48 +++++++++++++++++++
 modules/gui/src/routes/+layout.svelte         |  2 +
 2 files changed, 50 insertions(+)
 create mode 100644 modules/gui/src/components/SearchResults/SearchResults.svelte

diff --git a/modules/gui/src/components/SearchResults/SearchResults.svelte b/modules/gui/src/components/SearchResults/SearchResults.svelte
new file mode 100644
index 0000000..128c2d8
--- /dev/null
+++ b/modules/gui/src/components/SearchResults/SearchResults.svelte
@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { searchStore } from '$libs/stores';
+	import PanelHeader from '@tea/ui/PanelHeader/PanelHeader.svelte';
+	let term: string;
+	searchStore.subscribe((v) => (term = v));
+</script>
+
+<section class={term ? 'show' : ''}>
+	<div class="border border-gray bg-black">
+		<header class="p-4 text-2xl text-primary">
+			Showing search results for `{term}`
+		</header>
+		<menu class="flex h-8 w-full gap-4 bg-accent px-4 text-xs">
+			<button>packages (33)</button>
+			<button>articles (33)</button>
+			<button>workshops (33)</button>
+		</menu>
+	</div>
+</section>
+
+<style>
+	section {
+		position: fixed;
+		top: 0;
+		left: 240px;
+		right: 0;
+		background: rgba(0, 0, 0, 0.7);
+		transition: opacity 0.3s ease-in-out;
+		padding: 36px;
+		opacity: 0%;
+		overflow: hidden;
+		height: 0px;
+	}
+
+	section.show {
+		opacity: 100%;
+		height: 100%;
+	}
+
+	section > div {
+		height: 0%;
+		transition: height 0.6s ease-in-out;
+	}
+
+	section.show > div {
+		height: 90%;
+	}
+</style>
diff --git a/modules/gui/src/routes/+layout.svelte b/modules/gui/src/routes/+layout.svelte
index 9ebd22d..0afed1e 100644
--- a/modules/gui/src/routes/+layout.svelte
+++ b/modules/gui/src/routes/+layout.svelte
@@ -6,6 +6,7 @@
 	import FooterLinks from '$components/FooterLinks/FooterLinks.svelte';
 
 	import { backLink as backLinkStore } from '$libs/stores';
+	import SearchResults from '$components/SearchResults/SearchResults.svelte';
 
 	let view: HTMLElement;
 
@@ -36,6 +37,7 @@
 		<footer class="mt-8 w-full border border-r-0 border-gray bg-black">
 			<FooterLinks />
 		</footer>
+		<SearchResults />
 	</section>
 </div>