contests

src/components/input/DateRangeInput.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+interface DateRangeInputProps {
+    startLabel?: string;
+    endLabel?: string;
+    startValue?: string;
+    endValue?: string;
+    onChange: (field: 'startsAt' | 'endsAt', value: string) => void;
+    className?: string;
+}
+
+const DateRangeInput: React.FC<DateRangeInputProps> = ({
+    startLabel = 'Дата начала',
+    endLabel = 'Дата окончания',
+    startValue,
+    endValue,
+    onChange,
+    className = '',
+}) => {
+    return (
+        <div className={`flex flex-col gap-2 ${className}`}>
+            <div>
+                <label className="block text-sm font-medium text-gray-700">
+                    {startLabel}
+                </label>
+                <input
+                    type="datetime-local"
+                    value={startValue}
+                    onChange={(e) => onChange('startsAt', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                />
+            </div>
+            <div>
+                <label className="block text-sm font-medium text-gray-700">
+                    {endLabel}
+                </label>
+                <input
+                    type="datetime-local"
+                    value={endValue}
+                    onChange={(e) => onChange('endsAt', e.target.value)}
+                    className="mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:text-sm"
+                />
+            </div>
+        </div>
+    );
+};
+
+export default DateRangeInput;