UI Components

src/components/lab/components/CardsShowcase.jsx

"use client";

import { useState } from "react";
import { FlaskConical } from "lucide-react";
import CatalogCard from "../CatalogCard";
import LabToggleGroup from "../LabToggleGroup";

const VARIANTS = {
  flat: "bg-[#0b1311f1] border border-default_border",
  glass:
    "bg-[#02050e96] backdrop-blur-[10px] border-[0.5px] border-default_border",
  "hover-lift":
    "bg-[#02050e96] backdrop-blur-[10px] border-[0.5px] border-default_border hover:shadow-2xl hover:border-[#ffffff65] hover:bg-[#02050ead]",
};

export default function CardsShowcase({ code, filename }) {
  const [variant, setVariant] = useState("glass");
  return (
    <CatalogCard
      code={code}
      filename={filename}
      title="Cards"
      note="Extends the real glass/Bento card pattern already used on Services."
      controls={
        <LabToggleGroup
          value={variant}
          onChange={setVariant}
          options={[
            { value: "flat", label: "Flat" },
            { value: "glass", label: "Glass" },
            { value: "hover-lift", label: "Hover-lift" },
          ]}
        />
      }
    >
      <div
        className={`rounded-2xl p-5 w-full max-w-[220px] transition duration-200 ${VARIANTS[variant]}`}
      >
        <FlaskConical className="w-6 h-6 text-white mb-2" />
        <h4 className="text-lg font-normal text-white mb-1">
          Lab Instrument
        </h4>
        <p className="text-description text-xs">A real, running example.</p>
      </div>
    </CatalogCard>
  );
}

src/components/lab/components/TimelineShowcase.jsx

"use client";

import { useState } from "react";
import CatalogCard from "../CatalogCard";
import LabToggleGroup from "../LabToggleGroup";

export default function TimelineShowcase({ code, filename }) {
  const [count, setCount] = useState(3);
  const steps = Array.from({ length: count }, (_, i) => i + 1);

  return (
    <CatalogCard
      code={code}
      filename={filename}
      title="Timeline"
      note="Extends the real step-timeline used in Methodology (Timeline.jsx)."
      controls={
        <LabToggleGroup
          label="steps"
          value={count}
          onChange={setCount}
          options={[
            { value: 2, label: "2" },
            { value: 3, label: "3" },
            { value: 4, label: "4" },
          ]}
        />
      }
    >
      <div className="flex flex-col items-center w-full max-w-[180px]">
        {steps.map((n, i) => (
          <div key={n} className="flex flex-col items-center w-full">
            {i > 0 && <div className="w-1 h-4 bg-[#198d78]" />}
            <div className="w-full rounded-xl border border-default_border bg-[#02050ead] px-3 py-2 text-center">
              <div className="text-active_hover text-xs font-black tracking-wide">
                0{n}
              </div>
            </div>
          </div>
        ))}
      </div>
    </CatalogCard>
  );
}

src/components/lab/components/TooltipShowcase.jsx

"use client";

import { useState } from "react";
import Tooltip from "@/components/common/Tooltip";
import CatalogCard from "../CatalogCard";
import LabToggleGroup from "../LabToggleGroup";

const POSITIONS = {
  top: "bottom-full left-1/2 -translate-x-1/2 mb-2",
  bottom: "top-full left-1/2 -translate-x-1/2",
};

export default function TooltipShowcase({ code, filename }) {
  const [position, setPosition] = useState("bottom");
  return (
    <CatalogCard
      code={code}
      filename={filename}
      title="Tooltips"
      note="The real Tooltip.jsx already in this codebase, reused here and not rebuilt."
      controls={
        <LabToggleGroup
          value={position}
          onChange={setPosition}
          options={[
            { value: "top", label: "Top" },
            { value: "bottom", label: "Bottom" },
          ]}
        />
      }
    >
      <div className="relative inline-block">
        <button className="peer text-xs font-bold rounded-xl px-4 py-2 border border-[#ffffff2a] text-text_normal hover:text-active_hover hover:border-active_hover hover:bg-[#35423F] transition-all duration-300">
          Hover me
        </button>
        <Tooltip label="Real Tooltip.jsx, live" className={POSITIONS[position]} />
      </div>
    </CatalogCard>
  );
}

Component and its call site

// ==================================================================
// src/components/headerSection/HeroTerminal.jsx
// ==================================================================

"use client";

import { useEffect, useRef, useState } from "react";

/**
 * The hero's focal element: a glass terminal that types a short, honest
 * prompt/output sequence.
 *
 * Two rules govern the content, and both are worth stating because they are
 * what keep this from being decoration:
 *
 * 1. Every claim here is checkable. The routes named are real routes; the
 *    counts match what is actually built. Nothing is aspirational. The whole
 *    premise of the Lab is that nothing on the site is a mockup, and a hero
 *    that fakes a terminal to boast would undercut that on the first screen.
 * 2. Geist Mono appears here and effectively nowhere else. DESIGN.md's
 *    One-Family Rule reserves it for "a deliberate raw data / terminal moment
 *    if one is ever built" - this is that moment, so it is sanctioned rather
 *    than type drift.
 */

// The hero's own content. Exported because /lab/ui-components renders this same
// component as a specimen and shows the real hero sequence as one of its
// presets - the Lab's rule is that a specimen is the component actually running
// on the site, never a lookalike rebuilt for display.
export const HERO_LINES = [
  { kind: "cmd", text: "whoami" },
  { kind: "out", text: "devmos - engineers and designers, worldwide" },
  { kind: "cmd", text: "ls ~/disciplines" },
  { kind: "out", text: "design       product, UI, UX" },
  { kind: "out", text: "engineering  web, mobile, AI" },
  { kind: "out", text: "support      24/7, across time zones" },
  { kind: "cmd", text: "ls ~/proof" },
  { kind: "out", text: "lab/*        9 live instruments you can run" },
  { kind: "cmd", text: "cat ./availability" },
  { kind: "out", text: "open to new projects", tone: "signal" },
];

export const HERO_CAPTION =
  "Devmos is a team of engineers and designers working across time zones, covering product and UI design, web, mobile and AI engineering, and 24/7 support. The Lab holds nine live instruments you can use right now: three widgets, three UI components, and three real API routes. We are open to new projects.";

// Typing cadence. Commands type character by character; output arrives whole,
// the way a real shell behaves - output is not typed, it is printed.
const CHAR_MS = 34;
const AFTER_CMD_MS = 320;
const AFTER_OUT_MS = 190;

// One line box at the md type size (0.875rem x 1.75 leading), used to reserve
// height up front. Was a hardcoded min-h tuned by hand to the hero's ten lines,
// which silently became wrong for any other line count.
const LINE_REM = 1.53;
const PADDING_REM = 2.5;

/**
 * @param lines     Sequence to play. Defaults to the hero's own.
 * @param title     Title-bar text.
 * @param caption   Screen-reader equivalent for the panel, which is aria-hidden.
 * @param charMs    Per-character typing delay.
 * @param instant   Skip the animation and print everything, which is also what
 *                  a reduced-motion visitor gets.
 * @param replayToken  Change this to replay the sequence from the top.
 */
export default function HeroTerminal({
  lines = HERO_LINES,
  title = "devmos - zsh",
  caption = HERO_CAPTION,
  charMs = CHAR_MS,
  instant = false,
  replayToken = 0,
}) {
  // Starts fully printed and is emptied on mount only once we know motion is
  // allowed. Initialising to 0 and filling in would mean a visitor with
  // reduced motion, or with JS still booting, briefly sees an empty panel.
  const [visible, setVisible] = useState(lines.length);
  const [typed, setTyped] = useState("");
  const [animating, setAnimating] = useState(false);
  const timers = useRef([]);

  useEffect(() => {
    // Read the preference here rather than from a hook returning state: a hook
    // reports `false` on the first render, and by the time it corrects itself
    // the typing loop has already started. framer-motion's useReducedMotion
    // was doing exactly that - the terminal typed all eight lines with the
    // preference set.
    const query = window.matchMedia("(prefers-reduced-motion: reduce)");
    if (instant || query.matches) {
      setTyped("");
      setVisible(lines.length);
      setAnimating(false);
      return;
    }

    setAnimating(true);
    setVisible(0);
    let cancelled = false;
    const wait = (ms) =>
      new Promise((resolve) => {
        const t = setTimeout(resolve, ms);
        timers.current.push(t);
      });

    (async () => {
      await wait(500);
      for (let i = 0; i < lines.length; i += 1) {
        if (cancelled) return;
        const line = lines[i];

        if (line.kind === "cmd") {
          for (let c = 1; c <= line.text.length; c += 1) {
            if (cancelled) return;
            setTyped(line.text.slice(0, c));
            await wait(charMs);
          }
          if (cancelled) return;
          setTyped("");
          setVisible(i + 1);
          await wait(AFTER_CMD_MS);
        } else {
          setVisible(i + 1);
          await wait(AFTER_OUT_MS);
        }
      }
      // Retires the caret once the sequence finishes, instead of leaving it
      // blinking under completed output forever.
      if (!cancelled) setAnimating(false);
    })();

    return () => {
      cancelled = true;
      timers.current.forEach(clearTimeout);
      timers.current = [];
    };
    // `lines` is a module-level constant at every call site, so its identity is
    // stable and this does not re-run on every render. Changing the preset or
    // bumping replayToken restarts the sequence, which is the point.
  }, [lines, charMs, instant, replayToken]);

  const shown = lines.slice(0, visible);

  return (
    <div className="w-full">
      {/* The animated panel is decorative to a screen reader: a caret that
          retypes itself is noise, not information. The equivalent text is
          exposed once, below, in document order. */}
      <div
        aria-hidden="true"
        className="rounded-2xl border-[0.5px] border-default_border bg-[#02050ed9] backdrop-blur-[10px] overflow-hidden shadow-2xl"
      >
        {/* Title bar */}
        <div className="flex items-center gap-2 border-b border-default_border px-4 py-3">
          <span className="flex gap-1.5">
            <span className="w-2.5 h-2.5 rounded-full bg-[#ffffff2a]" />
            <span className="w-2.5 h-2.5 rounded-full bg-[#ffffff2a]" />
            <span className="w-2.5 h-2.5 rounded-full bg-active_hover/70" />
          </span>
          <span className="font-mono text-eyebrow uppercase text-description ml-2">
            {title}
          </span>
        </div>

        {/* Height is reserved up front so the panel does not grow line by line
            and shove the layout down while it types, and it is derived from the
            sequence rather than hardcoded - a fixed min-h tuned to the hero's
            ten lines was silently wrong for any other content. */}
        <div
          className="font-mono text-micro md:text-[0.875rem] leading-[1.75] p-4 md:p-5"
          style={{
            minHeight: `calc(${lines.length} * ${LINE_REM}rem + ${PADDING_REM}rem)`,
          }}
        >
          {shown.map((line, i) =>
            line.kind === "cmd" ? (
              <p key={i} className="text-text_normal">
                <span className="text-active_hover select-none">$ </span>
                {line.text}
              </p>
            ) : (
              // `whitespace-pre` is what makes the column alignment in LINES
              // survive. Without it HTML collapses the runs of spaces and
              // "design        product, UI, UX" renders as a single-spaced
              // sentence, which loses the tabular look the panel depends on.
              <p
                key={i}
                className={`whitespace-pre ${
                  line.tone === "signal"
                    ? "text-active_hover"
                    : "text-description"
                }`}
              >
                <span className="select-none opacity-40">{"  "}</span>
                {line.text}
              </p>
            )
          )}

          {/* In-flight command. Gated on `animating` too, so a reduced-motion
              visitor never gets a blinking caret parked under finished text. */}
          {animating && visible < lines.length && (
            <p className="text-text_normal">
              <span className="text-active_hover select-none">$ </span>
              {typed}
              <span className="inline-block w-[0.55em] h-[1.05em] -mb-[0.15em] bg-active_hover animate-caret" />
            </p>
          )}
        </div>
      </div>

      {caption && <p className="sr-only">{caption}</p>}
    </div>
  );
}

// ==================================================================
// src/components/lab/components/TerminalShowcase.jsx
// ==================================================================

"use client";

import { useState } from "react";
import HeroTerminal, { HERO_LINES } from "@/components/headerSection/HeroTerminal";
import CatalogCard from "../CatalogCard";
import LabToggleGroup from "../LabToggleGroup";

// The second preset exists to show the component is data-driven rather than a
// hardcoded animation, so it describes its own API instead of imitating a build
// log or a test run. Faking output that looked like a real result would be the
// one thing this Lab is not allowed to do.
const API_LINES = [
  { kind: "cmd", text: "cat lines.js" },
  { kind: "out", text: "[{ kind: 'cmd', text: 'whoami' },  ..]" },
  { kind: "cmd", text: "man terminal" },
  { kind: "out", text: "cmd   types character by character" },
  { kind: "out", text: "out   prints whole, like a real shell" },
  { kind: "out", text: "tone  'signal' paints the line teal" },
  { kind: "cmd", text: "echo $?" },
  { kind: "out", text: "0", tone: "signal" },
];

// Module-level so their identity is stable between renders: HeroTerminal keys
// its typing effect on the `lines` reference, and an inline array would restart
// the animation on every render.
const PRESETS = {
  hero: HERO_LINES,
  api: API_LINES,
};

export default function TerminalShowcase({ code, filename }) {
  const [preset, setPreset] = useState("hero");
  const [instant, setInstant] = useState(false);
  // Changing a toggle already replays the sequence; this is for replaying it
  // without changing anything, which a one-shot animation otherwise makes
  // impossible without a page reload.
  const [replayToken, setReplayToken] = useState(0);

  return (
    <CatalogCard
      code={code}
      filename={filename}
      title="Terminal"
      note="The real hero terminal from the landing page, reused here and not rebuilt. Feed it any line sequence."
      controls={
        <>
          <LabToggleGroup
            label="content"
            value={preset}
            onChange={setPreset}
            options={[
              { value: "hero", label: "Hero" },
              { value: "api", label: "API" },
            ]}
          />
          <LabToggleGroup
            label="typing"
            value={instant ? "instant" : "animated"}
            onChange={(v) => setInstant(v === "instant")}
            options={[
              { value: "animated", label: "Animated" },
              // Not a throwaway option: this is exactly what a visitor with
              // prefers-reduced-motion set receives, so the accessible path is
              // something you can look at rather than take on trust.
              { value: "instant", label: "Instant" },
            ]}
          />
          <div className="flex flex-col gap-2 items-center">
            <span className="text-xs md:text-sm font-bold text-text_normal">
              replay
            </span>
            <button
              type="button"
              onClick={() => setReplayToken((n) => n + 1)}
              className="text-xs md:text-sm font-bold rounded-xl px-3 py-1.5 border border-[#ffffff2a] text-text_normal transition-all duration-300 hover:border-active_hover hover:text-active_hover hover:bg-[#35423F] focus-ring"
            >
              Run again
            </button>
          </div>
        </>
      }
    >
      <div className="w-full max-w-xl">
        <HeroTerminal
          lines={PRESETS[preset]}
          instant={instant}
          replayToken={replayToken}
          title={preset === "hero" ? "devmos - zsh" : "lines.js - zsh"}
          // The hero's caption describes the company, which would be a strange
          // thing for a screen reader to hear from a component catalog. The
          // specimen heading and note already carry the meaning here.
          caption={null}
        />
      </div>
    </CatalogCard>
  );
}