ProductGrid ProductGrid.tsx

100% Statements 6/6

100% Branches 2/2

100% Functions 3/3

100% Lines 5/5

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28  
 
 
 
 
 
 
 
 
 
 
 
 
 
 
3x
3x
1x
 
2x
 
 
4x
 
 
 
 
  import type { Product } from '../../types/products';
import { ProductCard } from '../ProductCard';
import Box from '@mui/material/Box';
import Typography from '@mui/material/Typography';
import { useTranslation } from 'react-i18next';
 
interface Props {
  products: Product[];
  fmtCur: (n:number)=>string;
  fmtDate: (s?:string)=>string;
  onViewDetails: (id: number) => void;
  onBuy: (product: Product) => void;
}
 
export function ProductGrid({ products, fmtCur, fmtDate, onViewDetails, onBuy }: Props) {
  const { t } = useTranslation('ticket');
  if (products.length === 0) {
    return <Typography variant='h4' sx={{ textAlign: 'center' }}>{t('tickets.not_found')}</Typography>;
  }
  return (
    <Box sx={{ display: 'flex', gap: 4, justifyContent: { xs: 'center', md: 'flex-start' }, flexWrap: { xs: 'wrap', md: 'nowrap' }, flexDirection: { xs: 'row', md: 'column' }}}>
      {products.map(p => (
        <ProductCard key={p.id} product={p} fmtCur={fmtCur} fmtDate={fmtDate} onViewDetails={onViewDetails} onBuy={() => onBuy(p)} />
      ))}
    </Box>
  );
}