Add support for multiple speeds for Marquee (#18)

Author: marcoacierno

src/marquee/marquee.stories.tsx

@@ -3,6 +3,23 @@ import { Marquee } from "./marquee";
 
 export default {
   title: "Marquee",
+  argTypes: {
+    text: {
+      defaultValue: "Hello there 👋",
+      control: {
+        type: "text",
+      },
+    },
+    speed: {
+      defaultValue: "medium",
+      control: {
+        type: "select",
+        options: ["slow", "medium"],
+      },
+    },
+  },
 };
 
-export const Standard = () => <Marquee>Hello there 👋</Marquee>;
+export const Standard = ({ text, ...props }) => (
+  <Marquee {...props}>{text}</Marquee>
+);

src/marquee/marquee.tsx

@@ -1,13 +1,24 @@
 import React from "react";
+import clsx from "clsx";
 
 type Props = {
   children: React.ReactNode;
+  speed?: "slow" | "medium";
   separator?: string | React.ReactNode;
 };
 
-export const Marquee = ({ children, separator = "/" }: Props) => (
+export const Marquee = ({
+  children,
+  speed = "medium",
+  separator = "/",
+}: Props) => (
   <div className="overflow-hidden w-full">
-    <div className="motion-safe:animate-marquee p-8 text-3xl whitespace-nowrap">
+    <div
+      className={clsx("p-8 text-3xl whitespace-nowrap", {
+        "motion-safe:animate-marquee-slow": speed === "slow",
+        "motion-safe:animate-marquee-medium": speed === "medium",
+      })}
+    >
       <div className="inline-block whitespace-nowrap">{children}</div>
 
       {new Array(20).fill(null).map((_, index) => (

tailwind.config.js

@@ -40,7 +40,8 @@ module.exports = {
     },
     extend: {
       animation: {
-        marquee: "marquee 20s linear infinite",
+        "marquee-slow": "marquee 60s linear infinite",
+        "marquee-medium": "marquee 20s linear infinite",
       },
       keyframes: {
         marquee: {