feat: Jumbotron & SimpleAddressBar

src/components/Jumbotron.astro

@@ -0,0 +1,15 @@
+---
+---
+
+<div><h1>Cozy</h1></div>
+
+<style>
+  div {
+    text-align: center;
+    padding: 1em;
+    h1 {
+      text-transform: uppercase;
+      font-size: 5em;
+    }
+  }
+</style>

src/components/SimpleAddressBar.astro

@@ -0,0 +1,93 @@
+---
+import Icon from "astro-iconify";
+import SettingsPopover from "./SettingsPopover.astro";
+
+export interface Props {
+  url: string | null;
+}
+
+const placeholder = "Type the article URL here";
+const { url } = Astro.props;
+---
+
+<div class="address-bar">
+  <form>
+    <input
+      type="url"
+      id="app-url"
+      name="url"
+      value={url ?? ""}
+      placeholder={placeholder}
+      required
+    />
+  </form>
+  <SettingsPopover toggle="settings-toggle" />
+</div>
+
+<style lang="scss">
+  .address-bar {
+    width: 100%;
+    position: relative;
+  }
+
+  form {
+    width: 100%;
+    border: 0px;
+    padding: 0.5rem;
+    text-align: center;
+    border-radius: 30px;
+    border: 1px solid rgb(var(--gray));
+    background-color: #f5f5f5;
+    box-shadow: 0 1px 3px 1px #eee;
+    display: flex;
+
+    input[type="url"] {
+      flex: 3;
+      background-color: white;
+      border-radius: 30px;
+      border: 1px solid #eee;
+      font-size: normal;
+      padding: 0.5rem;
+      color: #555;
+    }
+
+    #app-back,
+    #app-settings {
+      display: none;
+    }
+
+    .btn {
+      display: block;
+      border: 0px;
+      height: 100%;
+      vertical-align: middle;
+      background-color: transparent;
+      padding: 0.5rem 0;
+      color: black;
+
+      svg {
+        border: 0px;
+        background-color: transparent;
+        width: 24px;
+        height: 24px;
+        cursor: pointer;
+      }
+    }
+
+    .left-buttons {
+      margin-right: 0.5rem;
+    }
+    .right-buttons {
+      margin-left: 0.5rem;
+    }
+
+    .btn svg:hover {
+      color: blue !important;
+    }
+
+    .btn[disabled="true"] svg {
+      color: #ccc !important;
+      cursor: default !important;
+    }
+  }
+</style>

src/pages/index.astro

@@ -1,11 +1,12 @@
 ---
 import Serialize from "@ayco/astro-resume";
 import { ArticleData, extract } from "@extractus/article-extractor";
-import AddressBar from "../components/AddressBar.astro";
+import SimpleAddressBar from "../components/SimpleAddressBar.astro";
 import Post from "../components/Post.astro";
 import Layout from "../layouts/Layout.astro";
 import Library from "../components/Library.astro";
 import Footer from "../components/Footer.astro";
+import Jumbotron from "../components/Jumbotron.astro";
 
 export const prerender = false;
 
@@ -30,7 +31,8 @@ if (url)
 
 ---
 <Layout article={article}>
-    <AddressBar url={url} />
+    <Jumbotron />
+    <SimpleAddressBar url={url} />
     <div slot="post" id={appConfig.routerOutlet}>
       <Post article={article} />
     </div>
@@ -38,4 +40,4 @@ if (url)
     <Footer slot="footer" />
 </Layout>
 
-<Serialize id="app-config" data={appConfig} />
+<Serialize id="app-config" data={appConfig} />