vivy-agent/AnimeTV-Frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️ refactor: restructure hero swiper to be media-specific

Browse Source
This commit is contained in:
Rafi Arrafif
2026-03-25 19:44:54 +07:00
parent f9104c2580
commit 72f13c7c2e
1 changed files with 47 additions and 75 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
features/home/sections/Hero/components/Swiper.tsx
View File

@ -5,19 +5,19 @@ import { Button } from "@/shared/libs/shadcn/ui/button";
import { useRouter } from "next/navigation";
import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react";
import { Icon } from "@iconify/react";
export interface HeroSwiperProps {
data: {
id: string;
isClickable: boolean;
title: string;
tags: string[];
description: string;
buttonContent: string;
buttonLink: string;
slug: string;
imageUrl: string;
startDate: string;
endDate: string;
synopsis: string;
genres: {
slug: string;
name: string;
}[];
}[];
}
@ -34,82 +34,54 @@ const HeroSwiper = (props: HeroSwiperProps) => {
autoplay={{ delay: 5000, disableOnInteraction: false }}
modules={[Autoplay, Pagination, Navigation]}
>
{props.data.map((slide) =>
slide.imageUrl ? (
// Slide with image background
<SwiperSlide key={slide.id} className="relative overflow-hidden">
<img
src={slide.imageUrl}
alt={slide.title}
className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
/>
{slide.title && slide.description && (
<div
className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
style={{
background:
"linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
}}
>
<h1 className="text-6xl font-semibold tracking-tight">
{slide.title}
</h1>
<div className="mt-4 flex gap-1.5">
{slide.tags.map((tag) => (
<Badge
className="bg-neutral-200 text-neutral-800"
key={tag}
>
{tag}
</Badge>
))}
</div>
<p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
{slide.description}
</p>
{slide.isClickable && (
<Button
size="lg"
onClick={() => router.push(slide.buttonLink)}
className="mt-6"
>
{slide.buttonContent}
</Button>
)}
</div>
)}
</SwiperSlide>
) : (
// Fallback for slides without image
<SwiperSlide
key={slide.id}
className="relative overflow-hidden bg-neutral-800 flex flex-col items-center text-center pt-18"
{props.data.map((slide) => (
<SwiperSlide key={slide.id} className="relative overflow-hidden">
<img
src={slide.imageUrl}
alt={slide.title}
className="absolute top-0 left-0 z-0 object-cover w-full h-full opacity-80"
/>
<div
className="absolute top-0 left-0 z-10 h-full w-full py-16 px-20"
style={{
background:
"linear-gradient(90deg,rgba(0, 0, 0, 0.64) 0%, rgba(0, 0, 0, 0.42) 46%, rgba(0, 0, 0, 0) 100%)",
}}
>
<h1 className="text-6xl font-semibold tracking-tight">
{slide.title}
</h1>
<div className="mt-4 flex justify-center gap-1.5">
{slide.tags.map((tag) => (
<Badge className="bg-neutral-200 text-neutral-800" key={tag}>
{tag}
<div className="mt-4 flex gap-1.5">
{slide.genres.map((genre) => (
<Badge
className="bg-neutral-200 text-neutral-800"
key={genre.slug}
>
{genre.name}
</Badge>
))}
</div>
<p className="mt-4 font-medium text-base max-w-[40vw] mx-auto">
{slide.description}
<p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
{slide.synopsis}
</p>
{slide.isClickable && (
<Button
size="lg"
onClick={() => router.push(slide.buttonLink)}
className="mt-6"
>
{slide.buttonContent}
</Button>
)}
</SwiperSlide>
),
)}
<Button
size="lg"
onClick={() => router.push(`/media/${slide.slug}`)}
className="mt-6 h-12 rounded-xl flex gap-2 px-4 hover:bg-neutral-950 group"
>
<div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
<Icon
icon="solar:play-bold"
className="text-primary group-hover:text-neutral-950"
/>
</div>
<span className="font-semibold text-neutral-950 group-hover:text-primary">
Watch Now
</span>
</Button>
</div>
</SwiperSlide>
))}
</Swiper>
</div>
);