wip(ui): add a Terminal component

pkgs/clan-app/fonts.nix

@@ -15,10 +15,16 @@ let
     url = "https://github.com/Omnibus-Type/Archivo/raw/b5d63988ce19d044d3e10362de730af00526b672/fonts/webfonts/ArchivoSemiCondensed-SemiBold.woff2";
     hash = "sha256-fOE+b+UeTRoj+sDdUWR1pPCZVn0ABy6FEDDmXrOA4LY=";
   };
+
+  vt323 = fetchurl {
+    url = "https://github.com/google/fonts/raw/c781e48f571fe26740a9814c0461064628cbd175/ofl/vt323/VT323-Regular.ttf";
+    hash = "sha256-z03nUa2njOrAM9vhamh3QpOZlbd7wqBSrheklXlYWU0=";
+  };
 in
 runCommand "" { } ''
   mkdir -p $out
   cp ${archivoRegular} $out/ArchivoSemiCondensed-Regular.woff2
   cp ${archivoMedium} $out/ArchivoSemiCondensed-Medium.woff2
   cp ${archivoSemiBold} $out/ArchivoSemiCondensed-SemiBold.woff2
+  cp ${vt323} $out/VT323-Regular.ttf
 ''

pkgs/clan-app/ui/.storybook/preview.ts

@@ -1,5 +1,7 @@
 import type { Preview } from "@kachurun/storybook-solid";
 
+import "../src/index.css";
+
 export const preview: Preview = {
   tags: ["autodocs"],
   parameters: {

pkgs/clan-app/ui/src/components/Terminal/Terminal.css

@@ -0,0 +1,10 @@
+textarea {
+  @apply flex w-full;
+  @apply border rounded-md p-2;
+  @apply text-xs;
+
+  color: var(--clr-fg-inv-3);
+  background-color: var(--clr-bg-inv-5);
+
+  font-family: "VT323", monospace;
+}

pkgs/clan-app/ui/src/components/Terminal/Terminal.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from "@kachurun/storybook-solid";
+import Terminal, { TerminalProps } from "./Terminal";
+
+import sample from "./sample";
+
+const meta: Meta<TerminalProps> = {
+  title: "Components/Terminal",
+  component: Terminal,
+};
+
+export default meta;
+
+type Story = StoryObj<TerminalProps>;
+
+export const Default: Story = {
+  args: {
+    lines: sample.split("\n"),
+  },
+};

pkgs/clan-app/ui/src/components/Terminal/Terminal.tsx

@@ -0,0 +1,28 @@
+import { Component, createEffect } from "solid-js";
+
+import "./Terminal.css";
+import { Typography } from "@/src/components/Typography";
+
+export interface TerminalProps {
+  lines: string[];
+  rows?: number;
+}
+
+const Terminal: Component<TerminalProps> = ({ lines, rows = 20 }) => {
+  let ref: HTMLTextAreaElement | undefined;
+
+  createEffect(() => {
+    // always scroll to the end of the output when it changes
+    if (ref) {
+      ref.scrollTop = ref.scrollHeight;
+    }
+  });
+
+  const value = lines.join("\n");
+
+  return (
+    <textarea ref={ref} readOnly={true} rows={rows} value={value}></textarea>
+  );
+};
+
+export default Terminal;

pkgs/clan-app/ui/src/components/Typography/index.tsx

@@ -6,7 +6,7 @@ import "./css/typography.css";
 export type Hierarchy = "body" | "title" | "headline" | "label";
 type Color = "primary" | "secondary" | "tertiary";
 type Weight = "normal" | "medium" | "bold";
-type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div";
+type Tag = "span" | "p" | "h1" | "h2" | "h3" | "h4" | "div" | "textarea";
 
 const colorMap: Record<Color, string> = {
   primary: cx("fnt-clr-primary"),

pkgs/clan-app/ui/src/index.css

@@ -24,6 +24,12 @@
   src: url(../.fonts/ArchivoSemiCondensed-SemiBold.woff2) format("woff2");
 }
 
+@font-face {
+  font-family: "VT323";
+  font-weight: normal;
+  src: url("../.fonts/VT323-Regular.ttf") format("ttf");
+}
+
 @keyframes slide {
   to {
     background-position: 200% 0;