chore: add styles to buttons
This commit is contained in:
Rodolfo Ruiz
parent
b03dd0a418
commit
c22d0ab9c2
@ -34,7 +34,7 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
|
||||
}));
|
||||
};
|
||||
|
||||
const handleImageChange = (e) => {
|
||||
const handleImageChange = (e) => {
|
||||
const file = e.target.files[0];
|
||||
if (!file) return;
|
||||
|
||||
@ -101,37 +101,72 @@ export default function AddOrEditProductForm({ onAdd, initialData, onCancel }) {
|
||||
onChange={handleChange}
|
||||
margin="normal"
|
||||
/>
|
||||
<Grid item xs={12} textAlign="center">
|
||||
{product.representation && (
|
||||
<Box mb={1}>
|
||||
<Typography variant="subtitle1" gutterBottom>Representation</Typography>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={product.representation}
|
||||
sx={{ width: 120, height: 120, mx: 'auto' }}
|
||||
imgProps={{
|
||||
style: {
|
||||
objectFit: 'contain',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Button variant="outlined" component="label">
|
||||
Upload Image
|
||||
<input type="file" hidden accept="image/*" onChange={handleImageChange} />
|
||||
</Button>
|
||||
</Grid>
|
||||
<Grid item xs={12} textAlign="center">
|
||||
{product.representation && (
|
||||
<Box mb={1}>
|
||||
<Typography variant="subtitle1" gutterBottom>Representation</Typography>
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={product.representation}
|
||||
sx={{ width: 120, height: 120, mx: 'auto' }}
|
||||
imgProps={{
|
||||
style: {
|
||||
objectFit: 'contain',
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)}
|
||||
<Button component="label"
|
||||
sx={{
|
||||
backgroundColor: 'transparent',
|
||||
color: 'black',
|
||||
textTransform: 'uppercase',
|
||||
fontWeight: 600,
|
||||
px: 3,
|
||||
'&:hover': {
|
||||
backgroundColor: '#26201A',
|
||||
color: '#fff',
|
||||
},
|
||||
}}>
|
||||
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}>Cancel</Button>
|
||||
<Button variant="contained" onClick={handleSubmit}>Save</Button>
|
||||
<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>
|
||||
);
|
||||
}
|
||||
@ -16,36 +16,36 @@ const columnsBase = [
|
||||
{ field: 'stock', headerName: 'Stock', width: 100, type: 'number' },
|
||||
{ field: 'category', headerName: 'Category', flex: 1 },
|
||||
{
|
||||
field: 'representation',
|
||||
headerName: 'Representation',
|
||||
width: 120,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" justifyContent="center" width="100%">
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={params.value}
|
||||
sx={{ width: 100, height: 48 }}
|
||||
imgProps={{
|
||||
style: {
|
||||
objectFit: 'contain', // or 'cover' if you want it to fill and crop
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
field: 'representation',
|
||||
headerName: 'Representation',
|
||||
width: 120,
|
||||
renderCell: (params) => (
|
||||
<Box display="flex" justifyContent="center" width="100%">
|
||||
<Avatar
|
||||
variant="rounded"
|
||||
src={params.value}
|
||||
sx={{ width: 100, height: 48 }}
|
||||
imgProps={{
|
||||
style: {
|
||||
objectFit: 'contain', // or 'cover' if you want it to fill and crop
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
)
|
||||
}
|
||||
];
|
||||
|
||||
export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
|
||||
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: 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: 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: 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: 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: 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 [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>
|
||||
<DialogTitle>{editingProduct ? 'Edit Product' : 'Add Product'}</DialogTitle>
|
||||
<DialogContent>
|
||||
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }}/>
|
||||
<AddOrEditProductForm onAdd={handleAddOrEditProduct} initialData={editingProduct} onCancel={() => { setOpen(false); setEditingProduct(null); }} />
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
|
||||
@ -121,8 +121,30 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
|
||||
<strong>{rowToDelete?.name}</strong>?
|
||||
</Typography>
|
||||
<Box mt={2} display="flex" justifyContent="flex-end" gap={1}>
|
||||
<Button onClick={() => setConfirmOpen(false)}>Cancel</Button>
|
||||
<Button variant="contained" color="error" onClick={confirmDelete}>Delete</Button>
|
||||
<Button onClick={() => setConfirmOpen(false)}
|
||||
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>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
@ -136,7 +158,18 @@ export default function Admin({ children, maxWidth = 'lg', sx = {} }) {
|
||||
/>
|
||||
|
||||
<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
|
||||
</Button>
|
||||
</Box>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user