Skip to content

Commit d962e8e

Browse files
corwintinescorwintines
committed
carousel refactor setup
1 parent 8c19393 commit d962e8e

File tree

5 files changed

+423
-80
lines changed

5 files changed

+423
-80
lines changed

‎app/[locale]/roadmap/_components/ReleaseCarousel.tsx

Lines changed: 127 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,30 @@
11
"use client"
22

3-
import { useRef, useState } from "react"
4-
import { SwiperRef } from "swiper/react"
3+
import { useEffect, useState } from "react"
54

6-
import { ChevronNext, ChevronPrev } from "@/components/Chevron"
7-
import { Image } from "@/components/Image"
8-
import { Button, ButtonLink } from "@/components/ui/buttons/Button"
9-
import { Swiper, SwiperContainer, SwiperSlide } from "@/components/ui/swiper"
10-
11-
import { cn } from "@/lib/utils/cn"
5+
// import { Image } from "@/components/Image"
6+
import {
7+
Carousel,
8+
type CarouselApi,
9+
CarouselContent,
10+
CarouselItem,
11+
CarouselNext,
12+
CarouselPrevious,
13+
} from "@/components/ui/carousel"
1214

15+
// import { cn } from "@/lib/utils/cn"
1316
import { releasesData } from "@/data/roadmap/releases"
1417

15-
const formatReleaseDate = (date: string) => {
16-
if (/^\d{4}$/.test(date)) {
17-
return date
18-
}
19-
return new Date(date).toLocaleDateString("en-US", {
20-
month: "long",
21-
day: "numeric",
22-
year: "numeric",
23-
})
24-
}
18+
// const formatReleaseDate = (date: string) => {
19+
// if (/^\d{4}$/.test(date)) {
20+
// return date
21+
// }
22+
// return new Date(date).toLocaleDateString("en-US", {
23+
// month: "long",
24+
// day: "numeric",
25+
// year: "numeric",
26+
// })
27+
// }
2528

2629
const findLatestReleaseIndex = () => {
2730
const today = new Date()
@@ -51,62 +54,115 @@ const findLatestReleaseIndex = () => {
5154
}
5255

5356
const ReleaseCarousel = () => {
54-
const swiperRef = useRef<SwiperRef>(null)
55-
const swiperRef2 = useRef<SwiperRef>(null)
56-
const containerRef = useRef<HTMLDivElement>(null)
57-
const containerRef2 = useRef<HTMLDivElement>(null)
58-
const [activeSlide, setActiveSlide] = useState(findLatestReleaseIndex())
59-
const pastReleases = releasesData.filter(
60-
(release) => release.releaseDate < new Date().toISOString().split("T")[0]
61-
)
57+
const [api1, setApi1] = useState<CarouselApi>()
58+
const [api2, setApi2] = useState<CarouselApi>()
6259

63-
const PreviousButton = () => {
64-
return (
65-
<Button
66-
variant={"outline"}
67-
size="xs"
68-
className="h-8 w-8 rounded-full"
69-
onClick={() => {
70-
swiperRef.current?.swiper.slidePrev()
71-
swiperRef2.current?.swiper.slidePrev()
72-
}}
73-
disabled={activeSlide === 0}
74-
>
75-
<ChevronPrev className="h-8 w-8" />
76-
</Button>
77-
)
78-
}
60+
useEffect(() => {
61+
if (!api1 || !api2) {
62+
return
63+
}
7964

80-
const NextButton = () => {
81-
return (
82-
<Button
83-
variant={"outline"}
84-
size="xs"
85-
className="h-8 w-8 rounded-full"
86-
onClick={() => {
87-
swiperRef.current?.swiper.slideNext()
88-
swiperRef2.current?.swiper.slideNext()
89-
}}
90-
disabled={activeSlide === releasesData.length - 1}
91-
>
92-
<ChevronNext className="h-8 w-8" />
93-
</Button>
94-
)
95-
}
65+
api1.on("select", () => {
66+
api2.scrollTo(api1.selectedScrollSnap())
67+
})
68+
69+
api2.on("select", () => {
70+
api1.scrollTo(api2.selectedScrollSnap())
71+
})
72+
}, [api1, api2])
9673

9774
return (
98-
<div className="flex w-full flex-col gap-6 rounded-2xl bg-background-highlight p-6">
99-
<div className="flex w-full flex-row items-center justify-between gap-2">
75+
<div className="w-full max-w-[100vw] overflow-hidden">
76+
<div className="mx-auto w-full max-w-screen-2xl px-4 sm:px-6">
77+
<div className="w-full rounded-2xl bg-background-highlight py-6">
78+
<div className="flex flex-col gap-6">
79+
{/* First Carousel */}
80+
<Carousel
81+
setApi={setApi1}
82+
className="w-full px-16"
83+
opts={{
84+
align: "center",
85+
containScroll: false,
86+
loop: false,
87+
startIndex: findLatestReleaseIndex(),
88+
}}
89+
>
90+
<CarouselContent>
91+
{releasesData.map((release) => (
92+
<CarouselItem
93+
key={release.releaseName}
94+
className="w-full lg:basis-1/3"
95+
>
96+
<div className="flex w-full flex-col items-center justify-center bg-blue-400">
97+
<p>{release.releaseName}</p>
98+
</div>
99+
</CarouselItem>
100+
))}
101+
</CarouselContent>
102+
<div className="lg:hidden">
103+
<CarouselPrevious />
104+
<CarouselNext />
105+
</div>
106+
</Carousel>
107+
108+
{/* Second Carousel */}
109+
<Carousel
110+
setApi={setApi2}
111+
className="w-full px-4 lg:px-16"
112+
opts={{
113+
align: "center",
114+
containScroll: false,
115+
loop: false,
116+
startIndex: findLatestReleaseIndex(),
117+
}}
118+
>
119+
<CarouselContent>
120+
{releasesData.map((release) => (
121+
<CarouselItem
122+
key={release.releaseName}
123+
className="w-full pl-4"
124+
>
125+
<div className="flex w-full flex-col items-center justify-center bg-red-500">
126+
<p>{release.releaseDate}</p>
127+
</div>
128+
</CarouselItem>
129+
))}
130+
</CarouselContent>
131+
<div className="hidden lg:block">
132+
<CarouselPrevious />
133+
<CarouselNext />
134+
</div>
135+
</Carousel>
136+
</div>
137+
</div>
138+
</div>
139+
</div>
140+
)
141+
}
142+
143+
export default ReleaseCarousel
144+
145+
{
146+
/* <div className="gap-6 rounded-2xl bg-background-highlight p-6">
147+
<div className="items-center justify-between gap-2">
100148
<div className="flex lg:hidden">
101149
<PreviousButton />
102150
</div>
103-
<SwiperContainer className="w-full overflow-hidden" ref={containerRef2}>
151+
<div className="flex flex-1">
152+
<SwiperContainer className="" ref={containerRef2}>
104153
<Swiper
105-
slidesPerView={3}
106154
spaceBetween={0}
107155
ref={swiperRef2}
108156
initialSlide={activeSlide}
109157
centeredSlides={true}
158+
breakpoints={{
159+
320: {
160+
slidesPerView: 1,
161+
},
162+
768: {
163+
slidesPerView: 3,
164+
},
165+
}}
110166
>
111167
{releasesData.map((release, index) => {
112168
const releaseDate = new Date(release.releaseDate)
@@ -119,7 +175,7 @@ const ReleaseCarousel = () => {
119175
return (
120176
<SwiperSlide
121177
key={release.releaseName}
122-
className="!w-1/3 items-center justify-center text-center"
178+
className="items-center justify-center text-center md:!w-1/3"
123179
>
124180
<div className="mb-3 h-6">
125181
{pastReleases[pastReleases.length - 1].releaseDate ===
@@ -169,15 +225,18 @@ const ReleaseCarousel = () => {
169225
)}
170226
/>
171227
</div>
172-
<p className="text-md font-bold">{release.releaseName}</p>
173-
<p className="font-mono text-sm text-body-medium">
174-
{formatReleaseDate(release.releaseDate)}
175-
</p>
228+
<div className="flex flex-col items-center justify-center text-center">
229+
<p className="text-md font-bold">{release.releaseName}</p>
230+
<p className="font-mono text-sm text-body-medium">
231+
{formatReleaseDate(release.releaseDate)}
232+
</p>
233+
</div>
176234
</SwiperSlide>
177235
)
178236
})}
179237
</Swiper>
180238
</SwiperContainer>
239+
</div>
181240
<div className="flex lg:hidden">
182241
<NextButton />
183242
</div>
@@ -234,8 +293,5 @@ const ReleaseCarousel = () => {
234293
<NextButton />
235294
</div>
236295
</div>
237-
</div>
238-
)
296+
</div> */
239297
}
240-
241-
export default ReleaseCarousel

‎app/[locale]/roadmap/_components/roadmap.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -154,7 +154,7 @@ const RoadmapPage = () => {
154154
<div className="flex flex-col gap-16">
155155
<HubHero {...heroContent} />
156156

157-
<div className="flex w-full px-8 py-4">
157+
<div className="py-4">
158158
<ReleaseCarousel />
159159
</div>
160160

‎package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@
4242
"@radix-ui/react-radio-group": "^1.2.0",
4343
"@radix-ui/react-scroll-area": "^1.2.2",
4444
"@radix-ui/react-select": "^2.1.1",
45-
"@radix-ui/react-slot": "^1.1.0",
45+
"@radix-ui/react-slot": "^1.2.0",
4646
"@radix-ui/react-switch": "^1.1.0",
4747
"@radix-ui/react-tabs": "^1.1.0",
4848
"@radix-ui/react-tooltip": "^1.1.2",
@@ -56,6 +56,7 @@
5656
"class-variance-authority": "^0.7.0",
5757
"clsx": "^2.1.1",
5858
"cmdk": "^1.0.0",
59+
"embla-carousel-react": "^8.6.0",
5960
"ethereum-blockies-base64": "^1.0.2",
6061
"framer-motion": "^10.13.0",
6162
"gray-matter": "^4.0.3",

0 commit comments

Comments
 (0)