import { Add } from "@mui/icons-material"; import { Box, Button, Container, Dialog, Divider } from "@mui/material"; import React from "react"; import DownloadSelector from "./DownloadSelector/DownloadSelector"; import EpisodeListing from "./DownloadSelector/Listing/EpisodeListing"; import SearchBox from "./SearchBox/SearchBox"; const AddToQueue: React.FC = () => { const [isOpen, setOpen] = React.useState(false); return <Box> <EpisodeListing /> <Dialog open={isOpen} onClose={() => setOpen(false)} maxWidth='md'> <Box sx={{ border: '2px solid white', p: 2 }}> <SearchBox /> <Divider variant='middle' className="divider-width" light sx={{ color: 'text.primary', fontSize: '1.2rem' }}>Options</Divider> <DownloadSelector onFinish={() => setOpen(false)} /> </Box> </Dialog> <Button variant='contained' onClick={() => setOpen(true)}> <Add /> </Button> </Box> } export default AddToQueue;