src/components/Search.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+</script>
+
+<template>
+    <fieldset class="search">
+        <div class="search__context">
+            <span class="search__context-title"> context: </span>
+            <span class="search__context-item"> global </span>
+        </div>
+        <input type="search" />
+    </fieldset>
+</template>
+
+<style>
+fieldset.search {
+    border: 1px solid var(--accent);
+    background: var(--darken);
+    min-width: 50%;
+    display: grid;
+    align-items: center;
+    grid-template-columns: 0.22fr 0.7fr;
+    outline: none;
+}
+
+fieldset.search input {
+    border: 0;
+    outline: 0;
+    padding: 10px 10px;
+    color: var(--primary);
+    background: none;
+}
+
+fieldset.search .search__context {
+  display: inline-grid;
+  align-items: center;
+  background: var(--black);
+  margin: 10px;
+  padding: 10px 0;
+  padding-left: 0.625rem;
+  & .search__context-title {
+    color: var(--accent);
+  }
+  & .search__context-item {
+      color: var(--primary);
+  }
+}
+
+input:focus-visible, fieldset:focus-visible {
+    outline: 0;
+}
+</style>

src/icons/CarbonArrowRight.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10z"/></svg>

src/icons/CarbonRecentlyViewed.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32"><path fill="currentColor" d="M20.59 22L15 16.41V7h2v8.58l5 5.01z"/><path fill="currentColor" d="M16 2A13.94 13.94 0 0 0 6 6.23V2H4v8h8V8H7.08A12 12 0 1 1 4 16H2A14 14 0 1 0 16 2"/></svg>

src/layouts/Default.astro

@@ -2,7 +2,6 @@
 import Base from "@/layouts/Base.astro"
 ---
 
-
 <Base>
     <slot />
 </Base>

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import Default from "@/layouts/Default.astro"
 import Button from "@/components/Button.vue"
+import Input from "@/components/Input.vue"
 ---
 
 <Default>
@@ -9,6 +10,7 @@ import Button from "@/components/Button.vue"
        <Button class="sign" />
     </header>
     <main>
+        <Input />
     </main>
 </Default>
 
@@ -30,4 +32,12 @@ span.rate {
 button.sign {
     margin-right: 15px;
 }
+
+main {
+    display: grid;
+    align-content: center;
+    justify-items: center;
+    align-items: center;
+    min-height: 100vh;
+}
 </style>

src/styles/app.css

@@ -2,6 +2,7 @@
 
 :root {
     --green: #22c55e;
+    --black: #171717;
     --darken: #1c1917;
     --neutral: #404040;
     --shadow: #262626;