Arch and components by functionality

components/core/Avatar/Avatar.module.css

@@ -0,0 +1,2 @@
+.root {
+}

components/core/Avatar/Avatar.tsx

@@ -0,0 +1,23 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Avatar.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Avatar: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <img
+        className="inline-block h-8 w-8 rounded-full"
+        src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
+        alt=""
+      ></img>
+    </div>
+  );
+};
+
+export default Avatar;

components/core/Avatar/index.ts

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

components/core/Featurebar/Featurebar.module.css

@@ -0,0 +1,21 @@
+.root {
+  @apply py-4 px-6 bg-black text-white flex flex-row justify-center items-center;
+}
+
+.title {
+  @apply text-white font-medium;
+}
+
+.separator {
+  @apply mx-3 bg-white;
+  width: 1px;
+  height: 20px;
+}
+
+.separator:before {
+  content: "";
+}
+
+.description {
+  @apply text-white font-medium;
+}

components/core/Featurebar/Featurebar.tsx

@@ -0,0 +1,26 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Featurebar.module.css";
+
+interface Props {
+  className?: string;
+  title: string;
+  description: string;
+}
+
+const Featurebar: FunctionComponent<Props> = ({
+  title,
+  description,
+  className,
+}) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <span className={s.title}>{title}</span>
+      <span className={s.separator} />
+      <span className={s.description}>{description}</span>
+    </div>
+  );
+};
+
+export default Featurebar;

components/core/Featurebar/index.ts

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

components/core/Footer/Footer.module.css

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

components/core/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 "@components/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/core/Footer/index.ts

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

components/core/Layout/Layout.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply h-full border-indigo-900;
+}

components/core/Layout/Layout.tsx

@@ -0,0 +1,26 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Layout.module.css";
+import { Navbar, Featurebar } from "@components/core";
+import { Container } from "@components/ui";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Layout: FunctionComponent<Props> = ({ className, children }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <Container className={rootClassName}>
+      <Featurebar
+        title="Free Standard Shipping on orders over $99.99"
+        description="Due to COVID-19, some orders may experience processing and delivery delays."
+      />
+      <Navbar />
+      <main className="h-screen">{children}</main>
+    </Container>
+  );
+};
+
+export default Layout;

components/core/Layout/index.ts

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

components/core/Navbar/Navbar.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply flex justify-between items-center flex-row px-6 h-20 relative;
+}

components/core/Navbar/Navbar.tsx

@@ -0,0 +1,31 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Navbar.module.css";
+import { Logo, Container } from "@components/ui";
+import { Avatar, Searchbar } from "@components/core";
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Navbar: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <Container className={rootClassName}>
+      <Logo />
+      <div className="flex flex-row h-full content-center flex-1">
+        <Searchbar />
+        <nav className="hidden flex-row items-center px-3 lg:flex">
+          <a className="pr-4">All</a>
+          <a className="pr-4">Clothes</a>
+          <a>Accesories</a>
+        </nav>
+      </div>
+      <nav>
+        <Avatar />
+      </nav>
+    </Container>
+  );
+};
+
+export default Navbar;

components/core/Navbar/index.ts

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

components/core/Searchbar/Searchbar.module.css

@@ -0,0 +1,24 @@
+.root {
+  @apply px-4 flex items-center;
+}
+
+.container {
+  @apply relative rounded-lg flex flex-row text-sm items-center bg-accent-1;
+}
+
+.input {
+  @apply bg-transparent px-3 py-2 appearance-none w-full transition duration-150 ease-in-out rounded-lg text-accent-1 placeholder-accent-4;
+  min-width: 300px;
+}
+
+.input:focus {
+  @apply outline-none shadow-outline-gray;
+}
+
+.iconContainer {
+  @apply absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none;
+}
+
+.icon {
+  @apply h-5 w-5;
+}

components/core/Searchbar/Searchbar.tsx

@@ -0,0 +1,32 @@
+import cn from "classnames";
+import React, { FunctionComponent } from "react";
+import s from "./Searchbar.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Searchbar: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <div className="flex-1 flex justify-between px-2">
+        <div className={s.container}>
+          <input className={s.input} placeholder="Search for products..." />
+          <div className={s.iconContainer}>
+            <svg className={s.icon} fill="currentColor" viewBox="0 0 20 20">
+              <path
+                fillRule="evenodd"
+                clipRule="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>
+      </div>
+    </div>
+  );
+};
+
+export default Searchbar;

components/core/Searchbar/index.ts

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

components/core/index.ts

@@ -0,0 +1,6 @@
+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 Layout } from "./Layout";
+export { default as Featurebar } from "./Featurebar";