24:I[10800,["/_next/static/immutable/chunks/2b8-molhpybda.js","/_next/static/immutable/chunks/3f7naz_nzwkhp.js","/_next/static/immutable/chunks/39upafeb0ia93.js","/_next/static/immutable/chunks/09vz_1f1uue8_.js","/_next/static/immutable/chunks/3xl33r3b-onjh.js","/_next/static/immutable/chunks/2jy23hoe64358.js","/_next/static/immutable/chunks/1j_w2s0w_6_sa.js"],"CodeBlockClient"] 25:Tdf0,"use client"; import { cn } from "@/lib/utils"; import { motion, AnimatePresence, useMotionValue, PanInfo } from "motion/react"; import { useRef, useState } from "react"; import { PlaceholderImage } from "next-image-placeholder/react"; import { getPlaceholderAction } from "@/actions/get-image-placeholder"; type ImgItem = { id: number; url: string }; const CARD_IMAGES: ImgItem[] = [ { id: 1, url: "https://i.pinimg.com/736x/57/41/48/574148dab4a394849534eae05fe5628b.jpg", }, { id: 2, url: "https://i.pinimg.com/736x/85/f3/61/85f361f859cd06b55e5d14fe09e4b9f8.jpg", }, { id: 3, url: "https://i.pinimg.com/736x/4f/62/d2/4f62d2bc39cb6092fe4dedb978c285c5.jpg", }, { id: 4, url: "https://i.pinimg.com/1200x/54/9e/0e/549e0e7ad7e492ba4766f0bbdfe5e0c8.jpg", }, { id: 5, url: "https://i.pinimg.com/736x/5b/6d/ee/5b6dee0124a9ccb6e890357521648104.jpg", }, { id: 6, url: "https://i.pinimg.com/736x/fd/ab/cb/fdabcb91d2df70207bb8740029cb8a18.jpg", }, ]; export const FlipCard = () => { const constraintRef = useRef(null); const [cards, setCards] = useState(CARD_IMAGES); const handleCardDismiss = () => { setCards((prev) => { const first = prev[0]; if (!first) return prev; return [...prev.slice(1), first]; }); }; return (

{cards.map((card, index) => ( ))}

); }; const Card = ({ card, index, totalCards, onDismiss, }: { card: ImgItem; index: number; totalCards: number; onDismiss?: () => void; }) => { const isTopCard = index === 0; const rotation = -index * 7; const x = useMotionValue(0); const y = useMotionValue(0); const handleDragEnd = (_: any, info: PanInfo) => { if (onDismiss) { onDismiss(); x.set(0); y.set(0); } }; return ( } className="pointer-events-none rounded-xl object-cover" style={{ userSelect: "none", // @ts-ignore WebkitUserDrag: "none", }} /> ); }; 26:T9088,

"use client";

import { cn } from "@/lib/utils";
import { motion, AnimatePresence, useMotionValue, PanInfo } from "motion/react";
import { useRef, useState } from "react";
import { PlaceholderImage } from "next-image-placeholder/react";
import { getPlaceholderAction } from "@/actions/get-image-placeholder";

type ImgItem = { id: number; url: string };

const CARD_IMAGES: ImgItem[] = [
  {
    id: 1,
    url: "https://i.pinimg.com/736x/57/41/48/574148dab4a394849534eae05fe5628b.jpg",
  },
  {
    id: 2,
    url: "https://i.pinimg.com/736x/85/f3/61/85f361f859cd06b55e5d14fe09e4b9f8.jpg",
  },
  {
    id: 3,
    url: "https://i.pinimg.com/736x/4f/62/d2/4f62d2bc39cb6092fe4dedb978c285c5.jpg",
  },
  {
    id: 4,
    url: "https://i.pinimg.com/1200x/54/9e/0e/549e0e7ad7e492ba4766f0bbdfe5e0c8.jpg",
  },
  {
    id: 5,
    url: "https://i.pinimg.com/736x/5b/6d/ee/5b6dee0124a9ccb6e890357521648104.jpg",
  },
  {
    id: 6,
    url: "https://i.pinimg.com/736x/fd/ab/cb/fdabcb91d2df70207bb8740029cb8a18.jpg",
  },
];

export const FlipCard = () => {
  const constraintRef = useRef<HTMLDivElement | null>(null);
  const [cards, setCards] = useState(CARD_IMAGES);

  const handleCardDismiss = () => {
    setCards((prev) => {
      const first = prev[0];
      if (!first) return prev;
      return [...prev.slice(1), first];
    });
  };

  return (
    <div className="relative h-[400px] md:h-[600px]">
      <AnimatePresence initial={false}>
        {cards.map((card, index) => (
          <Card
            key={card.id}
            card={card}
            index={index}
            totalCards={cards.length}
            onDismiss={index === 0 ? handleCardDismiss : undefined}
          />
        ))}
      </AnimatePresence>
    </div>
  );
};

const Card = ({
  card,
  index,
  totalCards,
  onDismiss,
}: {
  card: ImgItem;
  index: number;
  totalCards: number;
  onDismiss?: () => void;
}) => {
  const isTopCard = index === 0;
  const rotation = -index * 7;

  const x = useMotionValue(0);
  const y = useMotionValue(0);

  const handleDragEnd = (_: any, info: PanInfo) => {
    if (onDismiss) {
      onDismiss();
      x.set(0);
      y.set(0);
    }
  };

  return (
    <motion.div
      className={cn(
        "absolute top-1/2 left-1/2 -translate-1/2 w-[150px] h-[250px] md:w-[300px] md:h-[400px]",
        isTopCard ? "cursor-grab active:cursor-grabbing" : "cursor-default"
      )}
      initial={false}
      style={{
        x,
        y,
        zIndex: totalCards - index,
        touchAction: isTopCard ? "none" : "auto",
      }}
      animate={{
        rotate: rotation,
      }}
      transition={{
        type: "spring",
        stiffness: 400,
        damping: 30,
      }}
      drag={isTopCard}
      dragConstraints={{ top: 0, right: 0, bottom: 0, left: 0 }}
      dragElastic={0.5}
      dragTransition={{
        bounceStiffness: 700,
        bounceDamping: 40,
      }}
      whileHover={isTopCard ? { scale: 1.03 } : undefined}
      // whileDrag={isTopCard ? { scale: 1.05 } : undefined}
      onDragEnd={isTopCard ? handleDragEnd : undefined}
    >
      <PlaceholderImage
        src={card.url}
        action={getPlaceholderAction}
        alt={`Card ${card.id}`}
        fill
        fallback={
          <div className="absolute inset-0 animate-pulse rounded-xl bg-neutral-200 dark:bg-neutral-800" />
        }
        className="pointer-events-none rounded-xl object-cover"
        style={{
          userSelect: "none",
          // @ts-ignore
          WebkitUserDrag: "none",
        }}
      />
    </motion.div>
  );
};

27:T1087,

"use server";

import path from "node:path";
import { getPlaceholder } from "next-image-placeholder";

export async function getPlaceholderAction(url: string) {
    // Paths starting with "/" are local files served from public/ — resolve
    // them to a real filesystem path so next-image-placeholder reads the
    // file directly instead of treating "/carousel/foo.png" as an (invalid)
    // absolute OS path or trying to fetch it over the network.
    const input = url.startsWith("/")
        ? path.join(process.cwd(), "public", url)
        : url;

    return getPlaceholder(input);
}

22:["$","$L24",null,{"files":[{"path":"packages/ui/src/registry/components/flip-cards.tsx","content":"$25","html":"$26"},{"path":"apps/web/actions/get-image-placeholder.ts","content":"\"use server\";\n\nimport path from \"node:path\";\nimport { getPlaceholder } from \"next-image-placeholder\";\n\nexport async function getPlaceholderAction(url: string) {\n // Paths starting with \"/\" are local files served from public/ — resolve\n // them to a real filesystem path so next-image-placeholder reads the\n // file directly instead of treating \"/carousel/foo.png\" as an (invalid)\n // absolute OS path or trying to fetch it over the network.\n const input = url.startsWith(\"/\")\n ? path.join(process.cwd(), \"public\", url)\n : url;\n\n return getPlaceholder(input);\n}\n","html":"$27"}]}]

Flip Cards

Installation