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

chore: add styles to buttons

Browse Source
This commit is contained in:
Rodolfo Ruiz
2025-06-05 19:57:25 -06:00
parent b03dd0a418
commit c22d0ab9c2
2 changed files with 128 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

97
src/private/AddOrEditProductForm.jsx
View File

@@ -34,7 +34,7 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
})); }));
}; };
const handleImageChange = (e) => { const handleImageChange = (e) => {
const file = e.target.files[0]; const file = e.target.files[0];
if (!file) return; if (!file) return;
@@ -101,37 +101,72 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
onChange={handleChange} onChange={handleChange}
margin="normal" margin="normal"
/> />
<Grid item xs={12} textAlign="center"> <Grid item xs={12} textAlign="center">
{product.representation && ( {product.representation && (
<Box mb={1}> <Box mb={1}>
<Typography variant="subtitle1" gutterBottom>Representation</Typography> <Typography variant="subtitle1" gutterBottom>Representation</Typography>
<Avatar <Avatar
variant="rounded" variant="rounded"
src={product.representation} src={product.representation}
sx={{ width: 120, height: 120, mx: 'auto' }} sx={{ width: 120, height: 120, mx: 'auto' }}
imgProps={{ imgProps={{
style: { style: {
objectFit: 'contain', objectFit: 'contain',
width: '100%', width: '100%',
height: '100%', height: '100%',
} }
}} }}
/> />
</Box> </Box>
)} )}
<Button variant="outlined" component="label"> <Button component="label"
Upload Image sx={{
<input type="file" hidden accept="image/*" onChange={handleImageChange} /> backgroundColor: 'transparent',
</Button> color: 'black',
</Grid> textTransform: 'uppercase',
fontWeight: 600,
<Box mt={2}> px: 3,
{/* Fields... */} '&:hover': {
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}> backgroundColor: '#26201A',
<Button onClick={onCancel}>Cancel</Button> color: '#fff',
<Button variant="contained" onClick={handleSubmit}>Save</Button> },
}}>
Upload Image
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
</Button>
</Grid>
<Box mt={2}>
{/* Fields... */}
<Box display="flex" justifyContent="flex-end" gap={1} mt={2}>
<Button onClick={onCancel}
sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>
Cancel</Button>
<Button variant="contained" onClick={handleSubmit}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Save</Button>
</Box>
</Box> </Box>
</Box> </Box>
</Box>
); );
} }

91
src/private/Admin.jsx
View File

@@ -16,36 +16,36 @@ const columnsBase = [
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' }, { field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
{ field: 'category', headerName: 'Category', flex: 1 }, { field: 'category', headerName: 'Category', flex: 1 },
{ {
field: 'representation', field: 'representation',
headerName: 'Representation', headerName: 'Representation',
width: 120, width: 120,
renderCell: (params) => ( renderCell: (params) => (
<Box display="flex" justifyContent="center" width="100%"> <Box display="flex" justifyContent="center" width="100%">
<Avatar <Avatar
variant="rounded" variant="rounded"
src={params.value} src={params.value}
sx={{ width: 100, height: 48 }} sx={{ width: 100, height: 48 }}
imgProps={{ imgProps={{
style: { style: {
objectFit: 'contain', // or 'cover' if you want it to fill and crop objectFit: 'contain', // or 'cover' if you want it to fill and crop
width: '100%', width: '100%',
height: '100%', height: '100%',
}
}}
/>
</Box>
)
} }
}}
/>
</Box>
)
}
]; ];
export default function Admin({ children, maxWidth = 'lg', sx = {} }) { export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
const [rows, setRows] = useState([ const [rows, setRows] = useState([
{ id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/favicon.png' }, { id: 1, company: 'Fendi casa', name: 'Product 1', price: 10.99, provider: 'Provider A', stock: 100, category: 'Home', representation: '/favicon.png' },
{ id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' }, { id: 2, company: 'Fendi casa', name: 'Product 2', price: 20.0, provider: 'Provider B', stock: 50, category: 'Home', representation: '/logo.png' },
{ id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' }, { id: 3, company: 'Fendi casa', name: 'Product 3', price: 5.5, provider: 'Provider C', stock: 200, category: 'Home', representation: '/background.jpg' },
{ id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' }, { id: 4, company: 'Fendi casa', name: 'Product 4', price: 15.75, provider: 'Provider D', stock: 30, category: 'Home', representation: '/background.jpg' },
{ id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' } { id: 5, company: 'Fendi casa', name: 'Product 5', price: 8.2, provider: 'Provider E', stock: 75, category: 'Home', representation: '/favicon.png' }
]); ]);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [editingProduct, setEditingProduct] = useState(null); const [editingProduct, setEditingProduct] = useState(null);
@@ -109,7 +109,7 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
<Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth> <Dialog open={open} onClose={() => { setOpen(false); setEditingProduct(null); }} maxWidth="sm" fullWidth>
<DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle> <DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
<DialogContent> <DialogContent>
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }}/> <AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -121,8 +121,30 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
<strong>{rowToDelete?.name}</strong>? <strong>{rowToDelete?.name}</strong>?
</Typography> </Typography>
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}> <Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
<Button onClick={() => setConfirmOpen(false)}>Cancel</Button> <Button onClick={() => setConfirmOpen(false)}
<Button variant="contained" color="error" onClick={confirmDelete}>Delete</Button> sx={{
backgroundColor: 'transparent',
color: 'black',
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
color: '#fff',
},
}}>Cancel</Button>
<Button variant="contained" color="error" onClick={confirmDelete}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>Delete</Button>
</Box> </Box>
</DialogContent> </DialogContent>
</Dialog> </Dialog>
@@ -136,7 +158,18 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
/> />
<Box display="flex" justifyContent="flex-end" mt={2}> <Box display="flex" justifyContent="flex-end" mt={2}>
<Button variant="contained" color="primary" onClick={() => setOpen(true)}> <Button variant="contained" color="primary" onClick={() => setOpen(true)}
sx={{
backgroundColor: '#A68A72',
color: '#fff',
borderRadius: 2,
textTransform: 'uppercase',
fontWeight: 600,
px: 3,
'&:hover': {
backgroundColor: '#26201A',
},
}}>
Add Product Add Product
</Button> </Button>
</Box> </Box>