feat: initialize Mariavel project with Laravel backend API and React dashboard using DevExtreme DataGrid

2026-04-24 07:14:41 +03:00
parent 34f4d5b559
commit 49cf557f41
7 changed files with 237 additions and 118 deletions
@@ -0,0 +1,44 @@
+import React from 'react';
+import { Box, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Divider } from '@mui/material';
+import { Storage, TableChart, Folder } from '@mui/icons-material';
+import { useAppStore } from '../store/useAppStore';
+
+const Sidebar: React.FC = () => {
+  const { activeDatabase, setActiveDatabase } = useAppStore();
+
+  // Mock data for initial UI
+  const databases = ['information_schema', 'mysql', 'performance_schema', 'sys', 'mariavel_db'];
+
+  return (
+    <Box sx={{ width: 260, borderRight: 1, borderColor: 'divider', display: 'flex', flexDirection: 'column' }}>
+      <Box sx={{ p: 2 }}>
+        <Typography variant="overline" sx={{ fontWeight: 700, color: 'text.secondary' }}>
+          Databases
+        </Typography>
+      </Box>
+      <List sx={{ flexGrow: 1, overflow: 'auto' }}>
+        {databases.map((db) => (
+          <ListItem key={db} disablePadding>
+            <ListItemButton 
+              selected={activeDatabase === db}
+              onClick={() => setActiveDatabase(db)}
+            >
+              <ListItemIcon>
+                <Storage color={activeDatabase === db ? 'primary' : 'inherit'} />
+              </ListItemIcon>
+              <ListItemText primary={db} primaryTypographyProps={{ variant: 'body2', fontWeight: activeDatabase === db ? 600 : 400 }} />
+            </ListItemButton>
+          </ListItem>
+        ))}
+      </List>
+      <Divider />
+      <Box sx={{ p: 2 }}>
+        <Typography variant="caption" sx={{ color: 'text.secondary' }}>
+          Connected to: 127.0.0.1
+        </Typography>
+      </Box>
+    </Box>
+  );
+};
+
+export default Sidebar;