Cigarette card

TS

import { … } from "@fungi.computer/caps/enhance/cigarette-card";

Flip on click

TSX

import { enhanceCigaretteCards } from "@fungi.computer/caps/enhance/cigarette-card";
import { useEffect, useRef } from "react";

export default function FlipOnClick() {
  const root = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const node = root.current;
    if (!node) return;
    return enhanceCigaretteCards(node);
  }, []);
  return (
    <div ref={root} className="w-56">
      <button
        type="button"
        className="caps-cigarette-card"
        aria-pressed={false}
        data-finish="standard"
        data-flipped={false}
        data-size="standard"
      >
        <span className="caps-cigarette-card-inner">
          <span className="caps-cigarette-card-face caps-cigarette-card-front">
            <span className="caps-cigarette-card-head">
              <span className="caps-cigarette-card-title">Shiitake</span>
            </span>
            <span className="caps-cigarette-card-window">🍄</span>
            <span className="caps-cigarette-card-flavor">
              Grows best on fresh oak.
            </span>
          </span>
          <span
            className="caps-cigarette-card-face caps-cigarette-card-back"
            aria-hidden="true"
          >
            <span className="caps-cigarette-card-ledger">
              <span className="caps-cigarette-card-ledger-title">
                Field measurements
              </span>
            </span>
          </span>
        </span>
      </button>
    </div>
  );
}

Flip programmatically

TSX

import { setCigaretteCardFlipped } from "@fungi.computer/caps/enhance/cigarette-card";
import { Button } from "@fungi.computer/caps/components/button";
import { useRef } from "react";

export default function FlipProgrammatically() {
  const card = useRef<HTMLButtonElement>(null);
  return (
    <div className="flex flex-col items-start gap-2">
      <div className="w-56">
        <button
          type="button"
          ref={card}
          className="caps-cigarette-card"
          aria-pressed={true}
          data-finish="standard"
          data-flipped={true}
          data-size="standard"
        >
          <span className="caps-cigarette-card-inner">
            <span
              className="caps-cigarette-card-face caps-cigarette-card-front"
              aria-hidden="true"
            >
              <span className="caps-cigarette-card-window">🦪</span>
            </span>
            <span className="caps-cigarette-card-face caps-cigarette-card-back">
              <span className="caps-cigarette-card-ledger">
                <span className="caps-cigarette-card-ledger-title">
                  Field measurements
                </span>
              </span>
            </span>
          </span>
        </button>
      </div>
      <Button
        size="sm"
        variant="outline"
        onClick={() => {
          const node = card.current;
          if (!node) return;
          setCigaretteCardFlipped(
            node,
            node.getAttribute("aria-pressed") !== "true",
          );
        }}
      >
        Flip
      </Button>
    </div>
  );
}