marquee

1"use client";
2 
3import type { HTMLAttributes } from "react";
4import type { MarqueeProps as FastMarqueeProps } from "react-fast-marquee";
5import FastMarquee from "react-fast-marquee";
6import { cn } from "@/lib/utils";
7 
8export type MarqueeProps = HTMLAttributes<HTMLDivElement>;
9 
10export const Marquee = ({ className, ...props }: MarqueeProps) => (
11  <div
12    className={cn("relative w-full overflow-hidden", className)}
13    {...props}
14  />
15);
16 
17export type MarqueeContentProps = FastMarqueeProps;
18 
19export const MarqueeContent = ({
20  loop = 0,
21  autoFill = true,
22  pauseOnHover = true,
23  ...props
24}: MarqueeContentProps) => (
25  <FastMarquee
26    autoFill={autoFill}
27    loop={loop}
28    pauseOnHover={pauseOnHover}
29    {...props}
30  />
31);
32 
33export type MarqueeFadeProps = HTMLAttributes<HTMLDivElement> & {
34  side: "left" | "right";
35};
36 
37export const MarqueeFade = ({
38  className,
39  side,
40  ...props
41}: MarqueeFadeProps) => (
42  <div
43    className={cn(
44      "absolute top-0 bottom-0 z-10 h-full w-24 from-background to-transparent",
45      side === "left" ? "left-0 bg-gradient-to-r" : "right-0 bg-gradient-to-l",
46      className
47    )}
48    {...props}
49  />
50);
51 
52export type MarqueeItemProps = HTMLAttributes<HTMLDivElement>;
53 
54export const MarqueeItem = ({ className, ...props }: MarqueeItemProps) => (
55  <div
56    className={cn("mx-2 flex-shrink-0 object-contain", className)}
57    {...props}
58  />
59);