UI Components

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/Navbar/index.ts

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