基础

components/kibo-ui/marquee/index.tsx

@@ -0,0 +1,59 @@
+"use client";
+
+import type { HTMLAttributes } from "react";
+import type { MarqueeProps as FastMarqueeProps } from "react-fast-marquee";
+import FastMarquee from "react-fast-marquee";
+import { cn } from "@/lib/utils";
+
+export type MarqueeProps = HTMLAttributes<HTMLDivElement>;
+
+export const Marquee = ({ className, ...props }: MarqueeProps) => (
+  <div
+    className={cn("relative w-full overflow-hidden", className)}
+    {...props}
+  />
+);
+
+export type MarqueeContentProps = FastMarqueeProps;
+
+export const MarqueeContent = ({
+  loop = 0,
+  autoFill = true,
+  pauseOnHover = true,
+  ...props
+}: MarqueeContentProps) => (
+  <FastMarquee
+    autoFill={autoFill}
+    loop={loop}
+    pauseOnHover={pauseOnHover}
+    {...props}
+  />
+);
+
+export type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {
+  side: "left" | "right";
+};
+
+export const MarqueeFade = ({
+  className,
+  side,
+  ...props
+}: MarqueeFadeProps) => (
+  <div
+    className={cn(
+      "absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent",
+      side === "left" ? "left-0 bg-gradient-to-r" : "right-0 bg-gradient-to-l",
+      className
+    )}
+    {...props}
+  />
+);
+
+export type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;
+
+export const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (
+  <div
+    className={cn("mx-2 flex-shrink-0 object-contain", className)}
+    {...props}
+  />
+);