Marquee Grayscale Demo

1import Marquee from "../blocks/marquee";
2import {
3  JohnsonAndJohnsonIcon,
4  ShopifyIcon,
5  SingaporeAirlinesIcon,
6  TheWeatherCompanyIcon,
7  VercelLightIcon,
8  WixBlackIcon
9} from "@/components/icons";
10 
11export default function MarqueeGrayscaleDemo() {
12  return (
13    <Marquee grayscale={true}>
14      <div className="w-30 h-14">
15        <VercelLightIcon
16          style={{
17            width: "100%",
18            height: "100%",
19            objectFit: "contain"
20          }}
21        />
22      </div>
23      <div className="w-30 h-14">
24        <ShopifyIcon
25          style={{
26            width: "100%",
27            height: "100%",
28            objectFit: "contain"
29          }}
30        />
31      </div>
32      <div className="w-30 h-14">
33        <TheWeatherCompanyIcon
34          style={{
35            width: "100%",
36            height: "100%",
37            objectFit: "contain"
38          }}
39        />
40      </div>
41      <div className="w-30 h-5">
42        <WixBlackIcon
43          style={{
44            width: "100%",
45            height: "100%",
46            objectFit: "contain"
47          }}
48        />
49      </div>
50      <div className="w-30 h-14">
51        <JohnsonAndJohnsonIcon
52          style={{
53            width: "100%",
54            height: "100%",
55            objectFit: "contain"
56          }}
57        />
58      </div>
59      <div className="w-30 h-14">
60        <SingaporeAirlinesIcon
61          style={{
62            width: "100%",
63            height: "100%",
64            objectFit: "contain"
65          }}
66        />
67      </div>
68    </Marquee>
69  );
70}