diff --git a/app/components/news/body/FireNews/fhyw.tsx b/app/components/news/body/FireNews/fhyw.tsx index 331a4fc..0a29978 100644 --- a/app/components/news/body/FireNews/fhyw.tsx +++ b/app/components/news/body/FireNews/fhyw.tsx @@ -1,5 +1,6 @@ import { CarouselDemo } from "@/components/Carousel"; import {FireNewsList} from "./FireNewsList"; +import { CarouselPreset } from "@/components/untils/CarouselPreset"; export function FhywPage() { return( diff --git a/app/components/untils/CarouselPreset.tsx b/app/components/untils/CarouselPreset.tsx new file mode 100644 index 0000000..a9a7c6f --- /dev/null +++ b/app/components/untils/CarouselPreset.tsx @@ -0,0 +1,96 @@ +import * as React from "react" +import Autoplay from "embla-carousel-autoplay" +import { + Carousel, + CarouselContent, + CarouselItem, + CarouselNext, + CarouselPrevious, + type CarouselApi, +} from "@/ui/carousel" +import { CardContent } from "@/ui/card" +import { cn } from "@/lib/utils" + +type Slide = { + key?: React.Key + content: React.ReactNode +} + +type CarouselPresetProps = { + slides: Slide[] + autoplayDelay?: number + showControls?: boolean + showIndicators?: boolean + indicatorVariant?: "dot" | "pill" + className?: string + contentClassName?: string + itemClassName?: string +} + +export function CarouselPreset({ + slides, + autoplayDelay = 3000, + showControls = true, + showIndicators = true, + indicatorVariant = "dot", + className, + contentClassName, + itemClassName, +}: CarouselPresetProps) { + const [api, setApi] = React.useState() + const [current, setCurrent] = React.useState(0) + const [count, setCount] = React.useState(0) + + React.useEffect(() => { + if (!api) return + setCount(api.scrollSnapList().length) + setCurrent(api.selectedScrollSnap()) + api.on("select", () => setCurrent(api.selectedScrollSnap())) + }, [api]) + + return ( +
+ + + {slides.map((slide, index) => ( + + {slide.content} + + ))} + + + {showControls && ( + <> + + + + )} + + + {showIndicators && ( +
+ {Array.from({ length: count }).map((_, index) => ( +
+ )} +
+ ) +} \ No newline at end of file