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 "swiper/css";
import { Badge } from "@/shared/libs/shadcn/ui/badge"; import { Badge } from "@/shared/libs/shadcn/ui/badge";
import { Button } from "@/shared/libs/shadcn/ui/button"; import { Button } from "@/shared/libs/shadcn/ui/button";
import { useRouter } from "next/navigation";
import { Autoplay, Navigation, Pagination } from "swiper/modules"; import { Autoplay, Navigation, Pagination } from "swiper/modules";
import { Swiper, SwiperSlide } from "swiper/react"; import { Swiper, SwiperSlide } from "swiper/react";
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import Link from "next/link";
export interface HeroSwiperProps { export interface HeroSwiperProps {
data: { data: {
@ -22,7 +22,6 @@ export interface HeroSwiperProps {
} }
const HeroSwiper = (props: HeroSwiperProps) => { const HeroSwiper = (props: HeroSwiperProps) => {
const router = useRouter();
return ( return (
<div className="h-full rounded-lg overflow-hidden"> <div className="h-full rounded-lg overflow-hidden">
<Swiper <Swiper
@ -53,32 +52,37 @@ const HeroSwiper = (props: HeroSwiperProps) => {
</h1> </h1>
<div className="mt-4 flex gap-1.5"> <div className="mt-4 flex gap-1.5">
{slide.genres.map((genre) => ( {slide.genres.map((genre) => (
<Badge <Link href={`/genres/${genre.slug}`} key={genre.slug}>
className="bg-neutral-200 text-neutral-800" <Badge className="bg-neutral-100/60 backdrop-blur-lg text-neutral-800">
key={genre.slug} {genre.name}
> </Badge>
{genre.name} </Link>
</Badge>
))} ))}
</div> </div>
<p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6"> <p className="mt-4 font-medium text-base max-w-[40vw] line-clamp-6">
{slide.synopsis} {slide.synopsis}
</p> </p>
<Button <div className="flex mt-6">
size="lg" <Link
onClick={() => router.push(`/media/${slide.slug}`)} href={`/media/${slide.slug}`}
className="mt-6 h-12 rounded-xl flex gap-2 px-4 hover:bg-neutral-950 group" className="w-fit h-fit rounded-xl overflow-hidden"
> >
<div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary"> <Button
<Icon size="lg"
icon="solar:play-bold" className=" h-12 flex gap-2 px-4 hover:bg-neutral-950 group"
className="text-primary group-hover:text-neutral-950" >
/> <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
</div> <Icon
<span className="font-semibold text-neutral-950 group-hover:text-primary"> icon="solar:play-bold"
Watch Now className="text-primary group-hover:text-neutral-950"
</span> />
</Button> </div>
<span className="font-semibold text-neutral-950 group-hover:text-primary">
Watch Now
</span>
</Button>
</Link>
</div>
</div> </div>
</SwiperSlide> </SwiperSlide>
))} ))}