Use Typography in MangaDetails

This commit is contained in:
schroda
2024-05-23 00:40:20 +02:00
parent 0ab6549a20
commit c9cf516473
3 changed files with 56 additions and 27 deletions

View File

@@ -27,6 +27,7 @@ import sanitizeHtml from 'sanitize-html';
import { SpinnerImage } from '@/components/util/SpinnerImage.tsx';
import { TrackerManga } from '@/lib/data/Trackers.ts';
import { TypographyMaxLines } from '@/components/atoms/TypographyMaxLines.tsx';
import { Metadata } from '@/components/atoms/Metadata.tsx';
const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: boolean }) => (
<Stack direction="row" gap="5px" justifyContent="space-between">
@@ -39,15 +40,6 @@ const TrackerMangaCardTitle = ({ title, selected }: { title: string; selected: b
</Stack>
);
const TrackerMangaCardInfo = ({ title, value }: { title: string; value: string }) => (
<Stack direction="row" gap="5px" flexWrap="wrap">
<Typography variant="body1">{title}</Typography>
<Typography variant="body1" color="text.secondary">
{value}
</Typography>
</Stack>
);
const SUMMARY_COLLAPSED_SIZE = 50;
const TrackerMangaCardSummary = ({ summary }: { summary: string }) => {
const { t } = useTranslation();
@@ -164,9 +156,9 @@ export const TrackerMangaCard = ({
<TrackerMangaCardLink url={manga.trackingUrl}>
<TrackerMangaCardTitle title={manga.title} selected={selected} />
</TrackerMangaCardLink>
<TrackerMangaCardInfo title={t('global.label.type')} value={manga.publishingType} />
<TrackerMangaCardInfo title={t('global.label.started')} value={manga.startDate} />
<TrackerMangaCardInfo title={t('manga.label.status')} value={manga.publishingStatus} />
<Metadata title={t('global.label.type')} value={manga.publishingType} />
<Metadata title={t('global.label.started')} value={manga.startDate} />
<Metadata title={t('manga.label.status')} value={manga.publishingStatus} />
</Stack>
</Stack>
<TrackerMangaCardSummary summary={manga.summary} />