frontPanel/src/pages/createQuize/QuizGallery.tsx

import {
  Box,
  Button,
  FormControl,
  InputAdornment,
  InputLabel,
  MenuItem,
  Select,
  Tabs,
  TextField,
  Typography,
  useTheme,
} from "@mui/material";
import ComplexNavText from "./ComplexNavText";
import LayoutIconOld from "@icons/LayoutIcon";
import SearchIcon from "@icons/SearchIcon";
import SectionWrapper from "@ui_kit/SectionWrapper";
import ArrowDown from "@icons/ArrowDownIcon";
import { useState } from "react";
import { CustomTab } from "./CustomTab";
import QuizTemplateCard from "./QuizTemplateCard";
import quizTemplateImage1 from "../../assets/quiz-template-1.png";
import quizTemplateImage2 from "../../assets/quiz-template-2.png";
import quizTemplateImage3 from "../../assets/quiz-template-3.png";
import quizTemplateImage4 from "../../assets/quiz-template-4.png";
import quizTemplateImage5 from "../../assets/quiz-template-5.png";
import quizTemplateImage6 from "../../assets/quiz-template-6.png";

const categories = [
  "Категория 1",
  "Категория 2",
  "Категория 3",
  "Категория 4",
] as const;
type Category = (typeof categories)[number];

export default function QuizGallery() {
  const theme = useTheme();
  const [category, setCategory] = useState<Category | "">("");
  const [tabIndex, setTabIndex] = useState<number>(0);

  const handleTabChange = (event: React.SyntheticEvent, newValue: number) => {
    setTabIndex(newValue);
  };

  return (
    <SectionWrapper
      maxWidth="lg"
      sx={{
        mt: "25px",
        mb: "74px",
      }}
    >
      <ComplexNavText text1="Галерея quiz" />
      <Typography variant="h4" mt="20px" mb="40px">
        Мои quiz
      </Typography>
      <Box
        sx={{
          backgroundColor: theme.palette.brightPurple.main,
          width: "100%",
          borderRadius: "8px",
          p: "20px",
          display: "flex",
          alignItems: "center",
          mb: "40px",
        }}
      >
        <LayoutIconOld
          bgcolor="#EEE4FC"
          height="80px"
          width="80px"
          color={theme.palette.brightPurple.main}
        />
        <Box
          sx={{
            display: "flex",
            ml: "25px",
            gap: "30px",
            alignItems: "baseline",
          }}
        >
          <Typography variant="h4" sx={{ color: "white" }}>
            Пустой шаблон
          </Typography>
          <Typography sx={{ color: "white" }}>
            Широкий инструментарий создания quiz с нуля
          </Typography>
        </Box>
        <Button
          variant="contained"
          sx={{
            ml: "auto",
            backgroundColor: "white",
            color: "black",
            px: "30.5px",
            width: "auto",
          }}
        >
          Начать
        </Button>
      </Box>
      <Box
        sx={{
          width: "100%",
        }}
      >
        <Box
          sx={{
            display: "flex",
            gap: "2%",
          }}
        >
          <FormControl
            fullWidth
            variant="standard"
            sx={{
              width: "71%",
            }}
          >
            <TextField
              fullWidth
              id="search"
              placeholder="Поиск шаблонов"
              sx={{
                backgroundColor: theme.palette.background.default,
                "& .MuiInputBase-root": {
                  height: "45px",
                  borderRadius: "10px",
                  pl: "10px",
                },
              }}
              InputProps={{
                sx: {
                  borderRadius: "10px",
                  fontSize: "16px",
                  lineHeight: "19px",
                },
                startAdornment: (
                  <InputAdornment position="start">
                    <SearchIcon />
                  </InputAdornment>
                ),
              }}
            />
          </FormControl>
          <FormControl
            fullWidth
            size="small"
            sx={{
              width: "27%",
              minWidth: "200px",
              height: "45px",
              "& .MuiInputLabel-outlined": {
                mt: "4px",
                ml: "-3px",
              },
              "& .MuiInputLabel-outlined.MuiInputLabel-shrink": {
                ml: "3px",
                mt: "0px",
              },
            }}
          >
            <InputLabel
              sx={{
                color: "black",
                fontSize: "16px",
                lineHeight: "19px",
              }}
              id="demo-simple-select-label"
            >
              Категории
            </InputLabel>
            <Select
              labelId="demo-simple-select-label"
              id="category-select"
              label="Категории"
              variant="outlined"
              value={category}
              onChange={(e) => setCategory(e.target.value as Category)}
              sx={{
                height: "45px",
                borderRadius: "10px",
              }}
              inputProps={{ sx: { pt: "12px" } }}
              IconComponent={(props) => <ArrowDown {...props} />}
            >
              {categories.map((cat) => (
                <MenuItem key={cat} value={cat}>
                  {cat}
                </MenuItem>
              ))}
            </Select>
          </FormControl>
        </Box>
      </Box>
      <Tabs
        TabIndicatorProps={{ sx: { display: "none" } }}
        value={tabIndex}
        onChange={handleTabChange}
        variant="scrollable"
        scrollButtons={false}
        sx={{ mt: "15px" }}
      >
        <CustomTab value={0} label="Квизы" />
        <CustomTab value={1} label="Исследования и опросы" />
        <CustomTab value={2} label="Формы" />
        <CustomTab value={3} label="Тесты" />
        <CustomTab value={4} label="E-commerce" />
      </Tabs>
      <Box
        sx={{
          display: "flex",
          alignItems: "baseline",
          mt: "28px",
          mb: "40px",
        }}
      >
        <Typography variant="h5">Квизы</Typography>
        <Box
          sx={{
            flexGrow: 1,
            width: "auto",
            height: "10px",
            borderBottom: "1px solid #9A9AAF",
            mx: "5px",
            mb: "0px",
          }}
        />
        <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          gap: "3.5%",
        }}
      >
        <QuizTemplateCard image={quizTemplateImage1} />
        <QuizTemplateCard image={quizTemplateImage2} />
        <QuizTemplateCard image={quizTemplateImage3} />
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "baseline",
          mt: "50px",
          mb: "40px",
        }}
      >
        <Typography variant="h5">Исследования и опросы</Typography>
        <Box
          sx={{
            flexGrow: 1,
            width: "auto",
            height: "10px",
            borderBottom: "1px solid #9A9AAF",
            mx: "5px",
            mb: "0px",
          }}
        />
        <Typography sx={{ color: "#4D4D4D" }}>(3)</Typography>
      </Box>
      <Box
        sx={{
          display: "flex",
          gap: "3.5%",
        }}
      >
        <QuizTemplateCard image={quizTemplateImage4} />
        <QuizTemplateCard image={quizTemplateImage5} />
        <QuizTemplateCard image={quizTemplateImage6} />
      </Box>
      <Box
        sx={{
          width: "100%",
          borderBottom: "1px solid #9A9AAF",
          mt: "50px",
        }}
      />
      <Typography mt="30px" variant="h4">
        Нет подходящего шаблона?
      </Typography>
      <Button
        variant="contained"
        sx={{
          px: "20px",
          mt: "30px",
        }}
      >
        Создать квиз с нуля
      </Button>
    </SectionWrapper>
  );
}