#38 layout for tea cli banner

- additional cleanup

packages/gui/src/components/BigBlackSpace/BigBlackSpace.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
 </script>
 
-<Placeholder label="BigBlackSpace" />
+<section class="h-56 border border-gray bg-black" />

packages/gui/src/components/CliBanner/CliBanner.svelte

@@ -1,6 +1,27 @@
 <script lang="ts">
 	import '$appcss';
-	import Placeholder from '$components/Placeholder/Placeholder.svelte';
+	import Button from '@tea/ui/Button/Button.svelte';
+	let copyButtonText = 'COPY';
+	const copyValue = `sh <(curl https://tea.xyz)`;
+
+	const onCopy = () => {
+		copyButtonText = 'COPIED!';
+		navigator.clipboard.writeText(copyValue);
+	};
 </script>
 
-<Placeholder label="CLI Hero" />
+<section class="mt-4 border border-gray bg-black">
+	<header class="flex flex-col items-center py-8">
+		<figure>
+			<img alt="tea" src="/images/tea-icon.png" class="rounded-md" />
+		</figure>
+		<p class="text-primary">tea.cli ver. 0.6.0</p>
+	</header>
+	<footer class="flex h-20 border-t border-gray text-white">
+		<input class="flex-grow bg-black pl-4" disabled value="sh <(curl tea.xyz)>" />
+		<Button class="w-16 border-0 border-l-2 text-sm" onClick={onCopy}>{copyButtonText}</Button>
+		<Button class="w-56 border-0 border-l-2 text-sm" onClick={() => console.log('cli')}
+			>OPEN IN TERMINAL</Button
+		>
+	</footer>
+</section>

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

@@ -79,7 +79,7 @@
 		</a>
 	</nav>
 
-	<SearchInput size="small" {onSearch} />
+	<SearchInput class="border border-gray py-4" size="small" {onSearch} />
 
 	{#each routes as route}
 		<li class={route.active ? 'nav_button active' : 'nav_button'}>

packages/gui/src/libs/api/tauri.ts

@@ -92,12 +92,15 @@ async function installPackageCommand(full_name: string) {
 		const teaInstallCommand = new Command('tea-install', [`+${full_name}`, 'true']);
 		teaInstallCommand.on('error', reject);
 
-		const handleLineOutput = async (line: string | any) => {
+		const handleLineOutput = async (line: string | { code: number }) => {
 			const c = await child;
-			if (line?.code === 0 || line.includes('installed:')) {
+			if (
+				(typeof line === 'string' && line.includes('installed:')) ||
+				(typeof line !== 'string' && line?.code === 0)
+			) {
 				c.kill();
 				resolve(c.pid);
-			} else if (line?.code === 1) {
+			} else if (typeof line !== 'string' && line?.code === 1) {
 				reject();
 			}
 		};

packages/gui/src/routes/+layout.svelte

@@ -12,13 +12,13 @@
 </script>
 
 <div id="main-layout">
-	<nav class="">
+	<nav class="border border-t-0 border-l-0 border-b-0 border-gray">
 		<NavBar />
 	</nav>
 	<section class="px-16 pt-24">
 		{#if backLink}
-			<header>
+			<header class="px-16 py-2 text-3xl text-gray hover:text-primary">
-				<a href={backLink}>back</a>
+				<a href={backLink}>&#8592</a>
 			</header>
 		{/if}
 		<figure />

packages/ui/src/SearchInput/SearchInput.svelte

@@ -1,6 +1,8 @@
 <script type="ts">
 	import '../app.css';
 
+	let clazz = '';
+	export { clazz as class };
 	export let size: 'small' | 'medium' | 'large' = 'small';
 	export let onSearch: (text: string) => void;
 
@@ -14,7 +16,7 @@
 	};
 </script>
 
-<section class={`flex items-center py-2 ${size}`}>
+<section class={`flex items-center py-2 ${size} ${clazz}`}>
 	<div class="icon pl-4">
 		<i class="icon-search-icon" />
 	</div>