133 lines
3.9 KiB
TypeScript
133 lines
3.9 KiB
TypeScript
"use client";
|
|
|
|
import { motion, useSpring } from "framer-motion";
|
|
import React, { useState } from "react";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface Awards5Props {
|
|
className?: string;
|
|
}
|
|
|
|
const faOrder = (index: number) => (index + 1).toLocaleString("fa-IR");
|
|
|
|
const Awards5 = ({ className }: Awards5Props) => {
|
|
const SPRING = {
|
|
mass: 0.1,
|
|
stiffness: 100,
|
|
damping: 10,
|
|
};
|
|
|
|
const xSpring = useSpring(0, SPRING);
|
|
const ySpring = useSpring(0, SPRING);
|
|
const scaleSpring = useSpring(0, SPRING);
|
|
const opacity = useSpring(0, SPRING);
|
|
|
|
const awards = [
|
|
{
|
|
title: "جایزه همکاری خلاقانه",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img1.png",
|
|
},
|
|
{
|
|
title: "جایزه تعالی طراحی",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img2.png",
|
|
},
|
|
{
|
|
title: "نوآوری در توسعه وب",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img3.png",
|
|
},
|
|
{
|
|
title: "بهترین طراحی تجربه کاربری",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img4.png",
|
|
},
|
|
{
|
|
title: "طراحی بصری برجسته",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img5.png",
|
|
},
|
|
{
|
|
title: "جایزه نوآوری دیجیتال",
|
|
url: "#",
|
|
image: "/block-media/shadcnblocks/block/guri4/img6.png",
|
|
},
|
|
];
|
|
|
|
const handlePointerMove = (e: React.PointerEvent<HTMLUListElement>) => {
|
|
const bounds = e.currentTarget.getBoundingClientRect();
|
|
xSpring.set(e.clientX - bounds.left + 20);
|
|
ySpring.set(e.clientY - bounds.top + 20);
|
|
};
|
|
|
|
const [currentIndex, setCurrentIndex] = useState(0);
|
|
|
|
return (
|
|
<section dir="rtl" lang="fa" className={cn("py-32", className)}>
|
|
<div className="font-hedvigLettersSerif container">
|
|
<div className="grid grid-cols-1 gap-5 lg:grid-cols-6 lg:gap-20">
|
|
<div className="top-10 col-span-2 flex h-fit w-fit items-center gap-3 py-8 lg:sticky">
|
|
<p className="text-xl text-foreground/30">
|
|
{Number(5).toLocaleString("fa-IR")} جوایز
|
|
</p>
|
|
</div>
|
|
<ul
|
|
onPointerMove={handlePointerMove}
|
|
onPointerEnter={() => {
|
|
opacity.set(1);
|
|
scaleSpring.set(1);
|
|
}}
|
|
onPointerLeave={() => {
|
|
opacity.set(0);
|
|
scaleSpring.set(0);
|
|
}}
|
|
className="relative col-span-4 w-full"
|
|
>
|
|
{awards.map((award, index) => (
|
|
<li
|
|
key={index}
|
|
onPointerEnter={() => {
|
|
setCurrentIndex(index);
|
|
}}
|
|
className="group relative flex cursor-pointer items-center justify-between border-b py-5"
|
|
>
|
|
<h3 className="text-xl font-medium tracking-tight lg:text-2xll">
|
|
{award.title}
|
|
<sup className="align-top text-xs lg:text-sm">
|
|
{faOrder(index)}
|
|
</sup>
|
|
</h3>
|
|
<a
|
|
href={award.url}
|
|
className="text-sm tracking-tighter text-foreground/30 hover:text-foreground"
|
|
>
|
|
مشاهده جایزه
|
|
</a>
|
|
</li>
|
|
))}
|
|
<motion.div
|
|
className="pointer-events-none absolute top-0 inset-s-0 size-40 border"
|
|
style={{
|
|
x: xSpring,
|
|
y: ySpring,
|
|
opacity: opacity,
|
|
scale: scaleSpring,
|
|
}}
|
|
>
|
|
<img
|
|
src={awards[currentIndex].image}
|
|
alt={awards[currentIndex].title}
|
|
className="h-full w-full object-cover"
|
|
/>
|
|
</motion.div>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
);
|
|
};
|
|
|
|
export { Awards5 };
|