fix(docs): Animation Variants codeblock

ruru-m07 · Aug 17, 2024 · 2563cc9 · 2563cc9
1 parent 39a3aba
commit 2563cc9
Showing 1 changed file with 44 additions and 0 deletions.
diff --git a/apps/www/content/docs/components/select.mdx b/apps/www/content/docs/components/select.mdx
@@ -353,7 +353,51 @@ The `Select` component supports two animation variants: `zoom`, `scaleBounce` Et
   <SelectAnimationVariants />
 </Tab>
 <Tab className={"-mt-8"} value="Code">
+```tsx
+"use client";
 
+import React from "react";
+import {
+  Select,
+  selectAnimationVariants,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+} from "ruru-ui/components/select";
+
+const SelectAnimationVariants = () => {
+  return (
+    <div className="py-4 grid grid-cols-3 place-items-center gap-10">
+      {Object.keys(selectAnimationVariants).map((variantKey: any, index) => (
+        <div key={index} style={{ marginBottom: "20px" }}>
+          <Select defaultValue={variantKey}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Select a fruit" />
+            </SelectTrigger>
+            <SelectContent variants={variantKey}>
+              <SelectGroup>
+                <SelectLabel>{variantKey}</SelectLabel>
+                <SelectSeparator />
+                <SelectItem value="banana">Banana</SelectItem>
+                <SelectItem value="blueberry">Blueberry</SelectItem>
+                <SelectItem value={variantKey}>{variantKey}</SelectItem>
+                <SelectItem value="grapes">Grapes</SelectItem>
+                <SelectItem value="pineapple">Pineapple</SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default SelectAnimationVariants;
+```
 </Tab>
 </Tabs>