chore(website): add both render-context inputs for /shadcn example

guilhermerodz · Mar 16, 2024 · d9f9c70 · d9f9c70
1 parent 5bbfb20
commit d9f9c70
Showing 1 changed file with 21 additions and 20 deletions.
diff --git a/apps/website/src/app/(local-pages)/shadcn/page.tsx b/apps/website/src/app/(local-pages)/shadcn/page.tsx
@@ -3,6 +3,7 @@
 import {
   InputOTP,
   InputOTPGroup,
+  InputOTPRenderSlot,
   InputOTPSeparator,
   InputOTPSlot,
 } from '@/components/ui/input-otp'
@@ -13,42 +14,42 @@ export default function ShadcnPage() {
 
   return (
     <form className="container relative flex-1 flex flex-col justify-center items-center">
-      {/* With Context API */}
-      <InputOTP value={value} onChange={setValue} maxLength={6}>
-        <InputOTPGroup>
-            <InputOTPSlot index={0} />
-            <InputOTPSlot index={1} />
-            <InputOTPSlot index={2} />
-        </InputOTPGroup>
-        <InputOTPSeparator />
-        <InputOTPGroup>
-            <InputOTPSlot index={3} />
-            <InputOTPSlot index={4} />
-            <InputOTPSlot index={5} />
-        </InputOTPGroup>
-      </InputOTP>
-
-      {/* Previously with render={() => {}} prop (still supported through official lib) */}
-      {/* <InputOTP
+      {/* With Render prop */}
+      <InputOTP
         value={value}
         onChange={setValue}
         maxLength={6}
         render={({ slots }) => (
           <>
             <InputOTPGroup>
               {slots.slice(0, 3).map((slot, index) => (
-                <InputOTPSlot key={index} {...slot} />
+                <InputOTPRenderSlot key={index} {...slot} />
               ))}
             </InputOTPGroup>
             <InputOTPSeparator />
             <InputOTPGroup>
               {slots.slice(3).map((slot, index) => (
-                <InputOTPSlot key={index} {...slot} />
+                <InputOTPRenderSlot key={index} {...slot} />
               ))}
             </InputOTPGroup>
           </>
         )}
-      /> */}
+      />
+
+      {/* With Context API */}
+      <InputOTP value={value} onChange={setValue} maxLength={6}>
+        <InputOTPGroup>
+            <InputOTPSlot index={0} />
+            <InputOTPSlot index={1} />
+            <InputOTPSlot index={2} />
+        </InputOTPGroup>
+        <InputOTPSeparator />
+        <InputOTPGroup>
+            <InputOTPSlot index={3} />
+            <InputOTPSlot index={4} />
+            <InputOTPSlot index={5} />
+        </InputOTPGroup>
+      </InputOTP>
     </form>
   )
 }