new

components/Avatar/Avatar.tsx

@@ -12,7 +12,7 @@ const Avatar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <img
-        className="inline-block h-12 w-12 rounded-full"
+        className="inline-block h-8 w-8 rounded-full"
         src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
         alt=""
       ></img>

components/Footer/Footer.module.css

@@ -0,0 +1,7 @@
+.root {
+  @apply border-black border-t;
+}
+
+.container {
+  @apply flex justify-between items-center flex-row px-4 py-5 border-black border-l border-r;
+}

components/Footer/Footer.tsx

@@ -0,0 +1,20 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Footer.module.css";
+import { Container } from "ui";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Footer: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <footer className={rootClassName}>
+      <Container className={s.container}></Container>
+    </footer>
+  );
+};
+
+export default Footer;

components/Footer/index.ts

@@ -0,0 +1 @@
+export { default } from "./Footer";

components/Navbar/Navbar.module.css

@@ -1,7 +1,7 @@
 .root {
-  @apply px-4 py-5;
+  @apply border-black border-b;
 }
 
 .container {
-  @apply flex justify-between items-center flex-row;
+  @apply flex justify-between items-center flex-row px-4 border-black border-l border-r h-20;
 }

components/Navbar/Navbar.tsx

@@ -13,9 +13,13 @@ const Navbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <Container className={s.container}>
+        <div className="flex flex-row h-full content-center">
+          <Searchbar />
+          <nav className="flex flex-row items-center px-3">
+            All Clothes Accesories
+          </nav>
+        </div>
         <Logo />
-        <Searchbar />
-        <nav>All Clothes Accesories</nav>
         <nav>
           <Avatar />
         </nav>

components/Searchbar/Searchbar.module.css

@@ -1,3 +1,3 @@
 .root {
-  @apply px-4;
+  @apply px-4 border-black border-r h-full flex items-center;
 }

components/Searchbar/Searchbar.tsx

@@ -12,34 +12,13 @@ const Searchbar: FunctionComponent<Props> = ({ className }) => {
   return (
     <div className={rootClassName}>
       <div className="flex-1 flex justify-between px-2">
-        <div className="flex-1 flex">
-          <form className="w-full flex md:mr-0" action="#">
-            <label htmlFor="search_field" className="sr-only">
-              Search
-            </label>
-            <div className="relative w-full text-gray-600 focus-within:text-gray-600">
-              <input
-                id="search_field"
-                className="block w-full h-full pr-12 pl-3 py-2 rounded-md  bg-gray-200 text-gray-900 placeholder-gray-600 focus:outline-none focus:placeholder-gray-400 sm:text-sm"
-                placeholder="Search"
-                type="search"
-              />
-              <div className="absolute inset-y-0 right-0 mr-3 flex items-center pointer-events-none">
-                <svg
-                  className="h-5 w-5"
-                  fill="currentColor"
-                  viewBox="0 0 20 20"
-                >
-                  <path
-                    fill-rule="evenodd"
-                    clip-rule="evenodd"
-                    d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
-                  />
-                </svg>
-              </div>
-            </div>
-          </form>
-        </div>
+        <svg className="h-5 w-5" fill="currentColor" viewBox="0 0 20 20">
+          <path
+            fill-rule="evenodd"
+            clip-rule="evenodd"
+            d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
+          />
+        </svg>
       </div>
     </div>
   );

components/index.ts

@@ -1,3 +1,4 @@
+export { default as Avatar } from "./Avatar";
+export { default as Footer } from "./Footer";
 export { default as Navbar } from "./Navbar";
 export { default as Searchbar } from "./Searchbar";
-export { default as Avatar } from "./Avatar";

pages/index.tsx

@@ -1,5 +1,5 @@
 import { Featurebar, Button, Container } from "ui";
-import { Navbar } from "components";
+import { Navbar, Footer } from "components";
 
 export default function Home() {
   return (
@@ -9,9 +9,10 @@ export default function Home() {
         description="Due to COVID-19, some orders may experience processing and delivery delays."
       />
       <Navbar />
-      <Container className="py-12">
+      <Container className="px-4 py-5 border-black border-l border-r h-screen">
         <Button>Click Me!</Button>
       </Container>
+      <Footer></Footer>
     </>
   );
 }