submit review

src/components/utils/RateSelectionBar.tsx

@@ -8,6 +8,8 @@ type Props = {
     content?: Array<{ value: string, icon: React.ReactElement }>;
     className?: string;
     name?: string;
+    onValueChange?: (value: number[]) => void;
+    defaultValue?: number[];
 }
 
 const defaultContent: Array<{ value: string, icon: React.ReactElement }> = [
@@ -18,7 +20,7 @@ const defaultContent: Array<{ value: string, icon: React.ReactElement }> = [
     { value: '1', icon: <Star className='fill-black dark:fill-foreground me-1 mb-1' size={24} /> },
 ]
 
-function RateSelectionBar({ name, content = defaultContent, className = '' }: Props) {
+function RateSelectionBar({ name, content = defaultContent, className = '', onValueChange, defaultValue = [5] }: Props) {
     return (
         <div className={`${className}`}>
             <div className='relative w-full h-3 rounded-full'>
@@ -26,7 +28,8 @@ function RateSelectionBar({ name, content = defaultContent, className = '' }: Pr
                     min={1}
                     max={content.length}
                     name={name}
-                    defaultValue={[5]}
+                    defaultValue={defaultValue}
+                    onValueChange={onValueChange}
                 />
             </div>
             <div className="flex justify-between items-center mt-2">