flowbite-svelte 0.27.13 → 0.27.15

package/src/routes/components/rating.md

@@ -0,0 +1,408 @@
+---
+layout: componentLayout
+title: Svelte Rating - Flowbite
+breadcrumb_title: Rating
+dir: Components
+description: Use the rating component to show reviews and testimonials from your users using stars and scores based on multiple styles and sizes
+---
+
+<MetaTag {breadcrumb_title} {title} {dir} {description}/>
+
+<script>
+  import { Htwo, ExampleDiv, GitHubSource, CompoDescription, TableProp, TableDefaultRow, MetaTag } from '../utils'
+  
+  import { Breadcrumb, BreadcrumbItem, Heading, P, A } from '$lib'
+  // Props table
+  import { props as items } from '../props/Rating.json'
+  import { props as items2 } from '../props/AdvancedRating.json'
+  import { props as items3 } from '../props/ScoreRating.json'
+  import { props as items4 } from '../props/RatingComment.json'
+  import { props as items5 } from '../props/Review.json'
+  let propHeader = ['Name', 'Type', 'Default']
+  let divClass='w-full relative overflow-x-auto shadow-md sm:rounded-lg py-4'
+  let theadClass ='text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-white'
+</script>
+
+<Breadcrumb class="pt-16 py-8">
+  <BreadcrumbItem href="/" home >Home</BreadcrumbItem>
+  <BreadcrumbItem>{dir}</BreadcrumbItem>
+  <BreadcrumbItem>{breadcrumb_title}</BreadcrumbItem>
+</Breadcrumb>
+
+<Heading class="mb-2" tag="h1" customSize="text-3xl">{title}</Heading>
+
+<CompoDescription>{description}</CompoDescription>
+
+<ExampleDiv>
+<GitHubSource href="ratings/Rating.svelte">Rating</GitHubSource>
+<GitHubSource href="ratings/AdvancedRating.svelte">AdvancedRating</GitHubSource>
+<GitHubSource href="ratings/ScoreRating.svelte">ScoreRating</GitHubSource>
+</ExampleDiv>
+
+Get started with the rating component to show an aggregate of reviews and scores in the forms of stars or numbers.
+
+You can find multiple examples on this page including different styles, sizes, and variants of the rating component and other associated elements such as a comment or card.
+
+<Htwo label="Setup" />
+
+Let's import all necessary components in the script tag. We import a heart, thumb-up, and smiley icons, but you can use any icons as you like.
+
+```html
+<script>
+  import { Rating, AdvancedRating, ScoreRating } from 'flowbite-svelte';
+</script>
+```
+
+<Htwo label="Default rating" />
+
+The default rating icon is a star. Set the total and rating props.
+
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={4.66} />
+```
+
+<Htwo label="Ceil prop" />
+
+The default rounding for the rate is `floor`, but by adding the `ceil` prop, you can round it up.
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={4.66} ceil />
+```
+
+<Htwo label="Rating with text" />
+
+If you also want to show a text near the stars you can use the `text` slot to add any text.
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={3.21}>
+  <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
+</Rating>
+```
+
+<Htwo label="Rating count" />
+
+Aggregate more results by using this example to show the amount of reviews and the average score.
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating count rating={4.95} >
+  <span class="w-1 h-1 mx-1.5 bg-gray-500 rounded-full dark:bg-gray-400" />
+  <a
+    href="/"
+    class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
+    >73 reviews</a
+  >
+</Rating>
+```
+
+<Htwo label="Icon size and color" />
+
+Use the `ratingUp` and `ratingDown` slots to add icons of your choice.
+
+<h3 class='text-xl w-full dark:text-white py-4'>Size and color</h3>
+
+The default icon size is `24`. Set the `class` in a icon component to change colors.
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={3.21}>
+  <span slot="ratingUp">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-red-700 dark:text-red-500"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>
+  </span>
+  <span slot="ratingDown">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12z" /></svg>
+  </span>
+</Rating>
+```
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={4.7}>
+  <span slot="ratingUp">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-purple-500 dark:text-purple-700"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg>
+  </span>
+  <span slot="ratingDown">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 01-6.364 0M21 12a9 9 0 11-18 0 9 9 0 0118 0zM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75zm-.375 0h.008v.015h-.008V9.75zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75zm-.375 0h.008v.015h-.008V9.75z" /></svg>
+  </span>
+</Rating>
+```
+
+```svelte example hideScript
+<script>
+  import { Rating } from 'flowbite-svelte'
+</script>
+
+<Rating total={5} rating={2.4}>
+  <span slot="ratingUp">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-300 dark:text-yellow-200"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
+  </span>
+  <span slot="ratingDown">
+    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
+  </span>
+</Rating>
+```
+
+<Htwo label="AdvancedRating component" />
+
+Set the `total`,` rating`, and `ratings` prop for AdvancedRation component. Use the `rating` slot for Rating component with the `total` and `rating` props. Use the `globalText` slot for additional information.
+
+```svelte example hideScript
+<script>
+  import { AdvancedRating, Rating } from 'flowbite-svelte'
+</script>
+
+<AdvancedRating
+  ratings={[
+    { label: '5 star', rating: 70 },
+    { label: '4 star', rating: 17 },
+    { label: '3 star', rating: 8 },
+    { label: '2 star', rating: 4 },
+    { label: '1 star', rating: 1 }
+  ]}
+>
+  <span slot="rating">
+    <Rating total={5} rating={3.21}>
+      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
+    </Rating>
+  </span>
+  <p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
+</AdvancedRating>
+```
+
+<Htwo label="Different icon" />
+
+As we describe in the Rating component, you can change an icon in the `ratingUp` and `ratingDown` in the Rating component.
+
+```svelte example hideScript
+<script>
+  import { AdvancedRating, Rating } from 'flowbite-svelte'
+</script>
+
+<AdvancedRating
+  ratings={[
+    { label: '5 star', rating: 70 },
+    { label: '4 star', rating: 17 },
+    { label: '3 star', rating: 8 },
+    { label: '2 star', rating: 4 },
+    { label: '1 star', rating: 1 }
+  ]}
+>
+  <span slot="rating">
+    <Rating total={5} rating={3.21} ceil>
+      <span slot="ratingUp">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-yellow-300 dark:text-yellow-200"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
+      </span>
+      <span slot="ratingDown">
+        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6 text-gray-300 dark:text-gray-500"><path stroke-linecap="round" stroke-linejoin="round" d="M6.633 10.5c.806 0 1.533-.446 2.031-1.08a9.041 9.041 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75A2.25 2.25 0 0116.5 4.5c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H13.48c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23H5.904M14.25 9h2.25M5.904 18.75c.083.205.173.405.27.602.197.4-.078.898-.523.898h-.908c-.889 0-1.713-.518-1.972-1.368a12 12 0 01-.521-3.507c0-1.553.295-3.036.831-4.398C3.387 10.203 4.167 9.75 5 9.75h1.053c.472 0 .745.556.5.96a8.958 8.958 0 00-1.302 4.665c0 1.194.232 2.333.654 3.375z" /></svg>
+      </span>
+      <p slot="text" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">3.21 out of 5</p>
+    </Rating>
+  </span>
+  <p slot="globalText" class="ml-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
+</AdvancedRating>
+```
+
+<Htwo label="Score rating" />
+
+```svelte example hideScript
+<script>
+  import { ScoreRating } from 'flowbite-svelte'
+  let headerLabel = {
+    desc1: '8.7',
+    desc2: 'Excellent',
+    desc3: '376 reviews',
+    link: {
+      label: 'Read all reviews',
+      url: '/'
+    }
+  };
+</script>
+
+<ScoreRating
+  {headerLabel}
+  ratings={[
+    { label: 'Staff', rating: 8.8 },
+    { label: 'Comfort', rating: 8.9 },
+    { label: 'Free WiFi', rating: 8.8 },
+    { label: 'Facilities', rating: 5.4 }
+  ]}
+  ratings2={[
+    { label: 'Value for money', rating: 8.9 },
+    { label: 'Cleanliness', rating: 7.0 },
+    { label: 'Location', rating: 8.0 }
+  ]}
+/>
+```
+
+<Htwo label="Rating comment" />
+
+Use this component to show a single rating comment and its score alongside other components such as the user profile avatar, name, post date, and more.
+
+```svelte example hideScript
+<script>
+  import { RatingComment } from 'flowbite-svelte'
+  let comment = {
+    id: '1',
+    user: {
+      name: 'Jese Leos',
+      img: {
+        src: '/images/profile-picture-2.webp',
+        alt: 'Jese Leos'
+      },
+      joined: 'Joined on August 2014'
+    },
+    total: 5,
+    rating: 4.5,
+    heading: 'Thinking to buy another one!',
+    address: 'the UK',
+    datetime: '2022-03-25'
+  };
+</script>
+
+<RatingComment {comment} helpfullink="/" abuselink="/">
+  <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+    This is my third Invicta Pro Diver. They are just fantastic value for money. This one arrived
+    yesterday and the first thing I did was set the time, popped on an identical strap from
+    another Invicta and went in the shower with it to test the waterproofing.... No problems.
+  </p>
+  <p class="mb-3 font-light text-gray-500 dark:text-gray-400">
+    It is obviously not the same build quality as those very expensive watches. But that is like
+    comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
+  </p>
+  <a
+    href="/"
+    class="block mb-5 text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+    >Read more</a
+  >
+  <svelte:fragment slot="evaluation">19 people found this helpful</svelte:fragment>
+</RatingComment>
+```
+
+<Htwo label="Review content" />
+
+Use this component to show the review content from a user alongside the avatar, location, details, and the score inside a card element.
+
+```svelte example hideScript
+<script>
+  import { Review } from 'flowbite-svelte'
+  let review = {
+    name: 'Jese Leos',
+    imgSrc: '/images/profile-picture-2.webp',
+    imgAlt: 'jese leos',
+    address: 'United States',
+    reviewDate: 'January 20, 2022',
+    title: 'Spotless, good appliances, excellent layout, host was genuinely nice and helpful.',
+    rating: 8.79,
+    item1: 'Apartament with City View',
+    item2: '3 nights December 2021',
+    item3: 'Family',
+  };
+</script>
+
+<Review {review}>
+  <p class="mb-2 font-light text-gray-500 dark:text-gray-400">
+    The flat was spotless, very comfortable, and the host was amazing. I highly recommend this
+    accommodation for anyone visiting Brasov city centre. It's quite a while since we are no
+    longer using hotel facilities but self contained places. And the main reason is poor
+    cleanliness and staff not being trained properly. This place exceeded our expectation and will
+    return for sure.
+  </p>
+  <p class="mb-5 font-light text-gray-500 dark:text-gray-400">
+    It is obviously not the same build quality as those very expensive watches. But that is like
+    comparing a Citroën to a Ferrari. This watch was well under £100! An absolute bargain.
+  </p>
+  <svelte:fragment slot="item1">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M4.5 2.25a.75.75 0 000 1.5v16.5h-.75a.75.75 0 000 1.5h16.5a.75.75 0 000-1.5h-.75V3.75a.75.75 0 000-1.5h-15zM9 6a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm-.75 3.75A.75.75 0 019 9h1.5a.75.75 0 010 1.5H9a.75.75 0 01-.75-.75zM9 12a.75.75 0 000 1.5h1.5a.75.75 0 000-1.5H9zm3.75-5.25A.75.75 0 0113.5 6H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM13.5 9a.75.75 0 000 1.5H15A.75.75 0 0015 9h-1.5zm-.75 3.75a.75.75 0 01.75-.75H15a.75.75 0 010 1.5h-1.5a.75.75 0 01-.75-.75zM9 19.5v-2.25a.75.75 0 01.75-.75h4.5a.75.75 0 01.75.75v2.25a.75.75 0 01-.75.75h-4.5A.75.75 0 019 19.5z" clip-rule="evenodd" /></svg>
+    {review.item1}
+  </svelte:fragment>
+  <svelte:fragment slot="item2">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M6.75 2.25A.75.75 0 017.5 3v1.5h9V3A.75.75 0 0118 3v1.5h.75a3 3 0 013 3v11.25a3 3 0 01-3 3H5.25a3 3 0 01-3-3V7.5a3 3 0 013-3H6V3a.75.75 0 01.75-.75zm13.5 9a1.5 1.5 0 00-1.5-1.5H5.25a1.5 1.5 0 00-1.5 1.5v7.5a1.5 1.5 0 001.5 1.5h13.5a1.5 1.5 0 001.5-1.5v-7.5z" clip-rule="evenodd" /></svg>
+    {review.item2}
+  </svelte:fragment>
+  <svelte:fragment slot="item3">
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-4 h-4 mr-2"><path fill-rule="evenodd" d="M8.25 6.75a3.75 3.75 0 117.5 0 3.75 3.75 0 01-7.5 0zM15.75 9.75a3 3 0 116 0 3 3 0 01-6 0zM2.25 9.75a3 3 0 116 0 3 3 0 01-6 0zM6.31 15.117A6.745 6.745 0 0112 12a6.745 6.745 0 016.709 7.498.75.75 0 01-.372.568A12.696 12.696 0 0112 21.75c-2.305 0-4.47-.612-6.337-1.684a.75.75 0 01-.372-.568 6.787 6.787 0 011.019-4.38z" clip-rule="evenodd" /><path d="M5.082 14.254a8.287 8.287 0 00-1.308 5.135 9.687 9.687 0 01-1.764-.44l-.115-.04a.563.563 0 01-.373-.487l-.01-.121a3.75 3.75 0 013.57-4.047zM20.226 19.389a8.287 8.287 0 00-1.308-5.135 3.75 3.75 0 013.57 4.047l-.01.121a.563.563 0 01-.373.486l-.115.04c-.567.2-1.156.349-1.764.441z" /></svg>
+    {review.item3}
+  </svelte:fragment>
+  <aside class="flex items-center mt-3 space-x-5">
+    <a
+      href="/"
+      class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M7.493 18.75c-.425 0-.82-.236-.975-.632A7.48 7.48 0 016 15.375c0-1.75.599-3.358 1.602-4.634.151-.192.373-.309.6-.397.473-.183.89-.514 1.212-.924a9.042 9.042 0 012.861-2.4c.723-.384 1.35-.956 1.653-1.715a4.498 4.498 0 00.322-1.672V3a.75.75 0 01.75-.75 2.25 2.25 0 012.25 2.25c0 1.152-.26 2.243-.723 3.218-.266.558.107 1.282.725 1.282h3.126c1.026 0 1.945.694 2.054 1.715.045.422.068.85.068 1.285a11.95 11.95 0 01-2.649 7.521c-.388.482-.987.729-1.605.729H14.23c-.483 0-.964-.078-1.423-.23l-3.114-1.04a4.501 4.501 0 00-1.423-.23h-.777zM2.331 10.977a11.969 11.969 0 00-.831 4.398 12 12 0 00.52 3.507c.26.85 1.084 1.368 1.973 1.368H4.9c.445 0 .72-.498.523-.898a8.963 8.963 0 01-.924-3.977c0-1.708.476-3.305 1.302-4.666.245-.403-.028-.959-.5-.959H4.25c-.832 0-1.612.453-1.918 1.227z" /></svg>
+      Helpful
+    </a>
+    <a
+      href="/"
+      class="inline-flex items-center text-sm font-medium text-blue-600 hover:underline dark:text-blue-500 group"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-5 h-5 mr-1"><path d="M15.73 5.25h1.035A7.465 7.465 0 0118 9.375a7.465 7.465 0 01-1.235 4.125h-.148c-.806 0-1.534.446-2.031 1.08a9.04 9.04 0 01-2.861 2.4c-.723.384-1.35.956-1.653 1.715a4.498 4.498 0 00-.322 1.672V21a.75.75 0 01-.75.75 2.25 2.25 0 01-2.25-2.25c0-1.152.26-2.243.723-3.218C7.74 15.724 7.366 15 6.748 15H3.622c-1.026 0-1.945-.694-2.054-1.715A12.134 12.134 0 011.5 12c0-2.848.992-5.464 2.649-7.521.388-.482.987-.729 1.605-.729H9.77a4.5 4.5 0 011.423.23l3.114 1.04a4.5 4.5 0 001.423.23zM21.669 13.773c.536-1.362.831-2.845.831-4.398 0-1.22-.182-2.398-.52-3.507-.26-.85-1.084-1.368-1.973-1.368H19.1c-.445 0-.72.498-.523.898.591 1.2.924 2.55.924 3.977a8.959 8.959 0 01-1.302 4.666c-.245.403.028.959.5.959h1.053c.832 0 1.612-.453 1.918-1.227z" /></svg>
+      Not helpful
+    </a>
+  </aside>
+</Review>
+```
+
+<Htwo label="Props" />
+
+The component has the following props, type, and default values. See <A href="/pages/types">types 
+ page</A> for type information.
+
+<h3 class='text-xl w-full dark:text-white py-4'>Rating</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow {items} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>AdvancedRating</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items2} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>ScoreRating</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items3} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>RatingComment</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items4} rowState='hover' />
+</TableProp>
+
+<h3 class='text-xl w-full dark:text-white py-4'>Review</h3>
+
+<TableProp header={propHeader} {divClass} {theadClass}>
+  <TableDefaultRow items={items5} rowState='hover' />
+</TableProp>
+
+<Htwo label="References" />
+
+<P>
+  <A href="https://flowbite.com/docs/components/rating/" target="_blank" rel="noreferrer" class="link"
+    >Flowbite Rating</A
+  >
+</P>