Updated: Drawer compononent variant code for documentation.

StaticMania · Dec 4, 2024 · a33642e · a33642e
1 parent 2658975
commit a33642e
Showing 1 changed file with 29 additions and 27 deletions.
diff --git a/components/content/docs/components/drawer/DefaultDrawer.vue b/components/content/docs/components/drawer/DefaultDrawer.vue
@@ -17,33 +17,35 @@ import { DefaultDrawerCode } from "./drawerCode";
 
 <template>
   <CodeHighlightWithPreview :code="DefaultDrawerCode">
-    <Drawer position="bottom">
-      <DrawerTrigger as-child>
-        <Button>Open Drawer</Button>
-      </DrawerTrigger>
-      <DrawerContent>
-        <DrawerBar />
-        <div class="mx-auto my-10 w-full max-w-sm">
-          <DrawerHeader>
-            <DrawerTitle
-              class="text-heading-3 font-bold text-metal-900 lg:text-heading-2 dark:text-white">
-              Keep Vue
-            </DrawerTitle>
-            <DrawerDescription
-              class="text-body-3 font-normal text-metal-600 dark:text-metal-300">
-              Elevate your web projects with Keep Vue&apos;s 40+ customizable
-              components. Access open-source resources for efficient development
-              and bring your ideas to life with ease.
-            </DrawerDescription>
-          </DrawerHeader>
+    <div class="flex items-center justify-center">
+      <Drawer position="bottom">
+        <DrawerTrigger as-child>
+          <Button>Open Drawer</Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <DrawerBar />
+          <div class="mx-auto my-10 w-full max-w-sm">
+            <DrawerHeader>
+              <DrawerTitle
+                class="text-heading-3 font-bold text-metal-900 lg:text-heading-2 dark:text-white">
+                Keep Vue
+              </DrawerTitle>
+              <DrawerDescription
+                class="text-body-3 font-normal text-metal-600 dark:text-metal-300">
+                Elevate your web projects with Keep Vue&apos;s 40+ customizable
+                components. Access open-source resources for efficient
+                development and bring your ideas to life with ease.
+              </DrawerDescription>
+            </DrawerHeader>
 
-          <DrawerFooter>
-            <DrawerClose as-child>
-              <Button class="w-5/12">Explore now</Button>
-            </DrawerClose>
-          </DrawerFooter>
-        </div>
-      </DrawerContent>
-    </Drawer>
+            <DrawerFooter>
+              <DrawerClose as-child>
+                <Button class="w-5/12">Explore now</Button>
+              </DrawerClose>
+            </DrawerFooter>
+          </div>
+        </DrawerContent>
+      </Drawer>
+    </div>
   </CodeHighlightWithPreview>
 </template>