feat : no longer limit stats choosing

components/admin/guide-section-editor.tsx

@@ -143,6 +143,7 @@ import {
   normalizeTargetStat,
   recommendedStatElement,
   recommendedStatIconName,
+  recommendedStatOptionConflicts,
   targetStatDefaults,
   targetStatIconName,
   targetStatOptions,
@@ -716,7 +717,6 @@ function StatSelect({
   label,
   options,
   value,
-  max,
   onChange,
   elementIconUrls,
   priorityColors = false,
@@ -724,7 +724,6 @@ function StatSelect({
   label: string;
   options: readonly string[];
   value: string[];
-  max: number;
   onChange: (value: string[]) => void;
   elementIconUrls: Record<string, string>;
   priorityColors?: boolean;
@@ -735,9 +734,7 @@ function StatSelect({
       <Select
         multiple
         value={value}
-        onValueChange={(next) => {
-          if (next.length <= max) onChange(next);
-        }}
+        onValueChange={onChange}
       >
         <SelectTrigger className="w-full">
           <StatIcons values={value} elementIconUrls={elementIconUrls} />
@@ -757,7 +754,7 @@ function StatSelect({
               <SelectItem
                 key={option}
                 value={option}
-                disabled={value.length >= max && !value.includes(option)}
+                disabled={recommendedStatOptionConflicts(option, value)}
                 className={priorityColors && value.includes(option)
                   ? statPriorityColorClass(value.indexOf(option))
                   : undefined}
@@ -769,7 +766,6 @@ function StatSelect({
           </SelectGroup>
         </SelectContent>
       </Select>
-      <FieldDescription>เลือกได้สูงสุด {max} ค่า</FieldDescription>
     </Field>
   );
 }
@@ -2198,12 +2194,11 @@ function ArtifactEditor({
               <Textarea id={`recommended-condition-note-${recommendedGroups[activeRecommendedGroupIndex]?.clientId}`} value={recommendedGroups[activeRecommendedGroupIndex]?.note ?? ""} onChange={(event) => setRecommendedGroups(recommendedGroups.map((group, index) => index === activeRecommendedGroupIndex ? { ...group, note: event.target.value } : group))} />
             </Field>
 
-            <div className="grid overflow-hidden rounded-xl border sm:grid-cols-3">
+            <div className="grid gap-4 sm:grid-cols-3">
               <StatSelect
                 label="Sands / นาฬิกา"
                 options={mainStatOptions.sands}
                 value={sands}
-                max={3}
                 onChange={(values) => setRecommendedStat("sands", values)}
                 elementIconUrls={elementIconUrls}
                 priorityColors
@@ -2212,7 +2207,6 @@ function ArtifactEditor({
                 label="Goblet / ถ้วย"
                 options={mainStatOptions.goblet}
                 value={goblet}
-                max={3}
                 onChange={(values) => setRecommendedStat("goblet", values)}
                 elementIconUrls={elementIconUrls}
                 priorityColors
@@ -2221,7 +2215,6 @@ function ArtifactEditor({
                 label="Circlet / หมวก"
                 options={mainStatOptions.circlet}
                 value={circlet}
-                max={3}
                 onChange={(values) => setRecommendedStat("circlet", values)}
                 elementIconUrls={elementIconUrls}
                 priorityColors
@@ -2231,7 +2224,6 @@ function ArtifactEditor({
               label="Substats"
               options={substatOptions}
               value={substats}
-              max={substatOptions.length}
               onChange={(values) => setRecommendedStat("substats", values)}
               elementIconUrls={elementIconUrls}
               priorityColors