refactor: remove the usage of style-jsx (and so of "use client") in <…

…Scroller/>

By moving animation into tailwind.config.js file

src/app/page.tsx → src/app/(home)/page.tsx

@@ -1,4 +1,4 @@
-import Scroller from "@/components/ui/Scroller";
+import { Scroller } from "@/components/ui";
 import { type NextPage } from "next";
 
 const Page: NextPage = () => (

src/app/ui/page.tsx

@@ -13,7 +13,7 @@ const Page: NextPage = () => {
               {buttonVariants.map((variant, index1) => (
                 <div key={index1} className="flex gap-4 p-2">
                   {buttonSizes.map((size, index2) => (
-                    <Button variant={variant} size={size as any} key={index2}>
+                    <Button variant={variant} size={size} key={index2}>
                       {variant} {size}
                     </Button>
                   ))}

src/components/ui/Scroller.tsx

@@ -1,40 +1,18 @@
-"use client";
 import clsx from "clsx";
 import { FC } from "react";
 
 export interface ScrollerProps {
   className?: string;
 }
 
-const Scroller: FC<ScrollerProps> = ({ className }) => (
+export const Scroller: FC<ScrollerProps> = ({ className }) => (
   <div
     className={clsx(
       "border-4 rounded-lg border-fg/70 border-solid h-10 w-6 p-1",
       className
     )}
   >
-    <style jsx>{`
-      @keyframes roll {
-        0% {
-          opacity: 0;
-        }
-        20% {
-          margin-top: 0;
-          opacity: 1;
-        }
-        80% {
-          margin-top: 16px;
-          opacity: 1;
-        }
-        100% {
-          opacity: 0;
-        }
-      }
-      .wheel {
-        animation: 2s infinite normal roll ease;
-      }
-    `}</style>
-    <div className="wheel bg-fg/70 w-2 h-2 rounded-full"></div>
+    <div className="animate-roll bg-fg/70 w-2 h-2 rounded-full"></div>
   </div>
 );
 export default Scroller;

src/components/ui/index.ts

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./Scroller";

tailwind.config.js

@@ -92,6 +92,19 @@ export const theme = {
       sm: "calc(var(--radius) - 4px)",
     },
   },
+  keyframes: {
+    // Used by <Scroller/> UI component
+    roll: {
+      "0%": { opacity: 0 },
+      "20%": { marginTop: "0", opacity: 1 },
+      "80%": { marginTop: "16px", opacity: 1 },
+      "100%": { opacity: 0 }
+    }
+  },
+  animation: {
+    // Used by <Scroller/> UI component
+    roll: "2s infinite normal roll ease"
+  }
 };
 export const plugins = [
   plugin(({ addBase }) => addBase(vars)),