Updated: Checkbox compononent variant code for documentation.

StaticMania · Dec 4, 2024 · 7fa42e5 · 7fa42e5
1 parent 98edac1
commit 7fa42e5
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 32 deletions.
diff --git a/components/content/docs/components/checkbox/CheckboxVariant.vue b/components/content/docs/components/checkbox/CheckboxVariant.vue
@@ -7,26 +7,31 @@ const statusThree = ref(false);
 </script>
 <template>
   <CodeHighlightWithPreview :code="CheckboxVariantCode">
-    <div class="space-y-3 p-3">
-      <p class="text-body-3 font-normal dark:text-metal-300">
-        Checkbox Variant
-      </p>
-      <fieldset class="flex items-center gap-2">
-        <Checkbox id="default" v-model:checked="statusOne" />
-        <Label for="default">Default</Label>
-      </fieldset>
-      <fieldset class="flex items-center gap-2">
-        <Checkbox
-          id="rounded"
-          v-model:checked="statusTwo"
-          variant="rounded"
-          default-checked />
-        <Label for="rounded">Rounded</Label>
-      </fieldset>
-      <fieldset class="flex items-center gap-2">
-        <Checkbox id="circle" v-model:checked="statusThree" variant="circle" />
-        <Label for="circle">Circle</Label>
-      </fieldset>
+    <div class="flex items-center justify-center">
+      <div class="space-y-3 p-3">
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Checkbox Variant
+        </p>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox id="default" v-model:checked="statusOne" />
+          <Label for="default">Default</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="rounded"
+            v-model:checked="statusTwo"
+            variant="rounded"
+            default-checked />
+          <Label for="rounded">Rounded</Label>
+        </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox
+            id="circle"
+            v-model:checked="statusThree"
+            variant="circle" />
+          <Label for="circle">Circle</Label>
+        </fieldset>
+      </div>
     </div>
   </CodeHighlightWithPreview>
 </template>
diff --git a/components/content/docs/components/checkbox/DefaultCheckbox.vue b/components/content/docs/components/checkbox/DefaultCheckbox.vue
@@ -9,20 +9,22 @@ const statusTwo = ref(false);
 </script>
 <template>
   <CodeHighlightWithPreview :code="defaultCheckboxCode">
-    <div class="space-y-3 p-3">
-      <p class="text-body-3 font-normal dark:text-metal-300">
-        Keep Design System License
-      </p>
+    <div class="flex items-center justify-center">
+      <div class="space-y-3 p-3">
+        <p class="text-body-3 font-normal dark:text-metal-300">
+          Keep Design System License
+        </p>
 
-      <fieldset class="flex items-center gap-2">
-        <Checkbox id="single" v-model:checked="statusOne" default-checked />
-        <Label for="single">Single License</Label>
-      </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox id="single" v-model:checked="statusOne" default-checked />
+          <Label for="single">Single License</Label>
+        </fieldset>
 
-      <fieldset class="flex items-center gap-2">
-        <Checkbox id="team" v-model:checked="statusTwo" />
-        <Label for="team">Team License</Label>
-      </fieldset>
+        <fieldset class="flex items-center gap-2">
+          <Checkbox id="team" v-model:checked="statusTwo" />
+          <Label for="team">Team License</Label>
+        </fieldset>
+      </div>
     </div>
   </CodeHighlightWithPreview>
 </template>