Flip card

Un giro 3D real con su propia cara trasera, para que lo que revela nunca se vea invertido.

Instalación

$ pnpm dlx shadcn@latest add @ssntl/flip-card

Uso

tsx

import { FlipCard } from "@/components/ui/flip-card"

<FlipCard flipped={girada} front={<Frente />} back={<Reverso />} />
<Button onClick={() => setGirada(!girada)}>Ver el código</Button>

Reglas

Lo que este componente espera de ti, tal como se instala en components/ui/flip-card.md junto al código. El archivo completo agrega cuándo usarlo, teclado, los fundamentos de UI que aplica y cada regla compartida (en inglés).

components/ui/flip-card.md

## Reglas de Flip card

- **Giros legibles.** Un giro 3D real con su propia cara trasera, así el código del reverso se lee al derecho.
- **La cara oculta queda inerte.** El foco y los lectores de pantalla solo llegan al lado visible.
- Dale al giro un control visible con una etiqueta que diga qué muestra; con movimiento reducido las caras se funden.

Abrir el archivo de reglas completo

Código

components/ui/flip-card.tsx

import * as React from "react"

import { cn } from "@/lib/utils"

// Readable flips: a true 3D turn with a back face of its own, so what it
// reveals is never mirrored. The hidden face is inert, so focus and screen
// readers only reach the side you can see. Under reduced motion the faces
// cross-fade instead of turning.
function FlipCard({
  flipped,
  front,
  back,
  className,
  ...props
}: Omit<React.ComponentProps<"div">, "children"> & {
  flipped: boolean
  front: React.ReactNode
  back: React.ReactNode
}) {
  const face =
    "col-start-1 row-start-1 grid rounded-lg backface-hidden motion-reduce:transition-opacity motion-reduce:duration-(--duration-menu)"
  return (
    <div
      data-slot="flip-card"
      className={cn("grid perspective-distant", className)}
      {...props}
    >
      <div
        data-flipped={flipped || undefined}
        className="grid transition-[rotate] duration-(--duration-panel) ease-in-out transform-3d data-flipped:rotate-y-180 motion-reduce:transition-none motion-reduce:data-flipped:rotate-y-0"
      >
        <div
          inert={flipped}
          className={cn(face, flipped && "motion-reduce:opacity-0")}
        >
          {front}
        </div>
        <div
          inert={!flipped}
          className={cn(
            face,
            "rotate-y-180 motion-reduce:rotate-y-0",
            !flipped && "motion-reduce:opacity-0"
          )}
        >
          {back}
        </div>
      </div>
    </div>
  )
}

export { FlipCard }