feat: layout main page

src/components/Footer.astro

@@ -0,0 +1,39 @@
+---
+import CarbonArrowRight from "@/icons/CarbonArrowUpRight.vue"
+const commit = "d9ea5cf7d6"
+---
+
+<footer>
+    <div class="commit">
+        build commit: <a href={`/${commit}`}> { commit } <CarbonArrowRight class="icon" /> </a>
+    </div>
+</footer>
+
+<style>
+footer {
+        display: grid;
+        grid-auto-flow: column;
+        justify-self: end;
+        margin-bottom: 2rem;
+        font-size: 14px;
+        color: var(--primary);
+}
+
+footer div.commit {
+    display: flex;
+    justify-self: end;
+    margin-right: 3rem;
+    gap: 5px;
+    a {
+        display: inline-flex;
+        align-items: center;
+        gap: 5px;
+        text-decoration: underline;
+        text-underline-offset: 5px;
+    }
+    & .icon {
+        width: 1.1rem;
+        height: 1.1rem;
+    }
+}
+<style>

src/components/Search.vue

@@ -1,4 +1,6 @@
 <script setup lang="ts">
+    import CarbonArrowRight from '@/icons/CarbonArrowRight.vue'
+    import CarbonRecentlyView from '@/icons/CarbonRecentlyViewed.vue'
 </script>
 
 <template>
@@ -8,17 +10,21 @@
             <span class="search__context-item"> global </span>
         </div>
         <input type="search" />
+        <div class="search__buttons">
+            <CarbonRecentlyView class="icon" />
+            <CarbonArrowRight class="icon" />
+        </div>
     </fieldset>
 </template>
 
-<style>
+<style scoped>
 fieldset.search {
     border: 1px solid var(--accent);
     background: var(--darken);
     min-width: 50%;
     display: grid;
+    grid-template-columns: 0.2fr 0.5fr 0.3fr;
     align-items: center;
-    grid-template-columns: 0.22fr 0.7fr;
     outline: none;
 }
 
@@ -33,6 +39,8 @@ fieldset.search input {
 fieldset.search .search__context {
   display: inline-grid;
   align-items: center;
+  grid-auto-flow: column;
+  justify-self: start;
   background: var(--black);
   margin: 10px;
   padding: 10px 0;
@@ -48,4 +56,18 @@ fieldset.search .search__context {
 input:focus-visible, fieldset:focus-visible {
     outline: 0;
 }
+
+fieldset.search .search__buttons {
+ display: grid;
+ grid-auto-flow: column;
+ justify-self: end;
+ gap: 15px;
+ margin-right: 15px;
+ & svg.icon {
+    width: 1.3rem;
+    height: 1.3rem;
+    justify-self: end;
+    color: var(--primary);
+ }
+}
 </style>

src/icons/CarbonArrowRight.svg

@@ -1 +0,0 @@
-<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/CarbonArrowRight.vue

@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" 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>
+</template>

src/icons/CarbonArrowUpRight.vue

@@ -0,0 +1,3 @@
+<template>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="currentColor" d="M10 6v2h12.59L6 24.59L7.41 26L24 9.41V22h2V6z"/></svg>
+</template>

src/icons/CarbonRecentlyViewed.svg

@@ -1 +0,0 @@
-<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/icons/CarbonRecentlyViewed.vue

@@ -0,0 +1,3 @@
+<template>
+    <svg xmlns="http://www.w3.org/2000/svg" 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>
+</template>

src/pages/index.astro

@@ -1,17 +1,19 @@
 ---
 import Default from "@/layouts/Default.astro"
 import Button from "@/components/Button.vue"
-import Input from "@/components/Input.vue"
+import Search from "@/components/Search.vue"
+import Footer from "@/components/Footer.astro"
 ---
 
 <Default>
     <header>
-       <span class="rate"> 0 / 1000 RQT </span>
+       <span class="rate"> 0 / 5000 RQT </span>
        <Button class="sign" />
     </header>
     <main>
-        <Input />
+        <Search />
     </main>
+    <Footer />
 </Default>
 
 <style>
@@ -35,9 +37,7 @@ button.sign {
 
 main {
     display: grid;
-    align-content: center;
-    justify-items: center;
-    align-items: center;
-    min-height: 100vh;
+    place-items: center;
+    min-height: calc(100vh - 55px - 2.5rem);
 }
 </style>

src/styles/app.css

@@ -14,5 +14,4 @@
 body {
   font-family: 'JetBrains Mono Variable', monospace;
   background: var(--secondary);
-  min-height: 100vh;
 }