发布球局

src/components/NumberInterval/NumberInterval.tsx

@@ -0,0 +1,49 @@
+import React from 'react'
+import { View, Text, Button } from '@tarojs/components'
+import './NumberInterval.scss'
+import { InputNumber } from '@nutui/nutui-react-taro'
+
+interface NumberIntervalProps {
+  minParticipants: number
+  maxParticipants: number
+  onMinParticipantsChange: (value: number) => void
+  onMaxParticipantsChange: (value: number) => void
+}
+
+const NumberInterval: React.FC<NumberIntervalProps> = ({
+  minParticipants,
+  maxParticipants,
+  onMinParticipantsChange,
+  onMaxParticipantsChange
+}) => {
+  return (
+    <View className='participants-control-section'>
+      <View className='participant-control'>
+        <Text className='control-label'>最少</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+      <View className='participant-control'>
+        <Text className='control-label'>最多</Text>
+        <View className='control-buttons'>
+          <InputNumber
+            className="format-width"
+            defaultValue={4}
+            min={0}
+            max={4}
+            formatter={(value) => `${value}人`}
+          />
+        </View>
+      </View>
+    </View>
+  )
+}
+
+export default NumberInterval