rodolfo_ruiz/fendi-react-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: adding the table with products

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-06-03 20:53:13 -06:00
parent 98f6f9814d
commit b3f939ccdc
7 changed files with 144 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
package-lock.json generated
View File

@@ -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",

1
package.json
View File

@@ -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
View File

@@ -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>

2
src/components/AppHeader.jsx
View File

@@ -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>

2
src/components/MenuDrawer.jsx
View File

@@ -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
View 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
View 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>
);
}