Rating

<script lang="ts">
	import { Rating } from 'svelte-5-ui-lib';
</script>

<Rating total={5} size={30} rating={1.4} />
<Rating total={5} size={30} rating={4.66} />

<script lang="ts">
	import { Star } from 'svelte-5-ui-lib';
</script>

<div class="flex gap-2">
	<Star size={30} iconIndex={0} fillPercent={0} />
	<Star size={30} iconIndex={10} fillPercent={10} />
	<Star size={30} iconIndex={20} fillPercent={20} />
	<Star size={30} iconIndex={30} fillPercent={30} />
	<Star size={30} iconIndex={40} fillPercent={40} />
	<Star size={30} iconIndex={50} fillPercent={50} />
	<Star size={30} iconIndex={60} fillPercent={60} />
	<Star size={30} iconIndex={70} fillPercent={70} />
	<Star size={30} iconIndex={80} fillPercent={80} />
	<Star size={30} iconIndex={90} fillPercent={90} />
	<Star size={30} iconIndex={100} fillPercent={100} />
</div>

<script lang="ts">
	import { Rating } from 'svelte-5-ui-lib';
</script>

<Rating total={5} rating={3.4}>
	{#snippet text()}
		<p class="ms-2 pt-1 text-sm font-medium text-gray-500 dark:text-gray-400">3.4 out of 5</p>
	{/snippet}
</Rating>

<script lang="ts">
	import { Rating } from 'svelte-5-ui-lib';
</script>

<Rating count rating={3.2}>
	<span class="mx-1.5 h-1 w-1 rounded-full bg-gray-500 dark:bg-gray-400"></span>
	<a href="/" class="text-sm font-medium text-gray-900 underline hover:no-underline dark:text-white"
		>73 reviews</a
	>
</Rating>

<script lang="ts">
	import { Rating, Heart, Thumbup } from 'svelte-5-ui-lib';
</script>

<Rating total={5} rating={3.3} Icon={Heart} />
<Rating total={10} rating={7.6} Icon={Heart} />
<Rating total={5} rating={4.7} Icon={Thumbup} />
<Rating total={10} rating={8.2} Icon={Thumbup} />

<script lang="ts">
	import { CustomIcon } from 'svelte-5-ui-lib';
</script>

<div class="flex gap-2">
	<CustomIcon size={30} fillPercent={50} />
	<CustomIcon size={30} fillPercent={50} fillColor="#ff0000" strokeColor="#ff0000" />
	<CustomIcon
		size={30}
		fillPercent={50}
		fillColor="#1158e8"
		strokeColor="#1158e8"
		pathd="M8 4a4 4 0 1 0 0 8 4 4 0 0 0 0-8Zm-2 9a4 4 0 0 0-4 4v1a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2v-1a4 4 0 0 0-4-4H6Zm7.25-2.095c.478-.86.75-1.85.75-2.905a5.973 5.973 0 0 0-.75-2.906 4 4 0 1 1 0 5.811ZM15.466 20c.34-.588.535-1.271.535-2v-1a5.978 5.978 0 0 0-1.528-4H18a4 4 0 0 1 4 4v1a2 2 0 0 1-2 2h-4.535Z"
	/>
	<CustomIcon
		size={30}
		fillPercent={30}
		fillColor="#3300e8"
		strokeColor="#3300e8"
		pathd="M9.586 2.586A2 2 0 0 1 11 2h2a2 2 0 0 1 2 2v.089l.473.196.063-.063a2.002 2.002 0 0 1 2.828 0l1.414 1.414a2 2 0 0 1 0 2.827l-.063.064.196.473H20a2 2 0 0 1 2 2v2a2 2 0 0 1-2 2h-.089l-.196.473.063.063a2.002 2.002 0 0 1 0 2.828l-1.414 1.414a2 2 0 0 1-2.828 0l-.063-.063-.473.196V20a2 2 0 0 1-2 2h-2a2 2 0 0 1-2-2v-.089l-.473-.196-.063.063a2.002 2.002 0 0 1-2.828 0l-1.414-1.414a2 2 0 0 1 0-2.827l.063-.064L4.089 15H4a2 2 0 0 1-2-2v-2a2 2 0 0 1 2-2h.09l.195-.473-.063-.063a2 2 0 0 1 0-2.828l1.414-1.414a2 2 0 0 1 2.827 0l.064.063L9 4.089V4a2 2 0 0 1 .586-1.414ZM8 12a4 4 0 1 1 8 0 4 4 0 0 1-8 0Z"
	/>
</div>

<script lang="ts">
	import { AdvancedRating, Rating } from 'svelte-5-ui-lib';
</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 }
	]}
>
	{#snippet rating()}
		<Rating total={5} rating={3.72}>
			{#snippet text()}
				<p class="ms-2 pt-1 text-sm font-medium text-gray-500 dark:text-gray-400">3.72 out of 5</p>
			{/snippet}
		</Rating>
	{/snippet}
	{#snippet globalText()}
		<p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
	{/snippet}
</AdvancedRating>

<script lang="ts">
	import { AdvancedRating, Rating, Thumbup } from 'svelte-5-ui-lib';
</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 }
	]}
>
	{#snippet rating()}
		<Rating total={5} rating={3.8} Icon={Thumbup}>
			{#snippet text()}
				<p class="ms-2 pt-1 text-sm font-medium text-gray-500 dark:text-gray-400">3.8 out of 5</p>
			{/snippet}
		</Rating>
	{/snippet}
	{#snippet globalText()}
		<p class="mt-2 text-sm font-medium text-gray-500 dark:text-gray-400">1,745 global ratings</p>
	{/snippet}
</AdvancedRating>

<script lang="ts">
	import { ScoreRating } from 'svelte-5-ui-lib';
	const 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 }
	]}
/>

<script lang="ts">
	import { RatingComment } from 'svelte-5-ui-lib';
	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="text-primary-600 dark:text-primary-500 mb-5 block text-sm font-medium hover:underline"
		>Read more</a
	>
	{#snippet evaluation()}
		19 people found this helpful
	{/snippet}
</RatingComment>

<script lang="ts">
	import { Review } from 'svelte-5-ui-lib';
	import {
		LandmarkSolid,
		CalendarMonthSolid,
		UsersGroupOutline,
		ThumbsUpSolid,
		ThumbsDownSolid
	} from 'flowbite-svelte-icons';
	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>
	{#snippet item1()}
		<div class="flex">
			<LandmarkSolid class="mr-2 h-5 w-5" />
			{review.item1}
		</div>
	{/snippet}
	{#snippet item2()}
		<div class="flex">
			<CalendarMonthSolid class="mr-2 h-5 w-5" />
			{review.item2}
		</div>
	{/snippet}
	{#snippet item3()}
		<div class="flex">
			<UsersGroupOutline class="mr-2 h-5 w-5" />
			{review.item3}
		</div>
	{/snippet}
	<aside class="mt-3 flex items-center space-x-5 rtl:space-x-reverse">
		<a
			href="/"
			class="text-primary-600 dark:text-primary-500 inline-flex items-center text-sm font-medium hover:underline"
		>
			<ThumbsUpSolid class="text-primary-600 dark:text-primary-500 me-2.5 h-3.5 w-3.5" />
			Helpful
		</a>
		<a
			href="/"
			class="group text-primary-600 dark:text-primary-500 inline-flex items-center text-sm font-medium hover:underline"
		>
			<ThumbsDownSolid class="text-primary-600 dark:text-primary-500 me-2.5 h-3.5 w-3.5" />
			Not helpful
		</a>
	</aside>
</Review>