add Rating example

Author: gioboa

apps/qwik-demo-app/src/routes/Rating/RatingColors/index.tsx

@@ -0,0 +1,12 @@
+import { component$ } from '@builder.io/qwik';
+import { SfRating } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col">
+      <SfRating class="!text-red-600" value={4} />
+      <SfRating class="!text-purple-500" value={4} />
+      <SfRating class="!text-cyan-700" value={4} />
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Rating/RatingSizes/index.tsx

@@ -0,0 +1,15 @@
+import { component$ } from '@builder.io/qwik';
+import { SfRating } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col">
+      <SfRating value={4} size="xs" />
+      <SfRating value={4} size="sm" />
+      <SfRating value={4} size="base" />
+      <SfRating value={4} />
+      <SfRating value={4} size="lg" />
+      <SfRating value={4} size="xl" />
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Rating/RatingValues/index.tsx

@@ -0,0 +1,13 @@
+import { component$ } from '@builder.io/qwik';
+import { SfRating } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  return (
+    <div class="flex flex-col">
+      <SfRating value={0} />
+      <SfRating value={3.5} />
+      <SfRating value={3.5} half-increment />
+      <SfRating value={6} max={8} />
+    </div>
+  );
+});

apps/qwik-demo-app/src/routes/Rating/SingleStar/index.tsx

@@ -0,0 +1,26 @@
+import { component$ } from '@builder.io/qwik';
+import { SfIconStarFilled } from 'qwik-storefront-ui';
+
+export default component$(() => {
+  const value = 4.5;
+  return (
+    <div class="flex flex-col gap-2">
+      <div class="font-medium typography-text-xs">
+        <SfIconStarFilled class="text-warning-500 w-[1.5em] h-[1.5em]" />
+        {value}
+      </div>
+      <div class="font-medium typography-text-sm">
+        <SfIconStarFilled class="text-warning-500 w-[1.5em] h-[1.5em]" />
+        {value}
+      </div>
+      <div class="font-medium">
+        <SfIconStarFilled class="text-warning-500 w-[1.5em] h-[1.5em]" />
+        {value}
+      </div>
+      <div class="font-medium typography-text-lg">
+        <SfIconStarFilled class="text-warning-500 w-[1.5em] h-[1.5em]" />
+        {value}
+      </div>
+    </div>
+  );
+});