Component 0 - Copy this React, Mui Component to your project

Import React, { useState } from "react"; import { Box, Card, CardContent, Typography, Grid, IconButton, Dialog, DialogContent, DialogTitle, Tooltip, useTheme } from "@mui/material"; import { styled } from "@mui/system"; import { motion } from "framer motion"; import { FaCode, FaImage, FaVideo, FaProjectDiagram, FaExpandArrowsAlt, FaFileAlt } from "react icons/fa"; const StyledCard = styled(motion(Card))(({ theme, color }) => ({ cursor: "pointer", background: `linear gradient(145deg, ${color}15, ${color}25)`, transition: "all 0.3s ease in out", "&:hover": { transform: "scale(1.05)", boxShadow: theme.shadows[10], } })); const IconWrapper = styled(Box)(({ color }) => ({ fontSize: "2.5rem", color: color, marginBottom: "1rem" })); const DialogButton = ({ icon: Icon, title, description, color, content }) => { const [open, setOpen] = useState(false); return ( <> <Tooltip title={`Open ${title} Dialog`} arrow> <StyledCard color={color} onClick={() => setOpen(true)} whileHover={{ scale: 1.05 }} whileTap={{ scale: 0.95 }} > <CardContent sx={{ textAlign: "center", padding: 3 }}> <IconWrapper color={color}> <Icon /> </IconWrapper> <Typography variant="h6" gutterBottom> {title} </Typography> <Typography variant="body2" color="text.secondary"> {description} </Typography> </CardContent> </StyledCard> </Tooltip> <Dialog open={open} onClose={() => setOpen(false)} maxWidth="md" fullWidth > <DialogTitle>{title}</DialogTitle> <DialogContent>{content}</DialogContent> </Dialog> </> ); }; const SplashScreen = () => { const theme = useTheme(); const dialogTypes = [ { icon: FaFileAlt, title: "Text Dialog", description: "Open a text based dialog with rich content", color: "#2196F3", content: "Sample text dialog content" }, { icon: FaImage, title: "Image Dialog", description: "View high resolution images in a modal", color: "#4CAF50", content: ( <img src="https://images.unsplash.com/photo 1682687220509 61b8a906ca19" alt="Sample" style={{ width: "100%", height: "auto" }} /> ) }, { icon: FaProjectDiagram, title: "Flowchart Dialog", description: "Interactive flowchart visualization", color: "#9C27B0", content: "Flowchart content here" }, { icon: FaExpandArrowsAlt, title: "Fullscreen Dialog", description: "Immersive fullscreen experience", color: "#FF9800", content: "Fullscreen content here" }, { icon: FaCode, title: "Code Dialog", description: "View and share code snippets", color: "#3F51B5", content: "Code snippet content here" }, { icon: FaVideo, title: "Video Dialog", description: "Watch videos in a modal player", color: "#F44336", content: "Video player content here" } ]; return ( <Box sx={{ minHeight: "100vh", background: "linear gradient(145deg, #f9f9f9, #f1f1f1)", padding: theme.spacing(4) }} > <Grid container spacing={3}> {dialogTypes.map((dialog, index) => ( <Grid item xs={12} sm={6} md={4} key={index} component={motion.div} initial={{ opacity: 0, y: 20 }} animate={{ opacity: 1, y: 0 }} transition={{ delay: index * 0.1 }} > <DialogButton {...dialog} /> </Grid> ))} </Grid> </Box> ); }; export default SplashScreen; remove button text in give code add text below flow chart full notes single notes highlightable flow chart, highlightable drop down menu, highlighted results, and highlighted saves.