"use client"
import React, { useState } from "react"
import { AnimatePresence, motion } from "motion/react"
import { cn } from "@/lib/utils"
const HoverExpand_001 = ({
images,
className,
}: {
images: { src: string; alt: string; code: string }[]
className?: string
}) => {
const [activeImage, setActiveImage] = useState<number | null>(1)
return (
<motion.div
initial={{ opacity: 0, translateY: 20 }}
animate={{ opacity: 1, translateY: 0 }}
transition={{
duration: 0.3,
delay: 0.5,
}}
className={cn("relative w-full max-w-6xl px-5", className)}
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
className="w-full"
>
<div className="flex w-full items-center justify-center gap-1">
{images.map((image, index) => (
<motion.div
key={index}
className="relative cursor-pointer overflow-hidden rounded-3xl"
initial={{ width: "2.5rem", height: "20rem" }}
animate={{
width: activeImage === index ? "24rem" : "5rem",
height: activeImage === index ? "24rem" : "24rem",
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
onClick={() => setActiveImage(index)}
onHoverStart={() => setActiveImage(index)}
>
<AnimatePresence>
{activeImage === index && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute h-full w-full bg-gradient-to-t from-black/40 to-transparent"
/>
)}
</AnimatePresence>
<AnimatePresence>
{activeImage === index && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute flex h-full w-full flex-col items-end justify-end p-4"
>
<p className="text-left text-xs text-white/50">
{image.code}
</p>
</motion.div>
)}
</AnimatePresence>
<img
src={image.src}
className="size-full object-cover"
alt={image.alt}
/>
</motion.div>
))}
</div>
</motion.div>
</motion.div>
)
}
const HoverExpand_002 = ({
images,
className,
}: {
images: { src: string; alt: string; code: string }[]
className?: string
}) => {
const [activeImage, setActiveImage] = useState<number | null>(1)
return (
<motion.div
initial={{ opacity: 0, translateY: 20 }}
animate={{ opacity: 1, translateY: 0 }}
transition={{
duration: 0.3,
delay: 0.5,
}}
className={cn("relative w-full max-w-6xl px-5", className)}
>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
transition={{ duration: 0.3 }}
className="w-full"
>
<div className="flex w-full flex-col items-center justify-center gap-1">
{images.map((image, index) => (
<motion.div
key={index}
className="group relative cursor-pointer overflow-hidden rounded-3xl"
initial={{ height: "2.5rem", width: "24rem" }}
animate={{
height: activeImage === index ? "24rem" : "2.5rem",
}}
transition={{ duration: 0.3, ease: "easeInOut" }}
onClick={() => setActiveImage(index)}
onHoverStart={() => setActiveImage(index)}
>
<AnimatePresence>
{activeImage === index && (
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute h-full w-full bg-gradient-to-t from-black/50 to-transparent"
/>
)}
</AnimatePresence>
<AnimatePresence>
{activeImage === index && (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: 20 }}
className="absolute flex h-full w-full flex-col items-end justify-end px-4 pb-5"
>
<p className="text-left text-xs text-white/50">
{image.code}
</p>
</motion.div>
)}
</AnimatePresence>
<img
src={image.src}
className="size-full object-cover"
alt={image.alt}
/>
</motion.div>
))}
</div>
</motion.div>
</motion.div>
)
}
export function ScrollExpandDemo() {
const images = [
{
src: "https://skiper-ui.com/images/x.com/13.jpeg",
alt: "Illustrations by my fav AarzooAly",
code: "# 23",
},
{
src: "https://skiper-ui.com/images/x.com/32.jpeg",
alt: "Illustrations by ©AarzooAly",
code: "# 23",
},
{
src: "https://skiper-ui.com/images/x.com/20.jpeg",
alt: "Illustrations by ©AarzooAly",
code: "# 23",
},
{
src: "https://skiper-ui.com/images/x.com/21.jpeg",
alt: "Illustrations by ©AarzooAly",
code: "# 23",
},
{
src: "https://skiper-ui.com/images/x.com/19.jpeg",
alt: "Illustrations by ©AarzooAly",
code: "# 23",
},
{
src: "https://skiper-ui.com/images/x.com/1.jpeg",
alt: "Illustrations by ©AarzooAly",
code: "# 23",
},
]
return (
<div className="flex h-full w-full flex-col items-center justify-center gap-12 overflow-hidden bg-[#f5f4f3] py-12">
<HoverExpand_001 className="" images={images} />
<HoverExpand_002 className="" images={images} />
</div>
)
}
