feat(front) react version start

2026-05-31 19:43:11 -06:00
parent d769aab9e4
commit 767317e538
33 changed files with 5669 additions and 0 deletions
@@ -0,0 +1,63 @@
+import { Outlet, useNavigate, useLocation } from '@tanstack/react-router'
+import { Box, Paper, Tabs, Tab, useTheme } from '@mui/material'
+import { useState } from 'react'
+import TopBar from './TopBar'
+import Sidebar from './Sidebar'
+
+export default function AppShell() {
+  const theme = useTheme()
+  const [collapsed, setCollapsed] = useState(false)
+  const navigate = useNavigate()
+  const location = useLocation()
+
+  return (
+    <Box sx={{ display: 'flex', minHeight: '100vh' }}>
+      <TopBar
+        onCollapseClick={() => setCollapsed((p) => !p)}
+        collapsed={collapsed}
+      />
+      <Sidebar collapsed={collapsed} />
+      <Box
+        component="main"
+        sx={{
+          flexGrow: 1,
+          p: { xs: 2, md: 3 },
+          mt: '64px',
+          minWidth: 0,
+          width: {
+            md: `calc(100% - ${collapsed ? 72 : 240}px)`,
+          },
+          transition: theme.transitions.create('width', {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.enteringScreen,
+          }),
+        }}
+      >
+        <Paper
+          elevation={0}
+          sx={{
+            display: { md: 'none' },
+            mb: 2,
+            borderRadius: 3,
+            border: '1px solid',
+            borderColor: 'divider',
+            bgcolor: 'background.paper',
+          }}
+        >
+          <Tabs
+            value={location.pathname}
+            onChange={(_e, path) => navigate({ to: path })}
+            variant="fullWidth"
+            textColor="primary"
+            indicatorColor="primary"
+          >
+            <Tab label="Campañas" value="/campaigns" />
+            <Tab label="Sesiones" value="/sessions" />
+            <Tab label="Archivos" value="/media" />
+          </Tabs>
+        </Paper>
+        <Outlet />
+      </Box>
+    </Box>
+  )
+}