From dca97063c971af875792e9b005ee7da3bc6a3251 Mon Sep 17 00:00:00 2001
From: Belen Curcio <curciobelen@gmail.com>
Date: Thu, 24 Sep 2020 10:47:42 -0300
Subject: [PATCH] new

---
 components/Avatar/Avatar.tsx              |  2 +-
 components/Footer/Footer.module.css       |  7 +++++
 components/Footer/Footer.tsx              | 20 +++++++++++++
 components/Footer/index.ts                |  1 +
 components/Navbar/Navbar.module.css       |  4 +--
 components/Navbar/Navbar.tsx              |  8 ++++--
 components/Searchbar/Searchbar.module.css |  2 +-
 components/Searchbar/Searchbar.tsx        | 35 +++++------------------
 components/index.ts                       |  3 +-
 pages/index.tsx                           |  5 ++--
 10 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 components/Footer/Footer.module.css
 create mode 100644 components/Footer/Footer.tsx
 create mode 100644 components/Footer/index.ts

diff --git a/components/Avatar/Avatar.tsx b/components/Avatar/Avatar.tsx
index edd140ffe..8e7e57c5d 100644
--- a/components/Avatar/Avatar.tsx
+++ b/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>
diff --git a/components/Footer/Footer.module.css b/components/Footer/Footer.module.css
new file mode 100644
index 000000000..b52dd6497
--- /dev/null
+++ b/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;
+}
diff --git a/components/Footer/Footer.tsx b/components/Footer/Footer.tsx
new file mode 100644
index 000000000..6dc6a59cc
--- /dev/null
+++ b/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;
diff --git a/components/Footer/index.ts b/components/Footer/index.ts
new file mode 100644
index 000000000..3738288b0
--- /dev/null
+++ b/components/Footer/index.ts
@@ -0,0 +1 @@
+export { default } from "./Footer";
diff --git a/components/Navbar/Navbar.module.css b/components/Navbar/Navbar.module.css
index 15275affc..9bded590c 100644
--- a/components/Navbar/Navbar.module.css
+++ b/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;
 }
diff --git a/components/Navbar/Navbar.tsx b/components/Navbar/Navbar.tsx
index 2ce486e7d..faa2b884a 100644
--- a/components/Navbar/Navbar.tsx
+++ b/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>
diff --git a/components/Searchbar/Searchbar.module.css b/components/Searchbar/Searchbar.module.css
index 30d6bca27..f37317886 100644
--- a/components/Searchbar/Searchbar.module.css
+++ b/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;
 }
diff --git a/components/Searchbar/Searchbar.tsx b/components/Searchbar/Searchbar.tsx
index d007c73e5..56ee90ed2 100644
--- a/components/Searchbar/Searchbar.tsx
+++ b/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>
   );
diff --git a/components/index.ts b/components/index.ts
index cca98b4b8..7a3a2194e 100644
--- a/components/index.ts
+++ b/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";
diff --git a/pages/index.tsx b/pages/index.tsx
index 22174f791..c83a477d3 100644
--- a/pages/index.tsx
+++ b/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>
     </>
   );
 }