Skip to content

Commit 79277d6

Browse files
corwintinescorwintines
committed
roadmap carousel implemented
1 parent 1248abf commit 79277d6

File tree

1 file changed

+35
-157
lines changed

1 file changed

+35
-157
lines changed

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

Lines changed: 35 additions & 157 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,8 @@
22

33
import { useEffect, useState } from "react"
44

5-
// import { Image } from "@/components/Image"
5+
import { Image } from "@/components/Image"
6+
import { ButtonLink } from "@/components/ui/buttons/Button"
67
import {
78
Carousel,
89
type CarouselApi,
@@ -219,8 +220,39 @@ const ReleaseCarousel = () => {
219220
key={release.releaseName}
220221
className="w-full pl-4"
221222
>
222-
<div className="flex w-full flex-col items-center justify-center bg-red-500">
223-
<p>{release.releaseDate}</p>
223+
<div className="flex w-full flex-col gap-6 lg:flex-row">
224+
<div className="w-full rounded-2xl lg:max-w-[351px]">
225+
<Image
226+
src={release.image}
227+
alt={release.releaseName}
228+
className="h-[240px] rounded-2xl object-cover md:h-[266px] lg:h-[551px]"
229+
/>
230+
</div>
231+
<div className="flex flex-col gap-8">
232+
<div>
233+
<h2 className="text-4xl font-bold lg:text-6xl">
234+
{release.releaseName}
235+
</h2>
236+
<p className="text-md">
237+
{formatReleaseDate(release.releaseDate)}
238+
</p>
239+
</div>
240+
241+
<div>
242+
<p className="mb-3 text-xl font-bold">
243+
Main features
244+
</p>
245+
<div className="flex flex-col gap-4">
246+
{release.content.map((item) => item)}
247+
</div>
248+
</div>
249+
<ButtonLink
250+
href={release.href}
251+
className="w-full lg:w-fit"
252+
>
253+
Learn more
254+
</ButtonLink>
255+
</div>
224256
</div>
225257
</CarouselItem>
226258
))}
@@ -238,157 +270,3 @@ const ReleaseCarousel = () => {
238270
}
239271

240272
export default ReleaseCarousel
241-
242-
{
243-
/* <div className="gap-6 rounded-2xl bg-background-highlight p-6">
244-
<div className="items-center justify-between gap-2">
245-
<div className="flex lg:hidden">
246-
<PreviousButton />
247-
</div>
248-
<div className="flex flex-1">
249-
<SwiperContainer className="" ref={containerRef2}>
250-
<Swiper
251-
spaceBetween={0}
252-
ref={swiperRef2}
253-
initialSlide={activeSlide}
254-
centeredSlides={true}
255-
breakpoints={{
256-
320: {
257-
slidesPerView: 1,
258-
},
259-
768: {
260-
slidesPerView: 3,
261-
},
262-
}}
263-
>
264-
{releasesData.map((release, index) => {
265-
const releaseDate = new Date(release.releaseDate)
266-
const today = new Date()
267-
const twoMonthsFromNow = new Date()
268-
twoMonthsFromNow.setMonth(today.getMonth() + 2)
269-
const nextRelease =
270-
releaseDate > today && releaseDate <= twoMonthsFromNow
271-
272-
return (
273-
<SwiperSlide
274-
key={release.releaseName}
275-
className="items-center justify-center text-center md:!w-1/3"
276-
>
277-
<div className="mb-3 h-6">
278-
{pastReleases[pastReleases.length - 1].releaseDate ===
279-
release.releaseDate && (
280-
<div className="m-auto w-fit rounded-lg bg-primary-low-contrast px-2 py-1">
281-
<p className="text-sm font-bold">In production</p>
282-
</div>
283-
)}
284-
{nextRelease && (
285-
<div className="m-auto w-fit rounded-lg bg-warning-light px-2 py-1">
286-
<p className="text-sm font-bold">Coming soon</p>
287-
</div>
288-
)}
289-
</div>
290-
<div className="flex w-full items-center justify-center text-center">
291-
<div
292-
className={cn(
293-
"flex h-1 flex-1",
294-
index !== 0
295-
? nextRelease
296-
? "bg-gradient-to-r from-primary to-primary-low-contrast"
297-
: release.releaseDate <
298-
new Date().toISOString().split("T")[0]
299-
? "bg-primary"
300-
: "bg-primary-low-contrast"
301-
: "bg-transparent"
302-
)}
303-
/>
304-
<div
305-
className={cn(
306-
"h-7 w-7 rounded-full",
307-
release.releaseDate <
308-
new Date().toISOString().split("T")[0]
309-
? "bg-primary"
310-
: "bg-primary-low-contrast",
311-
nextRelease && "border-2 border-primary bg-background"
312-
)}
313-
/>
314-
<div
315-
className={cn(
316-
"flex h-1 flex-1",
317-
index !== releasesData.length - 1
318-
? index < findLatestReleaseIndex()
319-
? "bg-primary"
320-
: "bg-primary-low-contrast"
321-
: "bg-transparent"
322-
)}
323-
/>
324-
</div>
325-
<div className="flex flex-col items-center justify-center text-center">
326-
<p className="text-md font-bold">{release.releaseName}</p>
327-
<p className="font-mono text-sm text-body-medium">
328-
{formatReleaseDate(release.releaseDate)}
329-
</p>
330-
</div>
331-
</SwiperSlide>
332-
)
333-
})}
334-
</Swiper>
335-
</SwiperContainer>
336-
</div>
337-
<div className="flex lg:hidden">
338-
<NextButton />
339-
</div>
340-
</div>
341-
<div className="flex max-w-full flex-row items-center justify-between gap-8">
342-
<div className="hidden lg:flex">
343-
<PreviousButton />
344-
</div>
345-
<SwiperContainer className="!w-full overflow-hidden" ref={containerRef}>
346-
<Swiper
347-
slidesPerView="auto"
348-
ref={swiperRef}
349-
onSlideChange={(swiper) => {
350-
setActiveSlide(swiper.activeIndex)
351-
}}
352-
initialSlide={activeSlide}
353-
>
354-
{releasesData.map((release) => (
355-
<SwiperSlide key={release.releaseName}>
356-
<div className="flex w-full flex-col gap-6 lg:flex-row">
357-
<div className="w-full rounded-2xl lg:max-w-[351px]">
358-
<Image
359-
src={release.image}
360-
alt={release.releaseName}
361-
className="h-[240px] rounded-2xl object-cover md:h-[266px] lg:h-[551px]"
362-
/>
363-
</div>
364-
<div className="flex flex-col gap-8">
365-
<div>
366-
<h2 className="text-4xl font-bold lg:text-6xl">
367-
{release.releaseName}
368-
</h2>
369-
<p className="text-md">
370-
{formatReleaseDate(release.releaseDate)}
371-
</p>
372-
</div>
373-
374-
<div>
375-
<p className="mb-3 text-xl font-bold">Main features</p>
376-
<div className="flex flex-col gap-4">
377-
{release.content.map((item) => item)}
378-
</div>
379-
</div>
380-
<ButtonLink href={release.href} className="w-full lg:w-fit">
381-
Learn more
382-
</ButtonLink>
383-
</div>
384-
</div>
385-
</SwiperSlide>
386-
))}
387-
</Swiper>
388-
</SwiperContainer>
389-
<div className="hidden lg:flex">
390-
<NextButton />
391-
</div>
392-
</div>
393-
</div> */
394-
}

0 commit comments

Comments
 (0)