Untitled

import { Typography, Stack, Card } from '@mui/material';
import { createStyles } from '@mui/material/styles';
import React, { useState } from 'react';
import { TagRequestContext } from '../../../context/tagRequestContext.js';
import { useContext } from 'react';
import CloseDialogBtn from 'ui-component/closeDialogBtn/CloseDialogBtn';
import MediumButton from 'ui-component/Button/mediumButton';
import TextSwitch from '../../textSwitch/TextSwitch';
import ListBox from './listBox.jsx';
export const styles = createStyles({
  th: {
    fontSize: '14px',
    fontWeight: '700',
    color: '#000',
    position: 'sticky',
    '@media screen and (max-width:1024px)': {
      fontSize: '12px'
    }
  },
  tBody: {
    fontSize: '14px',
    fontWeight: '400'
  },
  card: {
    height: 'fit-content',
    maxHeight: '100%',
    width: '50%',
    position: 'relative',
    padding: '20px',
    backgroundColor: '#F9FAFC',
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'start',
    gap: '10px',
    '@media screen and (max-width:1024px)': {
      width: '80%'
    },
    '@media screen and (max-width:700px)': {
      width: '100%'
    }
  },
  contentWrapper: {
    height: '90%',
    width: '100%'
  },
  dialogTitle: {
    fontSize: '20px',
    fontWeight: '700',
    color: '#000000',
    whiteSpace: 'nowrap',
    '@media screen and (max-width:1024px)': {
      whiteSpace: 'nowrap',
      overflow: 'hidden',
      textOverflow: 'ellipsis'
    }
  }
});

const EdcList = () => {
  const { selectedIds, onClose, setContent } = useContext(TagRequestContext);
  const [contentSwitch, setContentSwitch] = useState('box');

  const handleClose = () => {
    onClose();
  };

  return (
    <>
      <Card sx={styles.card}>
        <Stack direction="row" spacing={1.5} alignItems="center" justifyContent="space-between">
          <Stack direction="row" alignItems="center" spacing={2}>
            <Typography sx={{ ...styles.dialogTitle }}> Select EDC from :</Typography>
            <TextSwitch contentSwitch={contentSwitch} setContentSwitch={setContentSwitch} />
          </Stack>
          <CloseDialogBtn onClose={handleClose} />
        </Stack>
        <ListBox />
        <Stack
          direction="column"
          justifyContent="space-between"
          height="calc(95% - 10px)"
          sx={{
            '@media screen and (max-width:1200px)': {
              height: 'calc(95% - 10px)'
            }
          }}
        >
          <Stack direction="row" spacing={1.5}>
            <MediumButton
              width="30%"
              onClick={() => {
                handleClose();
              }}
              variant="outlined"
            >
              cancel
            </MediumButton>
            <MediumButton
              onClick={() => {
                setContent(1);
              }}
              variant="contained"
              disabled={selectedIds.length === 0}
            >
              Next
            </MediumButton>
          </Stack>
        </Stack>
      </Card>
    </>
  );
};

export default EdcList;