初步设计轮播图重构

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(

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<CarouselApi>()
+  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 (
+    <div className={cn("relative w-full h-full", className)}>
+      <Carousel
+        opts={{ loop: true }}
+        plugins={[Autoplay({ delay: autoplayDelay, stopOnInteraction: false })]}
+        setApi={setApi}
+        className="w-full h-full"
+      >
+        <CarouselContent className={cn("h-full w-full -ml-0", contentClassName)}>
+          {slides.map((slide, index) => (
+            <CarouselItem
+              key={slide.key ?? index}
+              className={cn("w-full h-full pl-0", itemClassName)}
+            >
+              <CardContent className="p-0 w-full h-full m-0">{slide.content}</CardContent>
+            </CarouselItem>
+          ))}
+        </CarouselContent>
+
+        {showControls && (
+          <>
+            <CarouselPrevious className="absolute left-2 top-1/2 -translate-y-1/2 z-10" />
+            <CarouselNext className="absolute right-2 top-1/2 -translate-y-1/2 z-10" />
+          </>
+        )}
+      </Carousel>
+
+      {showIndicators && (
+        <div className="absolute bottom-4 right-4 flex gap-2 z-10">
+          {Array.from({ length: count }).map((_, index) => (
+            <button
+              key={index}
+              onClick={() => api?.scrollTo(index)}
+              className={cn(
+                "transition-colors bg-white/50 hover:bg-white",
+                indicatorVariant === "dot" ? "h-2 w-2 rounded-full" : "h-2 w-8 rounded",
+                index === current && "bg-white"
+              )}
+              aria-label={`第 ${index + 1} 张`}
+            />
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}