Draggable Card

"use client";
import React from "react";
import { DraggableCardBody, DraggableCardContainer } from "@/lab/aceternity/ui/draggable-card";

const items = [
  {
    title: "Tyler Durden",
    image: "https://images.unsplash.com/photo-1732310216648-603c0255c000?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[4%] left-[14%] rotate-[-5deg]",
  },
  {
    title: "The Narrator",
    image: "https://images.unsplash.com/photo-1697909623564-3dae17f6c20b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[30%] left-[20%] rotate-[-7deg]",
  },
  {
    title: "Iceland",
    image: "https://images.unsplash.com/photo-1501854140801-50d01698950b?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[2%] left-[40%] rotate-[8deg]",
  },
  {
    title: "Japan",
    image: "https://images.unsplash.com/photo-1518173946687-a4c8892bbd9f?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[26%] left-[58%] rotate-[10deg]",
  },
  {
    title: "Norway",
    image: "https://images.unsplash.com/photo-1421789665209-c9b2a435e3dc?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[12%] right-[30%] rotate-[2deg]",
  },
  {
    title: "New Zealand",
    image: "https://images.unsplash.com/photo-1505142468610-359e7d316be0?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[18%] left-[45%] rotate-[-7deg]",
  },
  {
    title: "Canada",
    image: "https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=600&auto=format&fit=crop&ixlib=rb-4.0.3",
    className: "absolute top-[6%] left-[28%] rotate-[4deg]",
  },
];

export default function DraggableCardDemo() {
  return (
    <DraggableCardContainer className="relative flex h-full w-full items-center justify-center overflow-clip [container-type:size]">
      <p className="absolute top-1/2 mx-auto max-w-[60%] -translate-y-3/4 text-center text-[clamp(1rem,4cqw,2.25rem)] font-black text-neutral-400 dark:text-neutral-800">
        If its your first day at Fight Club, you have to fight.
      </p>
      {items.map((item) => (
        <DraggableCardBody
          key={item.title}
          className={`${item.className} min-h-0 w-[min(24cqw,38cqh)] p-[min(1.6cqw,2.5cqh)]`}
        >
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img
            src={item.image}
            alt={item.title}
            className="pointer-events-none relative z-10 aspect-square w-full object-cover"
          />
          <h3 className="mt-[min(1.2cqw,2cqh)] text-center text-[min(2cqw,3.2cqh)] font-bold text-neutral-700 dark:text-neutral-300">
            {item.title}
          </h3>
        </DraggableCardBody>
      ))}
    </DraggableCardContainer>
  );
}