feat / AEB-26 login page

frontend/components/selectors/RoleSelector.tsx

@@ -0,0 +1,78 @@
+import React from 'react'
+import Selector, { Option } from '@/components/ui/Selector'
+
+export interface Role {
+  id: number
+  value: string
+  label: string
+  [key: string]: string | number
+}
+
+interface RoleSelectorProps {
+  name: string
+  value: string
+  handleChange: (e: {
+    target: {
+      id: string
+      value: string
+      selectedOption?: Option
+    }
+  }) => void
+  label?: string
+  tooltip?: string | React.ReactNode
+  placeholder?: string
+}
+
+const ROLES = [
+  { id: 1, value: 'engineer', label: 'Инженер' },
+  { id: 2, value: 'operator', label: 'Оператор' },
+  { id: 3, value: 'administrator', label: 'Администратор' },
+]
+
+const RoleSelector: React.FC<RoleSelectorProps> = ({
+  name,
+  value,
+  handleChange,
+  label,
+  tooltip,
+  placeholder,
+}) => {
+  const handleSelectorChange = (e: {
+    target: {
+      id: string
+      value: Option | null
+      selectedOption?: Option
+    }
+  }) => {
+    const selectedOption = e.target.value
+    handleChange({
+      target: {
+        id: name,
+        value: selectedOption?.value || '',
+        selectedOption: selectedOption || undefined,
+      },
+    })
+  }
+
+  // Находим текущее значение в списке для отображения
+  const currentValue = ROLES.find(role => role.value === value)
+
+  return (
+    <Selector<Role>
+      name={name}
+      value={currentValue}
+      handleChange={handleSelectorChange}
+      label={label}
+      tooltip={tooltip}
+      placeholder={placeholder}
+      mapDataToOptions={role => ({
+        id: role.id,
+        value: role.value,
+        label: role.label,
+      })}
+      staticOptions={ROLES}
+    />
+  )
+}
+
+export default RoleSelector