feat(web): add dummy toolbar + tailwindcss colors

2 files changed, 74 insertions, 0 deletions

diff --git a/web/src/components/toolbar/index.css b/web/src/components/toolbar/index.css
new file mode 100644
index 0000000..3f78671
--- /dev/null
+++ b/web/src/components/toolbar/index.css
@@ -0,0 +1,50 @@
+ntv-toolbar {
+  display: flex;
+  border-radius: 4px;
+  background: var(--color-neutral-800);
+  width: min-content;
+}
+
+ntv-toolbar > section {
+  display: flex;
+  gap: 0.5rem;
+  padding: 0.5rem;
+}
+
+ntv-toolbar button[data-variant="menu"] {
+  border-radius: 4px;
+  background: var(--color-neutral-700);
+  padding: 0 0.625rem;
+  height: 1.5rem;
+  color: white;
+  font-size: 0.75rem;
+}
+
+ntv-toolbar button[data-variant="icon"] {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 4px;
+  background: var(--color-neutral-700);
+  padding: 0.125rem 0.625rem;
+  aspect-ratio: 1;
+  height: 1.5rem;
+  color: white;
+  font-weight: 600;
+  font-size: 0.75rem;
+}
+
+ntv-toolbar button:hover {
+  background: var(--color-neutral-600);
+}
+
+ntv-toolbar input {
+  border: 1px solid var(--color-neutral-700);
+  border-radius: 4px;
+  background: var(--color-neutral-900);
+  width: 2.5rem;
+  height: 1.5rem;
+  color: white;
+  font-size: 0.75rem;
+  text-align: center;
+}
diff --git a/web/src/components/toolbar/index.ts b/web/src/components/toolbar/index.ts
new file mode 100644
index 0000000..d844a69
--- /dev/null
+++ b/web/src/components/toolbar/index.ts
@@ -0,0 +1,24 @@
+import h, { CreateElement } from "../../html";
+import "./index.css";
+
+class NotiveToolbarElement extends HTMLElement {
+  connectedCallback() {
+    this.append(
+      h.section(
+        h.button({ dataset: { variant: "menu" } }, "File"),
+        h.button({ dataset: { variant: "menu" } }, "Edit"),
+        h.button({ dataset: { variant: "menu" } }, "Format"),
+      ),
+      h.section(
+        h.button({ dataset: { variant: "icon" } }, "-"),
+        h.input({ type: "text", value: "1" }),
+        h.button({ dataset: { variant: "icon" } }, "+"),
+      ),
+    );
+  }
+}
+
+customElements.define("ntv-toolbar", NotiveToolbarElement);
+
+export default ((...args: any[]): NotiveToolbarElement =>
+  (h as any)["ntv-toolbar"](...args)) as CreateElement<NotiveToolbarElement>;