Drag Elements Demo

1import React from "react"
2import Image from "next/image"
3 
4import useScreenSize from "@/hooks/use-screen-size"
5import DragElements from "@/components/fancy/blocks/drag-elements"
6 
7const urls = [
8  "https://images.unsplash.com/photo-1683746531526-3bca2bc901b8?q=80&w=1820&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
9  "https://images.unsplash.com/photo-1631561729243-9b3291efceae?q=80&w=1885&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
10  "https://images.unsplash.com/photo-1635434002329-8ab192fe01e1?q=80&w=2828&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
11  "https://images.unsplash.com/photo-1719586799413-3f42bb2a132d?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
12  "https://images.unsplash.com/photo-1720561467986-ca3d408ca30b?q=80&w=2048&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
13  "https://images.unsplash.com/photo-1724403124996-64115f38cd3f?q=80&w=3082&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
14]
15 
16const randomInt = (min: number, max: number) => {
17  return Math.floor(Math.random() * (max - min + 1)) + min
18}
19 
20const DragElementsDemo: React.FC = () => {
21  const screenSize = useScreenSize()
22  return (
23    <div className="w-dvw h-dvh relative bg-[#eeeeee] overflow-hidden">
24      <h1 className="absolute text-xl md:text-4xl md:ml-36 top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-center text-muted-foreground uppercase w-full">
25        all your
26        <span className="font-bold text-foreground dark:text-muted">
27          {" "}
28          memories.{" "}
29        </span>
30      </h1>
31      <DragElements dragMomentum={false} className="p-40">
32        {urls.map((url, index) => {
33          const rotation = randomInt(-12, 12)
34          const width = screenSize.lessThan(`md`)
35            ? randomInt(90, 120)
36            : randomInt(120, 150)
37          const height = screenSize.lessThan(`md`)
38            ? randomInt(120, 140)
39            : randomInt(150, 180)
40 
41          return (
42            <div
43              key={index}
44              className={`flex items-start justify-center bg-white shadow-2xl p-4`}
45              style={{
46                transform: `rotate(${rotation}deg)`,
47                width: `${width}px`,
48                height: `${height}px`,
49// … truncated