Creepso/smov
1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2026-01-11 20:10:16 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Flare carousel nav buttons

Browse source
This commit is contained in:
Pas 2025-02-25 17:22:29 -07:00
parent eed1dd1177
commit f38dd19a68
1 changed files with 23 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/pages/discover/components/CarouselNavButtons.tsx
View file

@ -1,4 +1,5 @@
import { Icon, Icons } from "@/components/Icon";
import { Flare } from "@/components/utils/Flare";
interface CarouselNavButtonsProps {
categorySlug: string;
@ -35,20 +36,34 @@ export function CarouselNavButtons({
className="absolute left-12 top-1/2 transform -translate-y-3/4 z-10"
onClick={() => handleScroll("left")}
>
<Icon
icon={Icons.CHEVRON_LEFT}
className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200"
/>
<Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
<Flare.Light
flareSize={90}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-full group-hover:opacity-100 z-20"
/>
<Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
<Icon icon={Icons.CHEVRON_LEFT} />
</Flare.Child>
</Flare.Base>
</button>
<button
type="button"
className="absolute right-12 top-1/2 transform -translate-y-3/4 z-10"
onClick={() => handleScroll("right")}
>
<Icon
icon={Icons.CHEVRON_RIGHT}
className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full bg-search-hoverBackground active:scale-110 transition-[transform,background-color] duration-200"
/>
<Flare.Base className="group -m-[0.705em] rounded-full bg-search-hoverBackground transition-transform duration-300 focus:relative focus:z-10 hover:bg-mediaCard-hoverBackground tabbable hover:scale-110">
<Flare.Light
flareSize={90}
cssColorVar="--colors-mediaCard-hoverAccent"
backgroundClass="bg-mediaCard-hoverBackground duration-100"
className="rounded-full group-hover:opacity-100 z-20"
/>
<Flare.Child className="cursor-pointer text-white flex justify-center items-center h-10 w-10 rounded-full active:scale-110 transition-[transform,background-color] duration-200 z-30">
<Icon icon={Icons.CHEVRON_RIGHT} />
</Flare.Child>
</Flare.Base>
</button>
</>
);