Styled Card - Copy this React, Mui Component to your project
<div> <AppBar position="sticky"> <Toolbar> <Container maxWidth="lg"> <Grid container alignItems="center" spacing={2}> <Grid item xs={12} md={6}> <TextField fullWidth variant="outlined" placeholder="Search products..." value={searchTerm} onChange={handleSearch} InputProps={{ startAdornment: ( <IconButton edge="start"> <FiSearch /> </IconButton> ), sx: { backgroundColor: "white", borderRadius: 1 } }} /> </Grid> </Grid> </Container> </Toolbar> </AppBar> <Container maxWidth="lg" sx={{ mt: 10, mb: 4 }}> <TextField fullWidth variant="outlined" placeholder="Search products..." value={searchTerm} onChange={handleSearch} InputProps={{ startAdornment: ( <IconButton edge="start"> <FiSearch /> </IconButton> ), sx: { backgroundColor: "white", borderRadius: 1 } }} /> <Grid container spacing={4}> {filteredProducts.map((product) => ( <Grid item key={product.id} xs={12} sm={6} md={4} lg={3}> <ProductCard product={product} /> </Grid> ))} </Grid> </Container> <Dialog open={isDetailsOpen} onClose={handleCloseDetails} maxWidth="md" fullWidth> {selectedProduct && ( <> <DialogTitle>{selectedProduct.name}</DialogTitle> <DialogContent> <Grid container spacing={3}> <Grid item xs={12} md={6}> <CardMedia component="img" height="300" image={selectedProduct.image} alt={selectedProduct.name} sx={{ objectFit: "cover", borderRadius: 1 }} /> </Grid> <Grid item xs={12} md={6}> <Typography variant="h4" gutterBottom> ${selectedProduct.price} </Typography> <Typography variant="body1" paragraph> {selectedProduct.description} </Typography> <Typography variant="h6" gutterBottom> Specifications: </Typography> <ul> {selectedProduct.specs.map((spec, index) => ( <Typography key={index} component="li"> {spec} </Typography> ))} </ul> <Button variant="contained" size="large" startIcon={<FiShoppingCart />} sx={{ mt: 2 }} onClick={() => console.log(`Added ${selectedProduct.name} to cart`)} > Add to Cart </Button> </Grid> </Grid> </DialogContent> <DialogActions> <Button onClick={handleCloseDetails}>Close</Button> </DialogActions> </> )} </Dialog> </div>
