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 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 | import { HNItem } from '@/types/hackernews';
import { Card, CardContent, Typography, Link, Chip, Box } from '@mui/material';
import { useIntl, FormattedMessage } from 'react-intl';
import { Link as RouterLink } from 'react-router-dom';
import { formatRelativeTime } from '@/helpers/timeHelper';
import { extractDomain } from '@/helpers/urlHelper';
interface PostGridItemProps {
item: Partial<HNItem>;
rank: number;
}
function PostGridItem({ item, rank }: PostGridItemProps) {
const intl = useIntl();
return (
<Card
sx={{ height: '100%', display: 'flex', flexDirection: 'column' }}
data-testid="post-grid-item"
role="article"
aria-label={`Post: ${item.title}`}
>
<CardContent sx={{ flex: 1, display: 'flex', flexDirection: 'column' }}>
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'start', mb: 1 }}>
<Typography variant="h6" color="text.secondary" sx={{ minWidth: '30px' }}>
{rank}.
</Typography>
{item.score !== undefined && (
<Chip label={`${item.score} ${intl.formatMessage({ id: 'posts.points' })}`} size="small" color="primary" />
)}
</Box>
<Box sx={{ flex: 1, mb: 2 }}>
{item.url ? (
<Link
href={item.url}
target="_blank"
rel="noopener noreferrer"
sx={{ textDecoration: 'none', color: 'inherit' }}
>
<Typography
variant="subtitle1"
sx={{ '&:hover': { textDecoration: 'underline' }, fontWeight: 500, mb: 0.5 }}
>
{item.title || 'Loading...'}
</Typography>
</Link>
) : (
<Typography variant="subtitle1" sx={{ fontWeight: 500, mb: 0.5 }}>
{item.title || 'Loading...'}
</Typography>
)}
{extractDomain(item.url) && (
<Typography variant="caption" color="text.secondary">
{extractDomain(item.url)}
</Typography>
)}
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', gap: 0.5 }}>
{item.by && (
<Typography variant="caption" color="text.secondary">
by {item.by}
</Typography>
)}
<Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
{item.time && (
<Typography variant="caption" color="text.secondary">
{formatRelativeTime(item.time, intl)}
</Typography>
)}
{item.descendants !== undefined &&
(item.descendants === 0 ? (
<Typography variant="caption" color="primary" data-testid="post-no-comments">
<FormattedMessage id="posts.noComments" />
</Typography>
) : (
item.id && (
<Link
component={RouterLink}
to={`/comments/${item.id}`}
sx={{ textDecoration: 'none' }}
data-testid="post-comments-link"
>
<Typography variant="caption" color="primary" sx={{ '&:hover': { textDecoration: 'underline' } }}>
{item.descendants} comments
</Typography>
</Link>
)
))}
</Box>
</Box>
</CardContent>
</Card>
);
}
export default PostGridItem;
|