feat!: web user interface

web/src/components/Button.jsx

@@ -0,0 +1,16 @@
+import { h } from 'preact';
+
+const noop = () => {};
+
+export default function Button({ children, color, onClick, size }) {
+  return (
+    <div
+      role="button"
+      tabindex="0"
+      className="rounded bg-blue-500 text-white pl-4 pr-4 pt-2 pb-2 font-bold shadow hover:bg-blue-400 hover:shadow-lg cursor-pointer"
+      onClick={onClick || noop}
+    >
+      {children}
+    </div>
+  );
+}

web/src/components/Heading.jsx

@@ -0,0 +1,9 @@
+import { h } from 'preact';
+
+export default function Heading({ children, className = '', size = '2xl' }) {
+  return (
+    <h1 className={`font-semibold tracking-widest text-gray-900 uppercase dark:text-white text-${size} ${className}`}>
+      {children}
+    </h1>
+  );
+}

web/src/components/Link.jsx

@@ -0,0 +1,9 @@
+import { h } from 'preact';
+
+export default function Link({ className, children, href, ...props }) {
+  return (
+    <a className={`text-blue-500 hover:underline ${className}`} href={href} {...props}>
+      {children}
+    </a>
+  );
+}

web/src/components/Switch.jsx

@@ -0,0 +1,26 @@
+import { h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+
+export default function Switch({ checked, label, id, onChange }) {
+  const handleChange = useCallback(
+    (event) => {
+      console.log(event.target.checked, !checked);
+      onChange(id, !checked);
+    },
+    [id, onChange, checked]
+  );
+
+  return (
+    <label for={id} className="flex items-center cursor-pointer">
+      <div className="relative">
+        <input id={id} type="checkbox" className="hidden" onChange={handleChange} checked={checked} />
+        <div className="toggle__line w-12 h-6 bg-gray-400 rounded-full shadow-inner" />
+        <div
+          className="transition-transform absolute w-6 h-6 bg-white rounded-full shadow-md inset-y-0 left-0"
+          style={checked ? 'transform: translateX(100%);' : 'transform: translateX(0%);'}
+        />
+      </div>
+      <div className="ml-3 text-gray-700 font-medium dark:text-gray-200">{label}</div>
+    </label>
+  );
+}

web/src/components/Table.jsx

@@ -0,0 +1,29 @@
+import { h } from 'preact';
+
+export function Table({ children }) {
+  return <table className="table-auto border-collapse text-gray-900 dark:text-gray-200">{children}</table>;
+}
+
+export function Thead({ children }) {
+  return <thead className="">{children}</thead>;
+}
+
+export function Tbody({ children }) {
+  return <tbody className="">{children}</tbody>;
+}
+
+export function Tfoot({ children }) {
+  return <tfoot className="">{children}</tfoot>;
+}
+
+export function Tr({ children, index }) {
+  return <tr className={`${index % 2 ? 'bg-gray-200 ' : ''}`}>{children}</tr>;
+}
+
+export function Th({ children }) {
+  return <th className="border-b-2 border-gray-400 p-4 text-left">{children}</th>;
+}
+
+export function Td({ children }) {
+  return <td className="p-4">{children}</td>;
+}