feat: wrote search component

This commit is contained in:
Konrad Geletey 2024-11-23 22:41:16 +03:00
parent 3adfe995d2
commit 81f7051581
Signed by: kglt
GPG key ID: 386DEE24B60BD996
6 changed files with 64 additions and 1 deletions

51
src/components/Search.vue Normal file
View file

@ -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>

View file

@ -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>

After

Width:  |  Height:  |  Size: 182 B

View file

@ -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>

After

Width:  |  Height:  |  Size: 269 B

View file

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

View file

@ -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>

View file

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