Drawer Header - Copy this React, Mui Component to your project

add and update: const renderPrivacyContent = () => ( <Box> <Box sx={{ mb: 4 }}> <Alert severity="info" sx={{ mb: 2 }}> Manage your privacy settings and control access to your information across groups. </Alert> <Button variant="contained" color="primary" startIcon={<FiLock />} onClick={() => setOpenPrivacyDialog(true)} sx={{ mb: 3 }} > Manage Privacy Settings </Button> {privacySettings.map((setting) => ( <PrivacySettingCard key={setting.id}> <Box sx={{ display: "flex", alignItems: "center" }}> <Box sx={{ mr: 2, color: "primary.main" }}>{setting.icon}</Box> <Box> <Typography variant="h6">{setting.title}</Typography> <Typography variant="body2" color="text.secondary"> {setting.description} </Typography> </Box> </Box> <Switch checked={privacyStates[setting.id]} onChange={() => handlePrivacyToggle(setting.id)} color="primary" /> </PrivacySettingCard> ))} </Box> <Typography variant="h5" sx={{ mb: 2 }}> Group Privacy Overview </Typography> {groups.map((group) => ( <GroupCard key={group.id} sensitive={group.sensitive}> <Box sx={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start" }}> <Box> <Typography variant="h6">{group.name}</Typography> <Typography variant="body2" color="text.secondary"> {group.description} </Typography> <Stack direction="row" spacing={1} sx={{ mt: 1 }}> <Chip icon={<FiUserCheck />} label={`Access: ${group.role}`} size="small" color={group.role === "Admin" ? "primary" : "default"} /> <Chip icon={group.type === "Private" ? <FiLockIcon /> : <FiGlobe />} label={group.type} size="small" color={group.type === "Private" ? "secondary" : "default"} /> {group.sensitive && ( <Chip icon={<FiAlertCircle />} label="Sensitive" color="error" size="small" /> )} </Stack> </Box> <Box> <Button variant="outlined" size="small" startIcon={<FiActivity />} onClick={() => handleViewActivityLog(group)} sx={{ mr: 1 }} > View Activity </Button> </Box> </Box> <Typography variant="body2" color="text.secondary" sx={{ mt: 1 }}> Last accessed: {new Date(group.lastAccessed).toLocaleString()} </Typography> </GroupCard> ))} <Dialog open={openActivityLog} onClose={() => setOpenActivityLog(false)} maxWidth="md" fullWidth > <DialogTitle> Activity Log - {selectedPrivacyGroup?.name} </DialogTitle> <DialogContent> <TableContainer> <Table> <TableHead> <TableRow> <TableCell>Action</TableCell> <TableCell>Timestamp</TableCell> </TableRow> </TableHead> <TableBody> {selectedPrivacyGroup?.activity.map((activity, index) => ( <TableRow key={index}> <TableCell>{activity.action}</TableCell> <TableCell> {new Date(activity.timestamp).toLocaleString()} </TableCell> </TableRow> ))} </TableBody> </Table> </TableContainer> </DialogContent> <DialogActions> <Button onClick={() => setOpenActivityLog(false)}>Close</Button> </DialogActions> </Dialog> <Dialog open={openPrivacyDialog} onClose={() => setOpenPrivacyDialog(false)} maxWidth="sm" fullWidth > <DialogTitle>Advanced Privacy Settings</DialogTitle> <DialogContent> <Stack spacing={2} sx={{ mt: 2 }}> <TextField select fullWidth label="Default Group Visibility" defaultValue="private" > <MenuItem value="private">Private</MenuItem> <MenuItem value="public">Public</MenuItem> </TextField> <TextField select fullWidth label="Data Retention Period" defaultValue="30" > <MenuItem value="7">7 days</MenuItem> <MenuItem value="30">30 days</MenuItem> <MenuItem value="90">90 days</MenuItem> </TextField> <Alert severity="info"> These settings will apply to all new groups you create or join. </Alert> </Stack> </DialogContent> <DialogActions> <Button onClick={() => setOpenPrivacyDialog(false)}>Cancel</Button> <Button variant="contained" color="primary"> Save Settings </Button> </DialogActions> </Dialog> <Snackbar open={showSnackbar} autoHideDuration={6000} onClose={() => setShowSnackbar(false)} message={snackbarMessage} action={ <IconButton size="small" color="inherit" onClick={() => setShowSnackbar(false)} > <FiX /> </IconButton> } /> </Box> );