Game share card

TS

import { … } from "@fungi.computer/caps/blocks/game-share-card";

Cover and play

TSX

import { GameShareCard } from "@fungi.computer/caps/blocks/game-share-card";
import { CoverPattern } from "@fungi.computer/caps/components/cover-pattern";

export default function CoverAndPlay() {
  return (
    <GameShareCard
      className="w-72"
      eyebrow="Marketing"
      heading="Mycelium Run"
      cover={
        <div className="h-32 overflow-hidden">
          <CoverPattern seed="mycelium-run" />
        </div>
      }
      action={<a href="#play">Play</a>}
    >
      <p>A twin-stick scavenger hunt through a glowing forest floor.</p>
    </GameShareCard>
  );
}

No cover

TSX

import { GameShareCard } from "@fungi.computer/caps/blocks/game-share-card";

export default function NoCover() {
  return (
    <GameShareCard
      className="w-72"
      eyebrow="New"
      heading="Spore Tower Defense"
      action={<a href="#play">Play now</a>}
    >
      <p>Stack spore turrets before the mold wave arrives.</p>
    </GameShareCard>
  );
}

Play count

TSX

import { GameShareCard } from "@fungi.computer/caps/blocks/game-share-card";
import { useState } from "react";

export default function PlayCount() {
  const [plays, setPlays] = useState(241);
  return (
    <GameShareCard
      className="w-72"
      heading="Lantern Keeper"
      action={
        <button
          type="button"
          onClick={() => {
            setPlays((value) => value + 1);
          }}
        >
          Play
        </button>
      }
    >
      <p>{plays} plays today.</p>
    </GameShareCard>
  );
}

Props

GameShareCardProps

Prop	Type	Description
heading	ReactNode
eyebrow?	ReactNode
cover?	ReactNode
action	ReactElement	A host-owned link or button, presented as the primary play action.

• headingReactNode
• eyebrow?ReactNode
• cover?ReactNode
• actionReactElement

  A host-owned link or button, presented as the primary play action.

Full types: API reference.