/
d.vader
/
e2e
Обзор
Документация
Войти
/
d.vader
/
e2e
Код
Запросы
0
Задачи
Вики
Пакеты
0
Релизы
0
CI/CD
Аналитика
Безопасность
master
src/components/styleExample/AdaptiveProductCardMUI.tsx
50 строк
1 KB
Boris Meshcheryakov
initial commit
01 окт 2025, 09:22
01 окт 2025, 09:22
3edac10
Код
Авторство
О чём код?
// ProductCard.tsx import { useState } from 'react'; import Grid2 from '@mui/material/Grid'; import Paper from '@mui/material/Paper'; import Typography from '@mui/material/Typography'; import Button from '@mui/material/Button'; interface ProductCardProps { imageUrl?: string; imageAlt?: string; title?: string; price?: number; onAddToCart?: () => void; } export const ProductCardMUI: React.FC<ProductCardProps> = ({ imageUrl, imageAlt, title, price, // onAddToCart, }) => { const [isAdded, setIsAdded] = useState(false); const handleClick = () => { // onAddToCart(); setIsAdded(true); // Через секунду сбрасываем статус "Добавлено" setTimeout(() => setIsAdded(false), 1000); }; return ( <Grid2 container spacing={{ xs: 1, sm: 2, md: 3 }}> <Grid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}> <Paper sx={{ p: 2 }}> <Typography variant="h6">Товар 1</Typography> <Button variant="contained" fullWidth> Купить </Button> </Paper> </Grid2> <Grid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}> {/* Вторая карточка */}фывфывфыв </Grid2> <Grid2 size={{ xs: 12, sm: 6, md: 4, lg: 3 }}> {/* Третья карточка */}фывфыв </Grid2> </Grid2> ); };