Cover pattern

TS

import { … } from "@fungi.computer/caps/components/cover-pattern";

Garden

TSX

import { CoverPattern } from "@fungi.computer/caps/components/cover-pattern";

export default function Garden() {
  return (
    <div className="h-40 w-64 overflow-hidden rounded-box">
      <CoverPattern seed="lions-mane-01" label="Lion's mane cover art" />
    </div>
  );
}

Seeds

TSX

import { CoverPattern } from "@fungi.computer/caps/components/cover-pattern";

const seeds = ["shiitake", "oyster", "chanterelle", "morel"];

export default function Seeds() {
  return (
    <div className="grid w-full max-w-sm grid-cols-2 gap-2">
      {seeds.map((seed) => (
        <div key={seed} className="h-24 overflow-hidden rounded-box">
          <CoverPattern seed={seed} />
        </div>
      ))}
    </div>
  );
}

Props

CoverPatternProps

Prop	Type	Description
seed	string	Stable identity that picks the garden; the same seed draws the same one.
label?	string	Names the pattern for assistive technology; without it the pattern is decorative.

• seedstring

  Stable identity that picks the garden; the same seed draws the same one.

• label?string

  Names the pattern for assistive technology; without it the pattern is decorative.

Full types: API reference.