53 lines
1.4 KiB
TypeScript
53 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { Typography } from '@mui/material';
|
|
import { ArticleMeta } from "../ArticleMeta";
|
|
import { ArticleCardProps } from "../../types/props";
|
|
import { StyledCard, StyledCardContent, StyledTypography } from "../../types/styles";
|
|
|
|
|
|
export default function ArticleCardSize2({
|
|
article,
|
|
index,
|
|
focusedCardIndex,
|
|
onSelectArticle,
|
|
onFocus,
|
|
onBlur,
|
|
}: ArticleCardProps) {
|
|
return (
|
|
<StyledCard
|
|
variant="outlined"
|
|
onClick={() => onSelectArticle(index)}
|
|
onFocus={() => onFocus(index)}
|
|
onBlur={onBlur}
|
|
tabIndex={0}
|
|
className={focusedCardIndex === index ? 'Mui-focused' : ''}
|
|
>
|
|
<StyledCardContent
|
|
sx={{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'space-between',
|
|
height: '100%',
|
|
}}
|
|
>
|
|
<div>
|
|
<Typography gutterBottom variant="caption" component="div">
|
|
{article.tag}
|
|
</Typography>
|
|
<Typography gutterBottom variant="h6" component="div">
|
|
{article.title}
|
|
</Typography>
|
|
<StyledTypography
|
|
variant="body2"
|
|
color="text.secondary"
|
|
gutterBottom
|
|
>
|
|
{article.description}
|
|
</StyledTypography>
|
|
</div>
|
|
</StyledCardContent>
|
|
<ArticleMeta article={article} />
|
|
</StyledCard>
|
|
);
|
|
};
|