Circling Elements Demo

1import React from "react"
2import Image from "next/image"
3import { exampleImages } from "@/utils/demo-images"
4 
5import useScreenSize from "@/hooks/use-screen-size"
6import CirclingElements from "@/components/fancy/blocks/circling-elements"
7 
8const CirclingElementsDemo: React.FC = () => {
9  const screenSize = useScreenSize()
10 
11  return (
12    <div className="w-dvw h-dvh bg-[#efefef] flex items-center justify-center">
13      <CirclingElements
14        radius={screenSize.lessThan(`md`) ? 80 : 120}
15        duration={10}
16        easing="linear"
17        pauseOnHover={true}
18      >
19        {exampleImages.map((image, index) => (
20          <div
21            key={index}
22            className="w-20 h-20 md:w-28 md:h-28 hover:scale-125 duration-200 ease-out cursor-pointer"
23          >
24            <Image src={image.url} fill alt="image" className="object-cover" />
25          </div>
26        ))}
27      </CirclingElements>
28    </div>
29  )
30}
31 
32export default CirclingElementsDemo