Rough drawing

TS

import { … } from "@fungi.computer/caps/components/rough-drawing";

Box

TSX

import { drawRough } from "@fungi.computer/caps/components/rough-drawing";
import { useEffect, useRef } from "react";

export default function Box() {
  const ref = useRef<HTMLSpanElement>(null);
  useEffect(() => {
    const node = ref.current;
    if (!node) return;
    return drawRough(node);
  }, []);
  return (
    <p className="text-lg">
      Check the{" "}
      <span
        ref={ref}
        className="caps-rough caps-rough-box"
        data-caps-rough="box"
        data-rough-seed={7}
      >
        moisture level
      </span>{" "}
      every morning.
    </p>
  );
}

Circle and line

TSX

import { drawRough } from "@fungi.computer/caps/components/rough-drawing";
import { useEffect, useRef } from "react";

export default function CircleAndLine() {
  const circle = useRef<HTMLSpanElement>(null);
  const line = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const nodes = [circle.current, line.current].filter(
      (node): node is HTMLElement => node !== null,
    );
    const cleanups = nodes.map((node) => drawRough(node));
    return () => {
      for (const cleanup of cleanups) cleanup();
    };
  }, []);
  return (
    <div className="flex items-center gap-6 p-lg text-lg">
      <span
        ref={circle}
        className="caps-rough caps-rough-circle"
        data-caps-rough="circle"
      >
        85%
      </span>
      <div
        ref={line}
        className="caps-rough caps-rough-line h-16 w-24"
        data-caps-rough="line"
        data-rough-points="0,100 100,0"
      />
    </div>
  );
}