generic src for react admin

src_generic/components/AdminLayout.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import {
+  Box,
+  Drawer,
+  AppBar,
+  Toolbar,
+  List,
+  Typography,
+  Divider,
+  ListItem,
+  ListItemButton,
+  ListItemIcon,
+  ListItemText,
+  CssBaseline,
+  IconButton
+} from '@mui/material';
+import TableViewIcon from '@mui/icons-material/TableView';
+import DashboardIcon from '@mui/icons-material/Dashboard';
+import LogoutIcon from '@mui/icons-material/Logout';
+import { config } from '../config';
+
+const drawerWidth = 240;
+
+interface AdminLayoutProps {
+  children: React.ReactNode;
+  onSelectResource: (resourceName: string | null) => void;
+  selectedResourceName: string | null;
+  onLogout: () => void;
+  username?: string;
+}
+
+export default function AdminLayout({
+  children,
+  onSelectResource,
+  selectedResourceName,
+  onLogout,
+  username
+}: AdminLayoutProps) {
+  return (
+    <Box sx={{ display: 'flex' }}>
+      <CssBaseline />
+      <AppBar position="fixed" sx={{ zIndex: (theme) => theme.zIndex.drawer + 1 }}>
+        <Toolbar>
+          <Typography variant="h6" noWrap component="div" sx={{ flexGrow: 1 }}>
+            Admin Panel
+          </Typography>
+          <Typography variant="body1" sx={{ mr: 2 }}>
+            {username}
+          </Typography>
+          <IconButton color="inherit" onClick={onLogout}>
+            <LogoutIcon />
+          </IconButton>
+        </Toolbar>
+      </AppBar>
+      <Drawer
+        variant="permanent"
+        sx={{
+          width: drawerWidth,
+          flexShrink: 0,
+          [`& .MuiDrawer-paper`]: { width: drawerWidth, boxSizing: 'border-box' },
+        }}
+      >
+        <Toolbar />
+        <Box sx={{ overflow: 'auto' }}>
+          <List>
+            <ListItem disablePadding>
+              <ListItemButton 
+                selected={selectedResourceName === null}
+                onClick={() => onSelectResource(null)}
+              >
+                <ListItemIcon>
+                  <DashboardIcon />
+                </ListItemIcon>
+                <ListItemText primary="Dashboard" />
+              </ListItemButton>
+            </ListItem>
+          </List>
+          <Divider />
+          <List>
+            {config.resources.map((res) => (
+              <ListItem key={res.name} disablePadding>
+                <ListItemButton 
+                  selected={selectedResourceName === res.name}
+                  onClick={() => onSelectResource(res.name)}
+                >
+                  <ListItemIcon>
+                    <TableViewIcon />
+                  </ListItemIcon>
+                  <ListItemText primary={res.pluralLabel} />
+                </ListItemButton>
+              </ListItem>
+            ))}
+          </List>
+          <Divider />
+        </Box>
+      </Drawer>
+      <Box component="main" sx={{ flexGrow: 1, p: 3 }}>
+        <Toolbar />
+        {children}
+      </Box>
+    </Box>
+  );
+}