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 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 1x 7x | 'use client'
import { Card, CardContent, Typography, Box, Chip } from '@mui/material'
import { VocabularyItem } from '@/core/domain/VocabularyItem'
interface VocabularyCardProps {
item: VocabularyItem
index: number
}
/**
* VocabularyCard Component
* Displays a vocabulary item with the English word, Portuguese description, and usage example.
*/
export function VocabularyCard({ item, index }: VocabularyCardProps) {
return (
<Card
sx={{
height: '100%',
display: 'flex',
flexDirection: 'column',
transition: 'transform 0.2s, box-shadow 0.2s',
'&:hover': {
transform: 'translateY(-4px)',
boxShadow: 4,
},
}}
data-testid={`vocabulary-card-${index}`}
>
<CardContent sx={{ flexGrow: 1 }}>
<Box sx={{ display: 'flex', alignItems: 'center', gap: 1, mb: 2 }}>
<Chip
label={`#${index + 1}`}
size="small"
color="primary"
sx={{ fontWeight: 600 }}
/>
</Box>
<Typography
variant="h4"
component="h2"
color="primary"
gutterBottom
sx={{ fontWeight: 700 }}
data-testid={`word-${index}`}
>
{item.word}
</Typography>
<Typography
variant="body1"
color="text.secondary"
paragraph
data-testid={`description-${index}`}
>
<strong>Significado:</strong> {item.description}
</Typography>
<Box
sx={{
bgcolor: 'grey.100',
p: 2,
borderRadius: 1,
borderLeft: 3,
borderColor: 'primary.main',
}}
>
<Typography
variant="body2"
color="text.secondary"
sx={{ fontStyle: 'italic' }}
data-testid={`usecase-${index}`}
>
<strong>Exemplo:</strong> {item.useCase}
</Typography>
</Box>
</CardContent>
</Card>
)
}
|