added StarRating

components/StarRating/StarRating.helpers.ts

@@ -0,0 +1,33 @@
+// generate an array of numbers based on the specified start and end points,
+// with an optional step increment
+
+// start: The starting number of the range.
+// end: The ending number (exclusive) of the range. It's optional; if not provided,
+// the function uses start as the end, and starts from 0.
+// step: The increment between numbers in the range. It defaults to 1 if not specified.
+
+export const range = (
+  start: number,
+  end?: number,
+  step: number = 1
+): number[] => {
+  let output: number[] = [];
+
+  if (end === undefined) {
+    end = start;
+    start = 0;
+  }
+
+  for (let i = start; i < end; i += step) {
+    output.push(i);
+  }
+
+  return output;
+};
+
+//rating for the disabled star
+export function getInverseRating(rating: number) {
+  // Normalize the rating to be within 0 to 5
+  const clampedRating = Math.min(5, Math.max(0, rating));
+  return 5 - clampedRating;
+}

components/StarRating/StarRating.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import StarRating from './StarRating';
+
+const meta: Meta<typeof StarRating> = {
+  title: 'Components/StarRating',
+  component: StarRating,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof StarRating>;
+
+export const Rating0: Story = {
+  args: {
+    rating: 0,
+  },
+};
+
+export const Rating1: Story = {
+  args: {
+    rating: 1,
+  },
+};
+
+export const Rating2: Story = {
+  args: {
+    rating: 2,
+  },
+};
+
+export const Rating3: Story = {
+  args: {
+    rating: 3,
+  },
+};
+
+export const Rating4: Story = {
+  args: {
+    rating: 4,
+  },
+};
+
+export const Rating5: Story = {
+  args: {
+    rating: 5,
+  },
+};

components/StarRating/StarRating.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { FolderLock, Star } from 'lucide-react';
+import { getInverseRating, range } from './StarRating.helpers';
+
+type StarRatingProps = {
+  /**
+   * rating given ( from 0 min to max 5)
+   */
+  rating: number;
+};
+
+const StarRating = (props: StarRatingProps) => {
+  const { rating } = props;
+
+  // Normalize the rating to be within 0 to 5
+  const clampedRating = Math.min(5, Math.max(0, rating));
+
+  return (
+    <div className="flex gap-2">
+      {/* active star */}
+      <div className="flex gap-2 ">
+        {range(clampedRating).map(num => (
+          <Star key={num} color="#2563EB" size={32} fill="#2563EB" />
+        ))}
+      </div>
+      {/* inactive star */}
+      <div className="flex gap-2">
+        {range(getInverseRating(clampedRating)).map(num => (
+          <Star key={num} color="#E5E7EB" size={32} fill="#E5E7EB" />
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default StarRating;

components/StarRating/index.tsx

@@ -0,0 +1 @@
+export { default } from './StarRating';