From 81f705158170e7bafcdd908ca1809872558714c9 Mon Sep 17 00:00:00 2001
From: kogeletey <kg@re128.org>
Date: Sat, 23 Nov 2024 22:41:16 +0300
Subject: [PATCH] feat: wrote search component

---
 src/components/Search.vue          | 51 ++++++++++++++++++++++++++++++
 src/icons/CarbonArrowRight.svg     |  1 +
 src/icons/CarbonRecentlyViewed.svg |  1 +
 src/layouts/Default.astro          |  1 -
 src/pages/index.astro              | 10 ++++++
 src/styles/app.css                 |  1 +
 6 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Search.vue
 create mode 100644 src/icons/CarbonArrowRight.svg
 create mode 100644 src/icons/CarbonRecentlyViewed.svg

diff --git a/src/components/Search.vue b/src/components/Search.vue
new file mode 100644
index 0000000..5b54bb6
--- /dev/null
+++ b/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>
diff --git a/src/icons/CarbonArrowRight.svg b/src/icons/CarbonArrowRight.svg
new file mode 100644
index 0000000..3470d13
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/icons/CarbonRecentlyViewed.svg b/src/icons/CarbonRecentlyViewed.svg
new file mode 100644
index 0000000..857310b
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index 5e2eb2c..90a8151 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -2,7 +2,6 @@
 import Base from "@/layouts/Base.astro"
 ---
 
-
 <Base>
     <slot />
 </Base>
diff --git a/src/pages/index.astro b/src/pages/index.astro
index 6d3d029..3e9e7b1 100644
--- a/src/pages/index.astro
+++ b/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>
diff --git a/src/styles/app.css b/src/styles/app.css
index 042c3f8..3b040be 100644
--- a/src/styles/app.css
+++ b/src/styles/app.css
@@ -2,6 +2,7 @@
 
 :root {
     --green: #22c55e;
+    --black: #171717;
     --darken: #1c1917;
     --neutral: #404040;
     --shadow: #262626;