Arch and components by functionality

components/ui/Button/Button.module.css

@@ -0,0 +1,15 @@
+.root {
+  @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 {
+  @apply bg-white text-black border-black;
+}
+
+.root:focus {
+  @apply border-gray-700 shadow-outline;
+}
+
+.root:active {
+  @apply bg-gray-700;
+}

components/ui/Button/Button.tsx

@@ -0,0 +1,54 @@
+import cn from "classnames";
+import React, { ButtonHTMLAttributes } from "react";
+import s from "./Button.module.css";
+
+interface Props extends ButtonHTMLAttributes<HTMLButtonElement> {
+  href?: string;
+  className?: string;
+  variant?: "filled" | "outlined" | "flat" | "none";
+  active?: boolean;
+  type?: "submit" | "reset" | "button";
+}
+
+export default class Button extends React.Component<Props> {
+  public render() {
+    const {
+      className,
+      variant = "filled",
+      children,
+      disabled = false,
+      href,
+      active,
+      ...rest
+    } = this.props;
+
+    let Component: React.ComponentType<
+      React.AnchorHTMLAttributes<
+        HTMLAnchorElement | HTMLButtonElement | HTMLDivElement
+      > &
+        React.ClassAttributes<HTMLButtonElement | HTMLAnchorElement>
+    > = "a" as any;
+
+    // Catch for buttons / span / stc.
+
+    const rootClassName = cn(
+      s.root,
+      {
+        [s.filled]: variant === "filled",
+      },
+      className
+    );
+
+    return (
+      <Component
+        className={rootClassName}
+        href={href}
+        aria-pressed={active}
+        data-variant={variant}
+        {...rest}
+      >
+        {children}
+      </Component>
+    );
+  }
+}

components/ui/Button/index.ts

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