From 90f772b6eb7d7eb52501a23b1f66ced7ba0db712 Mon Sep 17 00:00:00 2001 From: Win Cheng Date: Mon, 18 Nov 2024 16:13:51 -0800 Subject: [PATCH] Added gradient border and some temp images --- .../_components/Recap/RecapCarousel.tsx | 27 ++++++++++++------ public/aboutUs/Recap/carousel1.png | Bin 0 -> 478029 bytes public/aboutUs/Recap/carousel2.png | Bin 0 -> 304406 bytes public/aboutUs/Recap/carousel3.png | Bin 0 -> 229279 bytes 4 files changed, 19 insertions(+), 8 deletions(-) create mode 100644 public/aboutUs/Recap/carousel1.png create mode 100644 public/aboutUs/Recap/carousel2.png create mode 100644 public/aboutUs/Recap/carousel3.png diff --git a/app/(pages)/(about-us)/_components/Recap/RecapCarousel.tsx b/app/(pages)/(about-us)/_components/Recap/RecapCarousel.tsx index 66c2831..a339b51 100644 --- a/app/(pages)/(about-us)/_components/Recap/RecapCarousel.tsx +++ b/app/(pages)/(about-us)/_components/Recap/RecapCarousel.tsx @@ -9,11 +9,17 @@ import { CarouselNext, CarouselPrevious, } from '@/components/ui/carousel'; +import Image from 'next/image'; +import CarouselIMG1 from '@/public/aboutUs/Recap/carousel1.png'; +import CarouselIMG2 from '@/public/aboutUs/Recap/carousel2.png'; +import CarouselIMG3 from '@/public/aboutUs/Recap/carousel3.png'; export function RecapCarousel() { const [api, setApi] = React.useState(); const [current, setCurrent] = React.useState(0); + const images = [CarouselIMG1, CarouselIMG2, CarouselIMG3]; + React.useEffect(() => { if (!api) return; @@ -26,15 +32,20 @@ export function RecapCarousel() {
- {Array.from({ length: 5 }).map((_, index) => ( + {images.map((img, index) => ( -
- - - {index + 1} + +
+ + {`Carousel - -
+
+ ))} @@ -44,7 +55,7 @@ export function RecapCarousel() { {/* Indicators */}
- {Array.from({ length: 5 }).map((_, index) => ( + {images.map((_, index) => (