#32 make SearchInput reusable component

packages/gui/src-tauri/tauri.conf.json

@@ -102,7 +102,7 @@
 				"height": 600,
 				"resizable": true,
 				"title": "gui",
-				"width": 800,
+				"width": 1024,
 				"decorations": false
 			}
 		]

packages/gui/src/components/NavBar/NavBar.svelte

@@ -2,6 +2,7 @@
 	import { page } from '$app/stores';
 	import { open } from '@tauri-apps/api/shell';
 	import { appWindow } from '@tauri-apps/api/window';
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
 
 	import { beforeUpdate } from 'svelte';
 
@@ -73,11 +74,7 @@
 		</a>
 	</nav>
 
-	<input
+	<SearchInput size="small" />
-		class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
-		type="search"
-		placeholder="search"
-	/>
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>

packages/gui/src/components/SearchPackages/SearchPackages.svelte

@@ -5,7 +5,7 @@
 
 	import type { Package } from '@tea/ui/types';
 	import PackageCard from '@tea/ui/PackageCard/PackageCard.svelte';
-
+	import SearchInput from '@tea/ui/SearchInput/SearchInput.svelte';
 	import { onMount } from 'svelte';
 
 	let packages: Package[] = [];
@@ -23,11 +23,15 @@
 </script>
 
 <div class="bg-black border border-gray">
-	<section class="flex">
+	<section class="flex justify-between items-center">
-		<h2>Filter Packages</h2>
+		<div>
-		<input type="search" class="text-white bg-black border border-gray" />
+			<SearchInput size="medium" />
+		</div>
+		<div class="pr-4">
+			<section class="h-12 w-48 border border-gray" />
+		</div>
 	</section>
-	<ul class="grid grid-cols-3 mt-8">
+	<ul class="grid grid-cols-3">
 		{#each packages as pkg}
 			<PackageCard {pkg} link={`/packages/${pkg.full_name}`} />
 		{/each}

packages/ui/src/PackageCard/PackageCard.svelte

@@ -23,7 +23,7 @@
 			{/if}
 		</article>
 	</figure>
-	<footer class="flex mt-4 justify-between">
+	<footer class="flex mt-4 justify-between items-center">
 		<div>
 			<p>
 				<span>V&NonBreakingSpace;{pkg.version}</span>
@@ -33,6 +33,7 @@
         <span class="package-install-no">>{{- .installs -}}&nbsp;installs</span> -->
 			</p>
 		</div>
+		<!-- TODO: move this button into its own reusable component -->
 		<a href={link}>
 			<button class="detail-btn"><i class="icon-enter-arrow" />details</button>
 		</a>
@@ -101,7 +102,7 @@
 		padding-top: 0.279vw;
 		text-decoration: none;
 		text-transform: uppercase;
-		width: 134px;
+		width: 100px;
 		height: 2.232vw;
 		min-height: 34px;
 		transition: 0.1s linear;

packages/ui/src/SearchInput/SearchInput.css

@@ -0,0 +1 @@
+@import '../app.css';

packages/ui/src/SearchInput/SearchInput.stories.ts

@@ -0,0 +1,31 @@
+import SearchInput from './SearchInput.svelte';
+
+export default {
+	title: 'Example/SearchInput',
+	component: SearchInput,
+	// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
+	tags: [],
+	render: (args) => ({
+		Component: SearchInput,
+		props: args
+	}),
+	parameters: {
+		// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
+		// layout: 'fullscreen'
+	},
+	argTypes: {
+		// onLogin: { action: 'onLogin' },
+		// onLogout: { action: 'onLogout' },
+		// onCreateAccount: { action: 'onCreateAccount' }
+	}
+};
+
+export const Small = {
+	args: {
+		user: {
+			name: 'Jane Doe'
+		}
+	}
+};
+
+export const Big = {};

packages/ui/src/SearchInput/SearchInput.svelte

@@ -0,0 +1,62 @@
+<script type="ts">
+	import './SearchInput.css';
+
+	export let size: 'small' | 'medium' | 'large' = 'small';
+</script>
+
+<section class={`flex items-center ${size}`}>
+	<div class="icon">
+		<i class="icon-search-icon" />
+	</div>
+	<input type="search" placeholder="search_" />
+</section>
+
+<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
+<style>
+	.icon-search-icon {
+		font-size: 30px;
+		color: #949494;
+		margin-right: 20px;
+		position: relative;
+		top: 2px;
+	}
+
+	section {
+		padding: 0px;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+	section.medium {
+		height: 75px;
+	}
+	section.large {
+		height: 150px;
+	}
+
+	section input {
+		font-family: 'pp-neue-machina', sans-serif;
+		color: #00ffd0;
+		text-transform: uppercase;
+		margin-bottom: -5px;
+		min-width: 60%;
+		padding: 0px;
+		background-color: #1a1a1a !important;
+		border: none;
+		color: #00ffd0;
+		outline: none;
+		border-radius: 0px;
+	}
+
+	section.medium input {
+		font-size: 24px;
+	}
+	section.large input {
+		font-size: 32px;
+	}
+	section input::placeholder {
+		/* Chrome, Firefox, Opera, Safari 10.1+ */
+		color: #949494;
+		opacity: 1; /* Firefox */
+	}
+</style>