Initial commit

src/components/ui/forms/rating.tsx

@@ -0,0 +1,25 @@
+import { RatingGroup } from '@chakra-ui/react';
+import * as React from 'react';
+
+export interface RatingProps extends RatingGroup.RootProps {
+  icon?: React.ReactElement;
+  count?: number;
+  label?: React.ReactNode;
+}
+
+export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(function Rating(props, ref) {
+  const { icon, count = 5, label, ...rest } = props;
+  return (
+    <RatingGroup.Root ref={ref} count={count} {...rest}>
+      {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
+      <RatingGroup.HiddenInput />
+      <RatingGroup.Control>
+        {Array.from({ length: count }).map((_, index) => (
+          <RatingGroup.Item key={index} index={index + 1}>
+            <RatingGroup.ItemIndicator icon={icon} />
+          </RatingGroup.Item>
+        ))}
+      </RatingGroup.Control>
+    </RatingGroup.Root>
+  );
+});