Styled Paper - Copy this React, Mui Component to your project

Import React, { useState } from "react"; import { Box, Button, Container, Tab, Tabs, Typography, Modal, TextField, List, ListItem, ListItemText, ListItemSecondaryAction, IconButton, Drawer, AppBar, Toolbar, Grid, Card, CardMedia, CardContent, FormControlLabel, Radio, RadioGroup, Select, MenuItem, FormControl, InputLabel, Paper, Divider } from "@mui/material"; import { styled } from "@mui/system"; import { FaPlay, FaPause, FaVolumeMute, FaVolumeUp, FaTimes, FaUpload, FaCalendarPlus, FaTrash, FaPlayCircle } from "react icons/fa"; const StyledDrawer = styled(Drawer)(({ theme }) => ({ width: 240, flexShrink: 0, "& .MuiDrawer paper": { width: 240, boxSizing: "border box", backgroundColor: "#1a237e", color: "white" } })); const MainContent = styled(Box)(({ theme }) => ({ flexGrow: 1, padding: theme.spacing(3), marginLeft: 240, display: "flex", flexDirection: "column", alignItems: "center", width: "calc(100% 240px)" })); const VideoPlayer = styled(Box)({ width: "100%", maxWidth: 800, margin: "auto" }); const VideoPlayerControls = styled(Box)({ display: "flex", alignItems: "center", padding: "10px", backgroundColor: "#f5f5f5" }); const StyledContainer = styled(Container)({ maxWidth: 1200, margin: "0 auto", padding: "20px" }); const Dashboard = () => { const [selectedTab, setSelectedTab] = useState(0); const [openPreview, setOpenPreview] = useState(false); const [selectedVideo, setSelectedVideo] = useState(null); const [isPlaying, setIsPlaying] = useState(false); const [isMuted, setIsMuted] = useState(false); const [scheduleDate, setScheduleDate] = useState(new Date().toISOString().split("T")[0]); const [selectedClient, setSelectedClient] = useState(""); const [selectedScheduleVideo, setSelectedScheduleVideo] = useState(""); const dummyVideos = [ { id: 1, title: "Sample Video 1", duration: "2:30", thumbnail: "https://images.unsplash.com/photo 1516641051054 9df6a1aad654" }, { id: 2, title: "Sample Video 2", duration: "3:45", thumbnail: "https://images.unsplash.com/photo 1516641051054 9df6a1aad654" } ]; const dummyClients = [ { id: 1, name: "Client 1" }, { id: 2, name: "Client 2" } ]; const dummySchedules = [ { id: 1, videoTitle: "Sample Video 1", client: "Client 1", scheduledTime: "2024 02 20 14:30" } ]; const handleVideoUpload = (event) => { console.log("Video uploaded:", event.target.files[0]); }; const handlePreview = (video) => { setSelectedVideo(video); setOpenPreview(true); }; const handleScheduleSave = () => { console.log("Schedule saved"); }; return ( <Box sx={{ display: "flex" }}> <StyledDrawer variant="permanent"> <Toolbar /> <List> {["Quản lý video", "Lên lịch phát", "Gửi lệnh phát"].map((text, index) => ( <ListItem button key={text} onClick={() => setSelectedTab(index)}> <ListItemText primary={text} /> </ListItem> ))} </List> </StyledDrawer> <MainContent> <StyledContainer> <TabPanel value={selectedTab} index={0}> <Box sx={{ width: "100%", mb: 2 }}> <Button variant="contained" startIcon={<FaUpload />} component="label" > Tải lên video <input type="file" hidden accept="video/*" onChange={handleVideoUpload} /> </Button> </Box> <Grid container spacing={2} justifyContent="center"> {dummyVideos.map((video) => ( <Grid item xs={12} sm={6} md={4} key={video.id}> <Card> <CardMedia component="img" height="140" image={video.thumbnail} alt={video.title} /> <CardContent> <Typography variant="h6">{video.title}</Typography> <Typography variant="body2" color="text.secondary"> {video.duration} </Typography> <Button onClick={() => handlePreview(video)} startIcon={<FaPlay />} > Xem trước </Button> </CardContent> </Card> </Grid> ))} </Grid> </TabPanel> <TabPanel value={selectedTab} index={1}> <Paper sx={{ p: 2, width: "100%", maxWidth: 600 }}> <Typography variant="h6" gutterBottom> Lên lịch phát video </Typography> <FormControl fullWidth sx={{ mb: 2 }}> <InputLabel>Chọn video</InputLabel> <Select value={selectedScheduleVideo} onChange={(e) => setSelectedScheduleVideo(e.target.value)} > {dummyVideos.map((video) => ( <MenuItem key={video.id} value={video.id}> {video.title} </MenuItem> ))} </Select> </FormControl> <FormControl fullWidth sx={{ mb: 2 }}> <InputLabel>Chọn máy khách</InputLabel> <Select value={selectedClient} onChange={(e) => setSelectedClient(e.target.value)} > {dummyClients.map((client) => ( <MenuItem key={client.id} value={client.id}> {client.name} </MenuItem> ))} </Select> </FormControl> <TextField type="datetime local" label="Thời gian phát" value={scheduleDate} onChange={(e) => setScheduleDate(e.target.value)} fullWidth sx={{ mb: 2 }} InputLabelProps={{ shrink: true }} /> <Button variant="contained" onClick={handleScheduleSave} sx={{ mt: 2 }} > Lưu lịch phát </Button> </Paper> </TabPanel> <TabPanel value={selectedTab} index={2}> <Paper sx={{ width: "100%", maxWidth: 800 }}> <List> {dummySchedules.map((schedule) => ( <ListItem key={schedule.id}> <ListItemText primary={schedule.videoTitle} secondary={`${schedule.client} ${schedule.scheduledTime}`} /> <ListItemSecondaryAction> <IconButton edge="end" onClick={() => console.log("Play now")}> <FaPlayCircle /> </IconButton> </ListItemSecondaryAction> </ListItem> ))} </List> </Paper> </TabPanel> </StyledContainer> <Modal open={openPreview} onClose={() => setOpenPreview(false)} sx={{ display: "flex", alignItems: "center", justifyContent: "center" }} > <VideoPlayer> <Typography variant="h6" sx={{ mb: 1, color: "white" }}> {selectedVideo?.title} </Typography> <video width="100%" height="auto" controls src="#" /> <VideoPlayerControls> <IconButton onClick={() => setIsPlaying(!isPlaying)}> {isPlaying ? <FaPause /> : <FaPlay />} </IconButton> <IconButton onClick={() => setIsMuted(!isMuted)}> {isMuted ? <FaVolumeMute /> : <FaVolumeUp />} </IconButton> </VideoPlayerControls> </VideoPlayer> </Modal> </MainContent> </Box> ); }; function TabPanel(props) { const { children, value, index, ...other } = props; return ( <div role="tabpanel" hidden={value !== index} {...other} > {value === index && <Box>{children}</Box>} </div> ); } export default Dashboard; vẫn chưa thực hiện được các phần từ bên phải nằm giữa cho đẹp nha bạn kiểm tra kỹ lại giúp tôi