Activity line

TS

import { … } from "@fungi.computer/caps/components/activity-line";

Hero

TSX

import { ActivityLine } from "@fungi.computer/caps/components/activity-line";

export default function Hero() {
  const startedAt = Date.now() - 4_200;
  const finishedAt = startedAt + 4_200;
  return (
    <div className="grid max-w-sm gap-xs">
      <ActivityLine
        doneLabel="Thought for"
        finishedAt={finishedAt}
        label="Thinking"
        startedAt={startedAt}
        state="done"
      >
        <p className="text-xs text-base-content/70">
          Checked the spore log, then picked a dry shelf for the chanterelles.
        </p>
      </ActivityLine>
    </div>
  );
}

States

TSX

import { ActivityLine } from "@fungi.computer/caps/components/activity-line";

export default function States() {
  const startedAt = Date.now() - 2_000;
  return (
    <div className="grid max-w-sm gap-xs">
      <ActivityLine
        doneLabel="Searched for"
        label="Searching the foraging log"
        startedAt={startedAt}
        state="running"
      />
      <ActivityLine
        doneLabel="Sorted in"
        finishedAt={startedAt + 1_800}
        label="Sorting the basket"
        startedAt={startedAt}
        state="done"
      />
      <ActivityLine
        doneLabel="Dried for"
        failedLabel="Drying stopped after"
        finishedAt={startedAt + 900}
        label="Drying the morels"
        startedAt={startedAt}
        state="failed"
      />
    </div>
  );
}

Run

TSX

import { Button } from "@fungi.computer/caps/components/button";
import {
  ActivityLine,
  type ActivityState,
} from "@fungi.computer/caps/components/activity-line";
import { useState } from "react";

export default function Run() {
  const [state, setState] = useState<ActivityState>("done");
  const [startedAt, setStartedAt] = useState(() => Date.now() - 3_000);
  const [finishedAt, setFinishedAt] = useState<number | undefined>(
    () => startedAt + 3_000,
  );
  const run = () => {
    setStartedAt(Date.now());
    setFinishedAt(undefined);
    setState("running");
    window.setTimeout(() => {
      setFinishedAt(Date.now());
      setState("done");
    }, 1_800);
  };
  return (
    <div className="grid max-w-sm gap-sm">
      <Button onClick={run} size="sm">
        Forage again
      </Button>
      <ActivityLine
        doneLabel="Foraged for"
        finishedAt={finishedAt}
        label="Foraging the hollow"
        startedAt={startedAt}
        state={state}
      >
        <p className="text-xs text-base-content/70">
          Found three lion&apos;s mane within arm&apos;s reach of the trail.
        </p>
      </ActivityLine>
    </div>
  );
}