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

🐛 fix: correct watch button and genre on swiper

Browse Source
This commit is contained in:
Rafi Arrafif
2026-03-26 15:22:01 +07:00
parent 4e5d509e99
commit 73ed6ce3b8
1 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,10 +2,10 @@
import "swiper/css";
import { Badge } from "@/shared/libs/shadcn/ui/badge";
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";
import Link from "next/link";
export interface HeroSwiperProps {
data: {
@ -22,7 +22,6 @@ export interface HeroSwiperProps {
}
const HeroSwiper = (props: HeroSwiperProps) => {
const router = useRouter();
return (
<div className="h-full rounded-lg overflow-hidden">
<Swiper
@ -53,32 +52,37 @@ const HeroSwiper = (props: HeroSwiperProps) => {
</h1>
<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>
<Link href={`/genres/${genre.slug}`} key={genre.slug}>
<Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
{genre.name}
</Badge>
</Link>
))}
</div>
<p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
{slide.synopsis}
</p>
<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 className="flex mt-6">
<Link
href={`/media/${slide.slug}`}
className="w-fit h-fit rounded-xl overflow-hidden"
>
<Button
size="lg"
className=" h-12 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>
</Link>
</div>
</div>
</SwiperSlide>
))}