diff --git a/apps/web/src/client/Home/_components/Article/ArticleListItem.tsx b/apps/web/src/client/Home/_components/Article/ArticleListItem.tsx index 7fe2a26..56694bc 100644 --- a/apps/web/src/client/Home/_components/Article/ArticleListItem.tsx +++ b/apps/web/src/client/Home/_components/Article/ArticleListItem.tsx @@ -8,37 +8,36 @@ export interface ArticleListItemProps { renderActions?: (article: Article) => ReactNode; } -export const ArticleListItem: FC< - ArticleListItemProps & ComponentProps<'div'> -> = ({ article, renderActions, ...props }) => { - const theme = useMantineTheme(); - return ( -
-
> = + ({ article, renderActions, ...props }) => { + const theme = useMantineTheme(); + return ( +
+
-
+
-
+
- - + + - {article.title} - - - - {article.body} - - + {article.title} + + + + {article.body} + + - {new URL(article.url).host} - {/* TODO: もっと精度良くする (クライアントでやるべきかどうかも検討) */} - {(article.body.length / 500).toFixed(0)} min read - -
-
- {article.ogImageUrl ? ( - + {new URL(article.url).host} + +
+
+ {article.ogImageUrl ? ( + - ) : null} + src={article.ogImageUrl} + width="100%" + /> + ) : null} +
-
-
- {renderActions ? renderActions(article) : null} + > + {renderActions ? renderActions(article) : null} +
-
- ); -}; + ); + };