Trading card

TS

import { … } from "@fungi.computer/caps/components/trading-card";

Spore

TSX

import { TradingCard } from "@fungi.computer/caps/components/trading-card";

export default function Spore() {
  return (
    <TradingCard
      className="w-56"
      stage="Spore"
      name="Shiitake"
      stat="60 SP"
      typeLine="Fungus · Wood"
      art={
        <div className="flex h-full items-center justify-center text-4xl">
          🍄
        </div>
      }
      move={{ name: "Colonize", value: "20", cost: "💧💧" }}
      flavor="Grows best on fresh oak."
      facts={[{ label: "Weakness", value: "Heat" }]}
      setNumber="014/120"
      rarity="★"
    />
  );
}

Holo finish

TSX

import { TradingCard } from "@fungi.computer/caps/components/trading-card";

export default function HoloFinish() {
  return (
    <TradingCard
      className="w-56"
      finish="holo"
      stage="Fruiting"
      name="Lion's Mane"
      stat="90 SP"
      art={
        <div className="flex h-full items-center justify-center text-4xl">
          🦁
        </div>
      }
      move={{ name: "Brain Boost", value: "40" }}
      flavor="Shaggy, white, and good for focus."
      setNumber="041/120"
      rarity="★★"
    />
  );
}

Move with form

TSX

import { TradingCard } from "@fungi.computer/caps/components/trading-card";
import { Button } from "@fungi.computer/caps/components/button";
import { useState } from "react";

export default function MoveWithForm() {
  const [cheered, setCheered] = useState(false);
  return (
    <TradingCard
      className="w-56"
      name="Oyster"
      typeLine="Fungus · Shelf"
      art={
        <div className="flex h-full items-center justify-center text-4xl">
          🦪
        </div>
      }
      move={{
        name: "Cheer On",
        children: (
          <Button
            size="sm"
            variant="outline"
            disabled={cheered}
            onClick={() => {
              setCheered(true);
            }}
          >
            {cheered ? "Cheered!" : "Cheer"}
          </Button>
        ),
      }}
      flavor="Fast growing and forgiving."
      setNumber="058/120"
    />
  );
}

Props

TradingCardProps

Prop	Type	Description
name	string
stage?	string	A small stage label printed before the name, such as "Spore".
stat?	ReactNode	The stat printed at the right of the name bar, such as "60 SP".
typeLine?	string	The type line under the art window.
art	ReactNode
move	TradingCardMove
flavor?	ReactNode
facts?	readonly TradingCardFact[]
setNumber?	string	Collector number, such as "001/001".
rarity?	ReactNode	A small rarity mark printed by the set number.
finish?	"standard" | "holo"

• namestring
• stage?string

  A small stage label printed before the name, such as "Spore".

• stat?ReactNode

  The stat printed at the right of the name bar, such as "60 SP".

• typeLine?string

  The type line under the art window.

• artReactNode
• moveTradingCardMove
• flavor?ReactNode
• facts?readonly TradingCardFact[]
• setNumber?string

  Collector number, such as "001/001".

• rarity?ReactNode

  A small rarity mark printed by the set number.

• finish?"standard" | "holo"

Full types: API reference.