feature: added select for admin pages

src/components/pages/admin/teachers-admin-page/components/teachers-admin-select/TeachersAdminSelect.styles.ts

@@ -0,0 +1 @@
+import { SxProps, Theme } from '@mui/material/styles';

src/components/pages/admin/teachers-admin-page/components/teachers-admin-select/TeachersAdminSelect.tsx

@@ -0,0 +1,57 @@
+import { FC } from 'react';
+import {
+  FormControl,
+  InputLabel,
+  MenuItem,
+  OutlinedInput,
+  Select,
+  SelectChangeEvent,
+} from '@mui/material';
+
+import * as styles from './TeachersAdminSelect.styles';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 8;
+const MenuProps = {
+  PaperProps: {
+    style: {
+      maxHeight: ITEM_HEIGHT * 4.5 + ITEM_PADDING_TOP,
+      width: 250,
+    },
+  },
+};
+
+interface TeachersAdminSelectProps {
+  value: string;
+  values: string[];
+  handleChange: (event: SelectChangeEvent) => void;
+}
+
+const TeachersAdminSelect: FC<TeachersAdminSelectProps> = ({
+  value,
+  values,
+  handleChange,
+}) => {
+  return (
+    <FormControl sx={{ m: 1, width: 300 }}>
+      <InputLabel id="demo-multiple-name-label">Name</InputLabel>
+      <Select
+        labelId="demo-multiple-name-label"
+        id="demo-multiple-name"
+        multiple
+        value={value}
+        onChange={handleChange}
+        input={<OutlinedInput label="Name" />}
+        MenuProps={MenuProps}
+      >
+        {values.map(name => (
+          <MenuItem key={name} value={name}>
+            {name}
+          </MenuItem>
+        ))}
+      </Select>
+    </FormControl>
+  );
+};
+
+export default TeachersAdminSelect;

src/components/pages/admin/teachers-admin-page/components/teachers-admin-select/index.ts

@@ -0,0 +1 @@
+export { default } from './TeachersAdminSelect';