chore(website): expand playground

Author: guilhermerodz

apps/website/src/app/(local-pages)/shadcn/static/client-component.tsx

@@ -0,0 +1,38 @@
+'use client'
+
+import {
+  InputOTP,
+  InputOTPGroup,
+  InputOTPSeparator,
+  InputOTPSlot,
+} from '@/components/ui/input-otp'
+import React from 'react'
+
+export function ClientComp() {
+  const [value, setValue] = React.useState('')
+
+  return (
+    <form className="container relative flex-1 flex flex-col justify-center items-center">
+      <InputOTP
+        value={value}
+        onChange={setValue}
+        maxLength={6}
+        render={({ slots }) => (
+          <>
+            <InputOTPGroup>
+              {slots.slice(0, 3).map((slot, index) => (
+                <InputOTPSlot key={index} {...slot} />
+              ))}{' '}
+            </InputOTPGroup>
+            <InputOTPSeparator />
+            <InputOTPGroup>
+              {slots.slice(3).map((slot, index) => (
+                <InputOTPSlot key={index} {...slot} />
+              ))}
+            </InputOTPGroup>
+          </>
+        )}
+      />
+    </form>
+  )
+}

apps/website/src/app/(local-pages)/shadcn/static/page.tsx

@@ -0,0 +1,11 @@
+'use server'
+
+import { ClientComp } from './client-component'
+
+export default async function StaticPage() {
+  return (
+    <>
+      <ClientComp />
+    </>
+  )
+}

apps/website/src/app/globals.css

@@ -49,6 +49,30 @@
   }
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --background: 240 10% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 240 10% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 240 10% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 240 5.9% 10%;
+    --secondary: 240 3.7% 15.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 240 3.7% 15.9%;
+    --muted-foreground: 240 5% 64.9%;
+    --accent: 240 3.7% 15.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 85.7% 97.3%;
+    --border: 240 3.7% 15.9%;
+    --input: 240 3.7% 15.9%;
+    --ring: 240 4.9% 83.9%;
+  }
+}
+
 @layer base {
   * {
     @apply border-border;