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

💄 style: add "add to list" button to banner UI

Browse Source
This commit is contained in:
Rafi Arrafif
2026-03-26 16:50:31 +07:00
parent 73ed6ce3b8
commit 7a4c92526e
1 changed files with 14 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,6 +6,7 @@ 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"; import Link from "next/link";
import { useAuth } from "@/shared/contexts/AuthContext";
export interface HeroSwiperProps { export interface HeroSwiperProps {
data: { data: {
@ -22,6 +23,7 @@ export interface HeroSwiperProps {
} }
const HeroSwiper = (props: HeroSwiperProps) => { const HeroSwiper = (props: HeroSwiperProps) => {
const { session } = useAuth();
return ( return (
<div className="h-full rounded-lg overflow-hidden"> <div className="h-full rounded-lg overflow-hidden">
<Swiper <Swiper
@ -62,14 +64,14 @@ const HeroSwiper = (props: HeroSwiperProps) => {
<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>
<div className="flex mt-6"> <div className="flex gap-2 mt-6 h-12">
<Link <Link
href={`/media/${slide.slug}`} href={`/media/${slide.slug}`}
className="w-fit h-fit rounded-xl overflow-hidden" className="w-fit h-full rounded-xl overflow-hidden"
> >
<Button <Button
size="lg" size="lg"
className=" h-12 flex gap-2 px-4 hover:bg-neutral-950 group" className="h-full flex gap-2 px-4 hover:bg-neutral-950 group"
> >
<div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary"> <div className="bg-neutral-950 p-2 rounded-full group-hover:bg-primary">
<Icon <Icon
@ -82,6 +84,15 @@ const HeroSwiper = (props: HeroSwiperProps) => {
</span> </span>
</Button> </Button>
</Link> </Link>
{session?.user && (
<Button
variant="secondary"
className="h-full flex gap-2 px-4 rounded-xl border border-neutral-400/10 bg-neutral-950/20 hover:bg-neutral-950/40 backdrop-blur-lg text-neutral-200"
>
<Icon icon="boxicons:bookmark" className="size-6" />
<span>Add to List</span>
</Button>
)}
</div> </div>
</div> </div>
</SwiperSlide> </SwiperSlide>