sender page

2025-05-22 13:28:20 +03:00
parent 5ba9121f33
commit 4182708db7
8 changed files with 409 additions and 72 deletions
--- a/frontend/components/ui/SingleSelect.tsx
+++ b/frontend/components/ui/SingleSelect.tsx
@@ -0,0 +1,97 @@
+'use client'
+
+import React from 'react'
+import Select from 'react-select'
+import { SelectOption } from '@/app/types'
+
+interface SingleSelectProps {
+  name: string
+  value: string
+  handleChange: (e: { target: { id: string; value: string } }) => void
+  label: string
+  placeholder: string
+  options: SelectOption[]
+  className?: string
+  noOptionsMessage?: string
+}
+
+const SingleSelect: React.FC<SingleSelectProps> = ({
+  name,
+  value,
+  handleChange,
+  label,
+  placeholder,
+  options,
+  className = '',
+  noOptionsMessage = 'Нет доступных вариантов',
+}) => {
+  return (
+    <div className={className}>
+      <label htmlFor={name} className="mb-1 block text-sm font-medium text-gray-700">
+        {label}
+      </label>
+      <Select<SelectOption>
+        inputId={name}
+        name={name}
+        options={options}
+        value={options.find(opt => opt.id.toString() === value)}
+        onChange={selectedOption => {
+          handleChange({
+            target: {
+              id: name,
+              value: selectedOption?.id.toString() || '',
+            },
+          })
+        }}
+        isSearchable
+        isClearable
+        placeholder={placeholder}
+        noOptionsMessage={() => noOptionsMessage}
+        classNamePrefix="select"
+        className="rounded-lg"
+        styles={{
+          control: base => ({
+            ...base,
+            borderRadius: '0.75rem',
+            backgroundColor: '#F3F4F6',
+            border: '1px solid #E5E7EB',
+            padding: '2px',
+            '&:hover': {
+              borderColor: '#E5E7EB',
+            },
+            '&:focus-within': {
+              backgroundColor: '#FFFFFF',
+              borderColor: '#E5E7EB',
+              boxShadow: '0 0 0 2px rgba(59, 130, 246, 0.5)',
+            },
+          }),
+          menu: base => ({
+            ...base,
+            position: 'absolute',
+            width: '100%',
+            zIndex: 9999,
+            marginTop: '4px',
+            borderRadius: '0.75rem',
+            overflow: 'hidden',
+          }),
+          option: (base, state) => ({
+            ...base,
+            fontSize: '0.875rem',
+            padding: '8px 12px',
+            backgroundColor: state.isSelected ? '#EFF6FF' : state.isFocused ? '#F3F4F6' : 'white',
+            color: state.isSelected ? '#2563EB' : '#1F2937',
+            cursor: 'pointer',
+            '&:active': {
+              backgroundColor: '#DBEAFE',
+            },
+            '&:hover': {
+              backgroundColor: state.isSelected ? '#EFF6FF' : '#F3F4F6',
+            },
+          }),
+        }}
+      />
+    </div>
+  )
+}
+
+export default SingleSelect