Updated: Rating compononent variant code for documentation.

StaticMania · Dec 4, 2024 · f1e9ca3 · f1e9ca3
1 parent 2169fa8
commit f1e9ca3
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 30 deletions.
diff --git a/components/content/docs/components/rating/DefaultRating.vue b/components/content/docs/components/rating/DefaultRating.vue
@@ -6,12 +6,14 @@ import { DefaultRatingCode } from "./ratingCode";
 
 <template>
   <CodeHighlightWithPreview :code="DefaultRatingCode">
-    <Rating>
-      <RatingStar :value="1" />
-      <RatingStar :value="2" />
-      <RatingStar :value="3" />
-      <RatingStar :value="4" />
-      <RatingStar :value="5" />
-    </Rating>
+    <div class="flex items-center justify-center">
+      <Rating>
+        <RatingStar :value="1" />
+        <RatingStar :value="2" />
+        <RatingStar :value="3" />
+        <RatingStar :value="4" />
+        <RatingStar :value="5" />
+      </Rating>
+    </div>
   </CodeHighlightWithPreview>
 </template>
diff --git a/components/content/docs/components/rating/RatingTypes.vue b/components/content/docs/components/rating/RatingTypes.vue
@@ -6,22 +6,24 @@ import { RatingTypesCode } from "./ratingCode";
 
 <template>
   <CodeHighlightWithPreview :code="RatingTypesCode">
-    <Rating>
-      <RatingStar :value="1">
-        <PhosphorIconStar :size="20" />
-      </RatingStar>
-      <RatingStar :value="2">
-        <PhosphorIconStar :size="20" />
-      </RatingStar>
-      <RatingStar :value="3">
-        <PhosphorIconStar :size="20" />
-      </RatingStar>
-      <RatingStar :value="4">
-        <PhosphorIconStar :size="20" />
-      </RatingStar>
-      <RatingStar :value="5">
-        <PhosphorIconStar :size="20" />
-      </RatingStar>
-    </Rating>
+    <div class="flex items-center justify-center">
+      <Rating>
+        <RatingStar :value="1">
+          <PhosphorIconStar :size="20" />
+        </RatingStar>
+        <RatingStar :value="2">
+          <PhosphorIconStar :size="20" />
+        </RatingStar>
+        <RatingStar :value="3">
+          <PhosphorIconStar :size="20" />
+        </RatingStar>
+        <RatingStar :value="4">
+          <PhosphorIconStar :size="20" />
+        </RatingStar>
+        <RatingStar :value="5">
+          <PhosphorIconStar :size="20" />
+        </RatingStar>
+      </Rating>
+    </div>
   </CodeHighlightWithPreview>
 </template>
diff --git a/components/content/docs/components/rating/ValueFromRating.vue b/components/content/docs/components/rating/ValueFromRating.vue
@@ -11,11 +11,10 @@ const handleRating = (value: number | undefined) => {
 
 <template>
   <CodeHighlightWithPreview :code="ValueFromRatingCode">
-    <Rating :handle-rating="handleRating">
-      <RatingStar
-        v-for="rating in ratings"
-        :key="rating"
-        :value="rating"></RatingStar>
-    </Rating>
+    <div class="flex items-center justify-center">
+      <Rating :handle-rating="handleRating">
+        <RatingStar v-for="rating in ratings" :key="rating" :value="rating" />
+      </Rating>
+    </div>
   </CodeHighlightWithPreview>
 </template>