Skip to content

Commit 9d499e4

Browse files
authored
Merge pull request #13931 from ethereum/ui-swiper
refactor: explode ui/swiper into compossible parts
2 parents 5efb137 + 5890726 commit 9d499e4

File tree

5 files changed

+311
-251
lines changed

5 files changed

+311
-251
lines changed

src/components/Swiper/index.tsx

Lines changed: 0 additions & 69 deletions
This file was deleted.

src/components/ui/swiper.tsx

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
import * as React from "react"
2+
import { cva, VariantProps } from "class-variance-authority"
3+
import { useTranslation } from "next-i18next"
4+
import { EffectCards, Keyboard, Navigation, Pagination } from "swiper/modules"
5+
import {
6+
Swiper as SwiperReact,
7+
type SwiperProps as SwiperReactProps,
8+
SwiperRef,
9+
SwiperSlide,
10+
} from "swiper/react"
11+
12+
import { ChevronNext, ChevronPrev } from "@/components/Chevron"
13+
14+
import { cn } from "@/lib/utils/cn"
15+
16+
import { Button, type ButtonProps } from "./buttons/Button"
17+
18+
import "swiper/css"
19+
import "swiper/css/navigation"
20+
import "swiper/css/pagination"
21+
import "swiper/css/effect-cards"
22+
23+
const SwiperContainer = React.forwardRef<
24+
HTMLDivElement,
25+
React.HTMLAttributes<HTMLDivElement>
26+
>(({ className, ...props }, ref) => (
27+
<div ref={ref} className={cn("h-fit", className)} {...props} />
28+
))
29+
SwiperContainer.displayName = "SwiperContainer"
30+
31+
const SwiperNavButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
32+
({ children, className, ...props }, ref) => (
33+
<Button
34+
ref={ref}
35+
variant="ghost"
36+
className={cn("px-2", className)}
37+
{...props}
38+
>
39+
{children}
40+
</Button>
41+
)
42+
)
43+
SwiperNavButton.displayName = "SwiperNavButton"
44+
45+
const SwiperNextButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
46+
({ children, className, ...props }, ref) => (
47+
<SwiperNavButton
48+
ref={ref}
49+
className={cn("ui-swiper-button-next", className)}
50+
{...props}
51+
>
52+
{children || <ChevronNext />}
53+
</SwiperNavButton>
54+
)
55+
)
56+
SwiperNextButton.displayName = "SwiperNextButton"
57+
58+
const SwiperPrevButton = React.forwardRef<HTMLButtonElement, ButtonProps>(
59+
({ children, className, ...props }, ref) => (
60+
<SwiperNavButton
61+
ref={ref}
62+
className={cn("ui-swiper-button-prev", className)}
63+
{...props}
64+
>
65+
{children || <ChevronPrev />}
66+
</SwiperNavButton>
67+
)
68+
)
69+
SwiperPrevButton.displayName = "SwiperPrevButton"
70+
71+
const SwiperPaginationDots = React.forwardRef<
72+
HTMLDivElement,
73+
React.HTMLAttributes<HTMLDivElement>
74+
>(({ className, ...props }, ref) => (
75+
<div
76+
ref={ref}
77+
className={cn(
78+
"ui-swiper-pagination flex w-fit flex-row",
79+
"[&_.swiper-pagination-bullet]:bg-primary-high-contrast",
80+
"[&_.swiper-pagination-bullet-active]:bg-primary-hover",
81+
className
82+
)}
83+
{...props}
84+
/>
85+
))
86+
SwiperPaginationDots.displayName = "SwiperPaginationDots"
87+
88+
const SwiperNavContainer = React.forwardRef<
89+
HTMLDivElement,
90+
React.HTMLAttributes<HTMLDivElement>
91+
>(({ className, ...props }, ref) => (
92+
<div
93+
ref={ref}
94+
className={cn(
95+
"mx-auto flex h-6 w-fit items-center gap-4 rounded-full bg-background-highlight",
96+
className
97+
)}
98+
{...props}
99+
/>
100+
))
101+
SwiperNavContainer.displayName = "SwiperNavContainer"
102+
103+
const SwiperNavigation = React.forwardRef<
104+
HTMLDivElement,
105+
React.HTMLAttributes<HTMLDivElement>
106+
>((props, ref) => (
107+
<SwiperNavContainer ref={ref} {...props}>
108+
<SwiperPrevButton />
109+
<SwiperPaginationDots />
110+
<SwiperNextButton />
111+
</SwiperNavContainer>
112+
))
113+
SwiperNavigation.displayName = "SwiperNavigation"
114+
115+
const variants = cva("!flex gap-y-6", {
116+
variants: {
117+
navigationPlacement: {
118+
top: "flex-col-reverse",
119+
bottom: "flex-col",
120+
},
121+
},
122+
defaultVariants: {
123+
navigationPlacement: "bottom",
124+
},
125+
})
126+
127+
export type SwiperProps = SwiperReactProps & VariantProps<typeof variants>
128+
const Swiper = React.forwardRef<SwiperRef, SwiperProps>(
129+
({ className, children, navigationPlacement, ...props }, ref) => {
130+
const { t } = useTranslation("common")
131+
return (
132+
<SwiperReact
133+
ref={ref}
134+
navigation={{
135+
nextEl: ".ui-swiper-button-next",
136+
prevEl: ".ui-swiper-button-prev",
137+
}}
138+
a11y={{
139+
prevSlideMessage: t("previous"),
140+
nextSlideMessage: t("next"),
141+
}}
142+
pagination={{
143+
clickable: true,
144+
el: ".ui-swiper-pagination",
145+
}}
146+
keyboard
147+
modules={[Navigation, Pagination, Keyboard, EffectCards]}
148+
slidesPerView={1}
149+
slidesPerGroup={1}
150+
lazyPreloadPrevNext={0}
151+
slideClass="swiper-slide"
152+
className={cn(variants({ navigationPlacement, className }))}
153+
{...props}
154+
>
155+
{children}
156+
</SwiperReact>
157+
)
158+
}
159+
)
160+
Swiper.displayName = "Swiper"
161+
162+
export {
163+
Swiper,
164+
SwiperContainer,
165+
SwiperNavButton,
166+
SwiperNavContainer,
167+
SwiperNavigation,
168+
SwiperNextButton,
169+
SwiperPaginationDots,
170+
SwiperPrevButton,
171+
SwiperSlide,
172+
}

0 commit comments

Comments
 (0)