Marquee Demo

1import { Marquee } from "../ui/marquee";
2 
3export const MarqueeDemo = () => {
4  return (
5    <div className="flex flex-col max-w-4xl mx-auto w-full overflow-hidden">
6      <h1 className="text-2xl font-bold mb-10 text-center">Marquee</h1>
7 
8      <div className="overflow-hidden flex items-center lg:max-w-xl 2xl:max-w-4xl mx-auto">
9        <Marquee
10          speed={30}
11          direction="horizontal"
12          fadeEdges={true}
13          pauseOnTap={true}
14          speedOnHover={15}
15          className="h-40"
16        >
17          {/* React */}
18          <div className="flex items-center justify-center p-6 rounded-lg h-32 w-32">
19            <svg
20              role="img"
21              viewBox="0 0 32 32"
22              xmlns="http://www.w3.org/2000/svg"
23              aria-label="React"
24              className="size-20 text-cyan-400"
25              fill="currentColor"
26            >
27              <title>React</title>
28// … truncated