feat: adding the table with products
This commit is contained in:
Rodolfo Ruiz
parent
98f6f9814d
commit
b3f939ccdc
75
package-lock.json
generated
75
package-lock.json
generated
@ -13,6 +13,7 @@
|
||||
"@fontsource/roboto": "^5.2.5",
|
||||
"@mui/icons-material": "^7.1.0",
|
||||
"@mui/material": "^7.1.0",
|
||||
"@mui/x-data-grid": "^8.5.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
@ -1429,6 +1430,65 @@
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-data-grid": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-data-grid/-/x-data-grid-8.5.0.tgz",
|
||||
"integrity": "sha512-5rrMm9anFaLk9O5XRIw3J9tAAnaiE1GxFeocyqhDj23RUReMg0YSp3FYnCaFLAehRQVgT9pC4675XO571paxKw==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.27.1",
|
||||
"@mui/utils": "^7.0.2",
|
||||
"@mui/x-internals": "8.5.0",
|
||||
"clsx": "^2.1.1",
|
||||
"prop-types": "^15.8.1",
|
||||
"reselect": "^5.1.1",
|
||||
"use-sync-external-store": "^1.5.0"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@emotion/react": "^11.9.0",
|
||||
"@emotion/styled": "^11.8.1",
|
||||
"@mui/material": "^5.15.14 || ^6.0.0 || ^7.0.0",
|
||||
"@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0",
|
||||
"react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
},
|
||||
"peerDependenciesMeta": {
|
||||
"@emotion/react": {
|
||||
"optional": true
|
||||
},
|
||||
"@emotion/styled": {
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"node_modules/@mui/x-internals": {
|
||||
"version": "8.5.0",
|
||||
"resolved": "https://registry.npmjs.org/@mui/x-internals/-/x-internals-8.5.0.tgz",
|
||||
"integrity": "sha512-Ef4KJij1pBGk6/xILyVZHf76tcuRpJIX30k4Ghklsd5QJujZ9ENCGAjvd7aWRAFAs5p3ffn0H8UDESoIcroj1Q==",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.27.1",
|
||||
"@mui/utils": "^7.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.0.0"
|
||||
},
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/mui-org"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@mui/system": "^5.15.14 || ^6.0.0 || ^7.0.0",
|
||||
"react": "^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@popperjs/core": {
|
||||
"version": "2.11.8",
|
||||
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
|
||||
@ -3785,6 +3845,12 @@
|
||||
"react-dom": ">=16.6.0"
|
||||
}
|
||||
},
|
||||
"node_modules/reselect": {
|
||||
"version": "5.1.1",
|
||||
"resolved": "https://registry.npmjs.org/reselect/-/reselect-5.1.1.tgz",
|
||||
"integrity": "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w==",
|
||||
"license": "MIT"
|
||||
},
|
||||
"node_modules/resolve": {
|
||||
"version": "1.22.10",
|
||||
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
|
||||
@ -4239,6 +4305,15 @@
|
||||
"punycode": "^2.1.0"
|
||||
}
|
||||
},
|
||||
"node_modules/use-sync-external-store": {
|
||||
"version": "1.5.0",
|
||||
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.5.0.tgz",
|
||||
"integrity": "sha512-Rb46I4cGGVBmjamjphe8L/UnvJD+uPPtTkNvX5mZgqdbavhI4EbgIWJiIHXJ8bc/i9EQGPRh4DwEURJ552Do0A==",
|
||||
"license": "MIT",
|
||||
"peerDependencies": {
|
||||
"react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/vary": {
|
||||
"version": "1.1.2",
|
||||
"resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
|
||||
|
||||
@ -15,6 +15,7 @@
|
||||
"@fontsource/roboto": "^5.2.5",
|
||||
"@mui/icons-material": "^7.1.0",
|
||||
"@mui/material": "^7.1.0",
|
||||
"@mui/x-data-grid": "^8.5.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0"
|
||||
},
|
||||
|
||||
12
src/App.jsx
12
src/App.jsx
@ -1,9 +1,12 @@
|
||||
import { useState } from 'react'
|
||||
import Background from "./components/Background";
|
||||
import VideoBackground from "./components/VimeoEmbed";
|
||||
import AppHeader from './components/AppHeader';
|
||||
import Footer from './components/Footer';
|
||||
import Box from '@mui/material/Box';
|
||||
|
||||
import Admin from './private/Admin';
|
||||
|
||||
import './App.css'
|
||||
|
||||
function App() {
|
||||
@ -12,7 +15,8 @@ function App() {
|
||||
return (
|
||||
<>
|
||||
|
||||
<Background imageName='background.jpg' opacity={0.65} />
|
||||
{/* <Background imageName='background.jpg' opacity={0.65} /> */}
|
||||
<VideoBackground videoId="1066622045" />
|
||||
|
||||
<Box
|
||||
sx={{
|
||||
@ -26,9 +30,9 @@ function App() {
|
||||
|
||||
{/* Main content area */}
|
||||
<Box component="main" sx={{ flex: 1, p: 2 }}>
|
||||
<h1>Welcome to the Fendi Casa Experience</h1>
|
||||
<p>This is a sample box.</p>
|
||||
|
||||
{zone === 'private' && <Admin />}
|
||||
{zone === 'restricted' && <Admin />}
|
||||
{zone === 'public' && <Admin />}
|
||||
</Box>
|
||||
<Footer zone={zone} />
|
||||
</Box>
|
||||
|
||||
@ -67,7 +67,7 @@ export default function AppHeader({ zone = 'public' }) {
|
||||
)}
|
||||
|
||||
{/* Rendering the Drawer */}
|
||||
<MenuDrawer zone={zone} open={menuOpen} onClose={() => setMenuOpen(false)} />
|
||||
<MenuDrawer zone='private' open={menuOpen} onClose={() => setMenuOpen(false)} />
|
||||
|
||||
</Toolbar>
|
||||
</AppBar>
|
||||
|
||||
@ -14,7 +14,7 @@ export default function MenuDrawer({ zone = 'public', open, onClose }) {
|
||||
<Drawer anchor="left" open={open} onClose={onClose} slotProps={{
|
||||
paper: {
|
||||
sx: {
|
||||
backgroundColor: '#000000a0', // negro semitransparente
|
||||
backgroundColor: '#000000a0',
|
||||
width: isMobile ? '100vw' : 250,
|
||||
},
|
||||
},
|
||||
|
||||
18
src/components/SectionContainer.jsx
Normal file
18
src/components/SectionContainer.jsx
Normal file
@ -0,0 +1,18 @@
|
||||
import { Box } from '@mui/material';
|
||||
|
||||
export default function SectionContainer({ children, maxWidth = 'lg', sx = {} }) {
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
width: '100%',
|
||||
maxWidth,
|
||||
mx: 'auto',
|
||||
px: { xs: 2, md: 4 },
|
||||
py: { xs: 3, md: 5 },
|
||||
...sx,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
</Box>
|
||||
);
|
||||
}
|
||||
40
src/private/Admin.jsx
Normal file
40
src/private/Admin.jsx
Normal file
@ -0,0 +1,40 @@
|
||||
|
||||
import SectionContainer from '../components/SectionContainer';
|
||||
import React from 'react';
|
||||
import { DataGrid } from '@mui/x-data-grid';
|
||||
import { Typography, InputBase, IconButton, Box } from '@mui/material';
|
||||
|
||||
const columns = [
|
||||
{ field: 'id', headerName: 'ID', width: 70 },
|
||||
{ field: 'company', headerName: 'Company', flex: 1 },
|
||||
{ field: 'name', headerName: 'Name', flex: 1 },
|
||||
{ field: 'price', headerName: '$', width: 100, type: 'number' },
|
||||
{ field: 'provider', headerName: 'Provider', flex: 1 },
|
||||
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
|
||||
{ field: 'category', headerName: 'Category', flex: 1 }
|
||||
];
|
||||
|
||||
const rows = [
|
||||
{ id: 1, company:'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home' },
|
||||
{ id: 2, company:'Fendi casa', name: 'Product 2', price: 20.00, provider: 'Provider B', stock: 50, category: 'Home' },
|
||||
{ id: 3, company:'Fendi casa', name: 'Product 3', price: 5.50, provider: 'Provider C', stock: 200, category: 'Home' },
|
||||
{ id: 4, company:'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home' },
|
||||
{ id: 5, company:'Fendi casa', name: 'Product 5', price: 8.20, provider: 'Provider E', stock: 75, category: 'Home' }
|
||||
];
|
||||
|
||||
export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
|
||||
return (
|
||||
|
||||
<SectionContainer sx={{width: '100%' }}>
|
||||
<Typography variant="h6" gutterBottom>
|
||||
Product Catalog
|
||||
</Typography>
|
||||
<DataGrid
|
||||
rows={rows}
|
||||
columns={columns}
|
||||
pageSize={5}
|
||||
rowsPerPageOptions={[5]}
|
||||
/>
|
||||
</SectionContainer>
|
||||
);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user