UI Components

components/Navbar/Navbar.module.css

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

components/Navbar/Navbar.tsx

@@ -0,0 +1,22 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Navbar.module.css";
+import { Logo } from "ui";
+interface Props {
+  className?: string;
+  children?: any;
+}
+
+const Navbar: FunctionComponent<Props> = ({ className }) => {
+  const rootClassName = cn(s.root, className);
+  return (
+    <div className={rootClassName}>
+      <Logo />
+      <div>SEARCH BAR</div>
+      <div>Menu list bar</div>
+      <div>Menu Icon bar</div>
+    </div>
+  );
+};
+
+export default Navbar;

components/index.ts

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

package-lock.json

@@ -4768,12 +4768,10 @@
       }
     },
     "postcss-nested": {
-      "version": "4.2.3",
+      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+      "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-5.0.0.tgz",
-      "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+      "integrity": "sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==",
-      "dev": true,
       "requires": {
-        "postcss": "^7.0.32",
         "postcss-selector-parser": "^6.0.2"
       }
     },
@@ -5983,6 +5981,16 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "postcss-nested": {
+          "version": "4.2.3",
+          "resolved": "https://registry.npmjs.org/postcss-nested/-/postcss-nested-4.2.3.tgz",
+          "integrity": "sha512-rOv0W1HquRCamWy2kFl3QazJMMe1ku6rCFoAAH+9AcxdbpDeBr6k968MLWuLjvjMcGEip01ak09hKOEgpK9hvw==",
+          "dev": true,
+          "requires": {
+            "postcss": "^7.0.32",
+            "postcss-selector-parser": "^6.0.2"
+          }
+        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -11,6 +11,7 @@
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6",
     "next": "^9.5.4-canary.20",
+    "postcss-nested": "^5.0.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "swr": "^0.3.3"
@@ -19,6 +20,7 @@
     "webpack": "^5.0.0-beta.30"
   },
   "devDependencies": {
+    "@types/node": "^14.11.2",
     "@types/react": "^16.9.49",
     "postcss-flexbugs-fixes": "^4.2.1",
     "postcss-preset-env": "^6.7.0",

pages/index.tsx

@@ -1,15 +1,17 @@
-import { Featurebar, Button } from "ui";
+import { Featurebar, Button, Container } from "ui";
+import { Navbar } from "components";
 
 export default function Home() {
   return (
-    <div>
+    <>
-      <main>
+      <Navbar />
-        <Featurebar
+      <Featurebar
-          title="Free Standard Shipping on orders over $99.99"
+        title="Free Standard Shipping on orders over $99.99"
-          description="Due to COVID-19, some orders may experience processing and delivery delays."
+        description="Due to COVID-19, some orders may experience processing and delivery delays."
-        />
+      />
+      <Container className="py-12 bg-black">
         <Button>Click Me!</Button>
-      </main>
+      </Container>
-    </div>
+    </>
   );
 }

ui/Button/Button.module.css

@@ -1,5 +1,5 @@
 .root {
-  @apply cursor-pointer font-bold inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 font-medium text-white bg-black transition ease-in-out duration-150 shadow-sm;
+  @apply cursor-pointer  inline-flex items-center px-8 py-2 rounded-sm border border-transparent text-base leading-6 text-white bg-black transition ease-in-out duration-150 shadow-sm font-medium;
 }
 
 .root:hover {

ui/Button/Button.tsx

@@ -26,7 +26,9 @@ export default class Button extends React.Component<Props> {
     let Component: React.ComponentType<
       React.ButtonHTMLAttributes<HTMLButtonElement | HTMLAnchorElement> &
         React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
-    > = "button" as any;
+    > = "a" as any;
+
+    // Catch for buttons / span / stc.
 
     const rootClassName = cn(
       s.root,

ui/Container/Container.module.css

@@ -0,0 +1,3 @@
+.root {
+  @apply max-w-6xl mx-auto;
+}

ui/Container/Container.tsx

@@ -0,0 +1,25 @@
+import cn from "classnames";
+import { FunctionComponent } from "react";
+import s from "./Container.module.css";
+
+interface Props {
+  className?: string;
+  children?: any;
+  el?: HTMLElement;
+}
+
+const Container: FunctionComponent<Props> = ({
+  children,
+  className,
+  el = "div",
+}) => {
+  const rootClassName = cn(s.root, className);
+
+  let Component: React.ComponentType<React.HTMLAttributes<
+    HTMLDivElement
+  >> = el as any;
+
+  return <Component className={rootClassName}>{children}</Component>;
+};
+
+export default Container;

ui/Container/index.ts

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

ui/Navbar/Navbar.tsx

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

ui/README.md

@@ -0,0 +1,3 @@
+# UI
+
+Building blocks to build a rich graphical interfaces. Components should be atomic and pure. Serve one purpuse.

ui/index.ts

@@ -1,2 +1,4 @@
 export { default as Button } from "./Button";
+export { default as Container } from "./Container";
 export { default as Featurebar } from "./Featurebar";
+export { default as Logo } from "./Logo";

yarn.lock

@@ -1101,6 +1101,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.1.tgz#56af902ad157e763f9ba63d671c39cda3193c835"
   integrity sha512-oTQgnd0hblfLsJ6BvJzzSL+Inogp3lq9fGgqRkMB/ziKMgEUaFl801OncOzUmalfzt14N0oPHMK47ipl+wbTIw==
 
+"@types/node@^14.11.2":
+  version "14.11.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.11.2.tgz#2de1ed6670439387da1c9f549a2ade2b0a799256"
+  integrity sha512-jiE3QIxJ8JLNcb1Ps6rDbysDhN4xa8DJJvuC9prr6w+1tIh+QAbYyNF3tyiZNLDBIuBCf4KEcV2UvQm/V60xfA==
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -3821,6 +3826,13 @@ postcss-nested@^4.1.1:
     postcss "^7.0.32"
     postcss-selector-parser "^6.0.2"
 
+postcss-nested@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-nested/-/postcss-nested-5.0.0.tgz#0d05bb93578ec42919bdbda7d4eb419d5f58fe07"
+  integrity sha512-jQVUwMOkDJPHyY1o3bxLErHnxIFsO3yDgdDsL/rjSkUHrWNdtNGhP50O0P+vUjEwPo+ekCRhLXTe8TziARoS0w==
+  dependencies:
+    postcss-selector-parser "^6.0.2"
+
 postcss-nesting@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-7.0.1.tgz#b50ad7b7f0173e5b5e3880c3501344703e04c052"