FlipCard

pnpm add @corew500/ui

import { FlipCard, FlipCardFront, FlipCardBack } from "@corew500/ui/flip-card"

<FlipCard>
  <FlipCardFront>
    <h3>Front Side</h3>
    <p>Hover to flip</p>
  </FlipCardFront>
  <FlipCardBack>
    <h3>Back Side</h3>
    <p>Hidden content revealed!</p>
  </FlipCardBack>
</FlipCard>

{/* Flip on hover (default) */}
<FlipCard trigger="hover">
  <FlipCardFront>Hover me</FlipCardFront>
  <FlipCardBack>Back content</FlipCardBack>
</FlipCard>

{/* Flip on click */}
<FlipCard trigger="click">
  <FlipCardFront>Click me</FlipCardFront>
  <FlipCardBack>Back content</FlipCardBack>
</FlipCard>

{/* Horizontal flip (default) */}
<FlipCard direction="horizontal">
  <FlipCardFront>Front</FlipCardFront>
  <FlipCardBack>Back</FlipCardBack>
</FlipCard>

{/* Vertical flip */}
<FlipCard direction="vertical">
  <FlipCardFront>Front</FlipCardFront>
  <FlipCardBack>Back</FlipCardBack>
</FlipCard>

<FlipCard size="sm">
  {/* Small card */}
</FlipCard>

<FlipCard size="default">
  {/* Default size */}
</FlipCard>

<FlipCard size="lg">
  {/* Large card */}
</FlipCard>

<FlipCard size="full">
  {/* Full container size */}
</FlipCard>

function ControlledFlipCard() {
  const [flipped, setFlipped] = useState(false)

  return (
    <>
      <Button onClick={() => setFlipped(!flipped)}>
        {flipped ? "Show Front" : "Show Back"}
      </Button>

      <FlipCard flipped={flipped} onFlippedChange={setFlipped}>
        <FlipCardFront>Front Content</FlipCardFront>
        <FlipCardBack>Back Content</FlipCardBack>
      </FlipCard>
    </>
  )
}

import { FlipCard, FlipCardFront, FlipCardBack } from "@corew500/ui/flip-card"
import { Card, CardHeader, CardTitle, CardContent } from "@corew500/ui/card"
import { Button } from "@corew500/ui/button"

function TeamMemberCard({ member }) {
  return (
    <FlipCard trigger="hover">
      <FlipCardFront>
        <Card className="h-full">
          <CardHeader>
            <img
              src={member.photo}
              alt={member.name}
              className="w-full h-48 object-cover rounded-t"
            />
          </CardHeader>
          <CardContent>
            <CardTitle>{member.name}</CardTitle>
            <p className="text-sm text-muted-foreground">{member.role}</p>
          </CardContent>
        </Card>
      </FlipCardFront>

      <FlipCardBack>
        <Card className="h-full">
          <CardContent className="p-6">
            <h4 className="font-medium mb-2">About</h4>
            <p className="text-sm mb-4">{member.bio}</p>
            <div className="flex gap-2">
              <Button size="sm" variant="outline">
                LinkedIn
              </Button>
              <Button size="sm" variant="outline">
                Twitter
              </Button>
            </div>
          </CardContent>
        </Card>
      </FlipCardBack>
    </FlipCard>
  )
}