Flip Card

1"use client"
2 
3import * as React from "react"
4 
5import { cn } from "@/lib/utils"
6 
7export interface FlipCardProps extends Omit<
8  React.ComponentProps<"button">,
9  "content"
10> {
11  /** Face shown at rest. It sets the card's size; the back is laid over it. */
12  front: React.ReactNode
13  /** Face shown once the card is turned. */
14  back: React.ReactNode
15  /** Turn the card yourself. Leave it out to let the card own its state. */
16  flipped?: boolean
17  /** Starting face when the card owns its state. */
18  defaultFlipped?: boolean
19  /** Called with the face the card is turning to. */
20  onFlippedChange?: (flipped: boolean) => void
21  /** Turn around the vertical axis (`y`) or the horizontal one (`x`). */
22  axis?: "x" | "y"
23  /** Length of the turn in milliseconds. */
24  duration?: number
25  /** How much perspective the turn is drawn with, in pixels. Lower is deeper. */
26  depth?: number
27}
28 
29const FACE = "absolute inset-0 [backface-visibility:hidden]"
30 
31export function FlipCard({
32  front,
33  back,
34  flipped,
35  defaultFlipped = false,
36  onFlippedChange,
37  axis = "y",
38  duration = 480,
39  depth = 900,
40  className,
41  disabled,
42  onClick,
43  style,
44  ...props
45}: FlipCardProps) {
46  const [ownFlipped, setOwnFlipped] = React.useState(defaultFlipped)
47  const isControlled = flipped !== undefined
48  const isFlipped = isControlled ? flipped : ownFlipped
49 
50  const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
51    onClick?.(event)
52 
53    if (event.defaultPrevented || disabled) {
54      return
55    }
56 
57    const next = !isFlipped
58    if (!isControlled) {
59      setOwnFlipped(next)
60    }
61    onFlippedChange?.(next)
62  }
63 
64  const turn = axis === "x" ? "rotateX" : "rotateY"
65 
66  return (
67    // A real button, so the card is reachable by keyboard and announces its
68    // state. `aria-pressed` is the honest mapping: this is a toggle, not a
69    // link to somewhere else.
70    <button
71      type="button"
72      data-slot="flip-card"
73      data-flipped={isFlipped ? "" : undefined}
74      aria-pressed={isFlipped}
75      disabled={disabled}
76      onClick={handleClick}
77      className={cn(
78        "group relative block text-left",
79        !disabled && "cursor-pointer",
80        className
81      )}
82      style={{ perspective: `${depth}px`, ...style }}
83      {...props}
84    >
85      <span
86        className="relative block h-full w-full transition-transform ease-[var(--ease-back-out)] [transform-style:preserve-3d] motion-reduce:transition-none"
87        style={{
88// … truncated