Add test client component

packages/demo-app/app/page.tsx

@@ -6,10 +6,10 @@ import { Card } from "@/components/card"
 export default function Home() {
   return (
     <div>
+      <h1 className="text-2xl font-bold text-center my-4">
+        Nuka Carousel Demo App
+      </h1>
       <Nuka>
-        <h1 className="text-2xl font-bold text-center my-4">
-          Nuka Carousel Demo App
-        </h1>
         <Card className="bg-amber-400 text-amber-700">Card 1</Card>
         <Card className="bg-indigo-400 text-indigo-800">Card 2</Card>
         <Card className="bg-green-400 text-green-800">Card 3</Card>

packages/nuka/src/index.tsx

@@ -1,12 +1,21 @@
 import { PropsWithChildren } from "react"
-import clsx from "clsx"
+import { styles } from "./styles"
+import { Test } from "./test"
 
 export type NukaProps = PropsWithChildren<{
   className?: string
 }>
 
 const Nuka = ({ children, className }: NukaProps) => (
-  <div className={clsx(className, "")}>{children}</div>
+  <div className={className} style={styles.container}>
+    {Array.isArray(children) &&
+      children.map((card, index) => (
+        <div style={styles.card} key={`card-${index}`}>
+          {card}
+          <Test />
+        </div>
+      ))}
+  </div>
 )
 
 export default Nuka

packages/nuka/src/styles.ts

@@ -0,0 +1,15 @@
+import { CSSProperties } from "react"
+
+export const styles: Record<string, CSSProperties | Record<string, string>> = {
+  container: {
+    "scroll-snap-type": "x mandatory",
+    "overflow-x": "scroll",
+    display: "flex",
+    width: 500,
+  },
+  card: {
+    "scroll-snap-align": "center",
+    "flex-shrink": "0",
+    width: 500,
+  },
+}

packages/nuka/src/test.tsx

@@ -0,0 +1,13 @@
+"use client"
+
+import { useState } from "react"
+
+export const Test = () => {
+  const [counter, setCounter] = useState(0)
+  return (
+    <div>
+      <button onClick={() => setCounter(counter + 1)}>INCREMENT</button>
+      {counter}
+    </div>
+  )
+}