add/make 4 rating examples

docs/components/rating/examples/RatingCountExample.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Rating
+    rating=1
+    scale=1
+    review-text="73 reviews"
+    review-link="#"
+    >
+      <template #besideText>
+        <p class="ml-2 text-sm font-bold text-gray-900 dark:text-white">4.95</p>
+      </template>
+      
+    </Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/examples/RatingExample.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="vp-raw flex flex-col">
-    <Rating></Rating>
+    <Rating rating=4></Rating>
   </div>
 </template>
 <script setup>

docs/components/rating/examples/RatingStarSizesExample.vue

@@ -0,0 +1,13 @@
+<template>
+  <div class="vp-raw flex flex-col gap-5">
+    <!-- Small -->
+    <Rating size="sm" rating=4 ></Rating>
+    <!-- Medium -->
+    <Rating size="md" rating=4></Rating>
+    <!-- Large -->
+    <Rating size="lg" rating=4></Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/examples/RatingWithTextExample.vue

@@ -0,0 +1,12 @@
+<template>
+  <div class="vp-raw flex flex-col">
+    <Rating rating=4>
+      <template #besideText>
+          <p class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">4.95 out of 5</p>
+        </template>
+    </Rating>
+  </div>
+</template>
+<script setup>
+import { Rating } from '../../../../src/index'
+</script>

docs/components/rating/rating.md

@@ -1,8 +1,13 @@
 <script setup>
 import RatingExample from './examples/RatingExample.vue'
+import RatingWithTextExample from './examples/RatingWithTextExample.vue'
+import RatingCountExample from './examples/RatingCountExample.vue'
+import RatingStarSizesExample from './examples/RatingStarSizesExample.vue'
 </script>
 # Vue Rating Component - Flowbite
 
+## Default rating
+Use this simple example of a star rating component for showing review results.
 ```vue
 <script setup>
 import { Rating } from 'flowbite-vue'
@@ -13,3 +18,42 @@ import { Rating } from 'flowbite-vue'
 ```
 
 <RatingExample />
+
+## Rating with text
+If you also want to show a text near the stars you can use this example as a reference.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <Rating></Rating>
+</template>
+```
+
+<RatingWithTextExample />
+
+## Rating count
+Aggregate more results by using this example to show the amount of reviews and the average score.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <Rating></Rating>
+</template>
+```
+
+<RatingCountExample />
+
+## Star sizes
+Check out the different sizing options for the star review component from small, medium, and large.
+```vue
+<script setup>
+import { Rating } from 'flowbite-vue'
+</script>
+<template>
+  <Rating></Rating>
+</template>
+```
+
+<RatingStarSizesExample />