96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
"use client";
|
|
|
|
import Image from "next/image";
|
|
import { useRef, useState } from "react";
|
|
import { Card, Typography } from "poyraz-ui/atoms";
|
|
import { NewsCard } from "poyraz-ui/molecules";
|
|
import { useTranslations } from "next-intl";
|
|
|
|
type HomeHeroProps = {
|
|
news: {
|
|
id: string;
|
|
category: string;
|
|
title: string;
|
|
date: string;
|
|
image: string;
|
|
href: string;
|
|
}[];
|
|
};
|
|
|
|
export function HomeHero({ news }: HomeHeroProps) {
|
|
const [frame, setFrame] = useState<1 | 2>(1);
|
|
const intervalRef = useRef<ReturnType<typeof setInterval> | null>(null);
|
|
const t = useTranslations("Home");
|
|
|
|
const handleMouseEnter = () => {
|
|
if (intervalRef.current) return;
|
|
|
|
intervalRef.current = setInterval(() => {
|
|
setFrame((prev) => (prev === 1 ? 2 : 1));
|
|
}, 260);
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
if (intervalRef.current) {
|
|
clearInterval(intervalRef.current);
|
|
intervalRef.current = null;
|
|
}
|
|
setFrame(1);
|
|
};
|
|
|
|
return (
|
|
<section className="grid gap-3 md:h-65 md:grid-cols-2">
|
|
<div className="grid gap-2 md:grid-rows-3">
|
|
{news.map((item) => (
|
|
<div key={item.id}>
|
|
<NewsCard
|
|
className="rounded-sm border-border md:h-full"
|
|
category={item.category}
|
|
title={item.title}
|
|
date={item.date}
|
|
image={item.image}
|
|
href={item.href}
|
|
/>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Card className="grid grid-cols-[112px_1fr] items-stretch gap-2 rounded-sm border-border sm:grid-cols-[168px_1fr] md:h-full">
|
|
<div className="flex flex-col justify-center gap-1 px-3 py-2">
|
|
<div className="flex items-center gap-1">
|
|
<Typography variant="h2" className="leading-tight">
|
|
Poyraz{" "}
|
|
<span className="font-secondary text-red-600">Avsever</span>
|
|
</Typography>
|
|
</div>
|
|
<Typography variant="small" className="text-xs leading-relaxed text-muted-foreground sm:text-sm">
|
|
{t.rich("role", {
|
|
strong: (chunks) => (
|
|
<strong className="font-semibold text-foreground">{chunks}</strong>
|
|
),
|
|
})}
|
|
</Typography>
|
|
</div>
|
|
|
|
<div className="relative h-full overflow-hidden">
|
|
<div
|
|
className="relative h-full w-full"
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<Image
|
|
src={frame === 1 ? "/images/hero1.png" : "/images/hero2.png"}
|
|
alt="Poyraz Avsever"
|
|
width={240}
|
|
height={240}
|
|
sizes="(max-width: 768px) 80px, 192px"
|
|
priority
|
|
className="absolute right-0 bottom-0 h-auto w-20 object-contain md:w-48"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</Card>
|
|
</section>
|
|
);
|
|
}
|