feat: show source and interval in details

oae · Oct 19, 2022 · 155a367 · 155a367
1 parent 20ada9b
commit 155a367
Showing 1 changed file with 30 additions and 0 deletions.
diff --git a/src/components/mangaDetail.tsx b/src/components/mangaDetail.tsx
@@ -1,6 +1,8 @@
 import { Badge, createStyles, Divider, Grid, Group, Image, Spoiler, Text, Title } from '@mantine/core';
 import { NextLink } from '@mantine/next';
 import { Prisma } from '@prisma/client';
+import { contrastColor } from 'contrast-color';
+import stc from 'string-to-color';
 import { IconExternalLink } from '@tabler/icons';
 
 const useStyles = createStyles((theme) => ({
@@ -98,6 +100,34 @@ export function MangaDetail({ manga }: { manga: MangaWithMetadataAndChapters })
               </Badge>
             ))}
           </Group>
+          <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Download" />
+          <Group
+            spacing={5}
+            sx={(theme) => ({
+              fontSize: theme.fontSizes.xs,
+            })}
+          >
+            Checking{' '}
+            <Badge
+              component="span"
+              color="cyan"
+              variant="filled"
+              size="xs"
+              sx={{ backgroundColor: stc(manga.interval), color: contrastColor({ bgColor: stc(manga.interval) }) }}
+            >
+              {manga.interval}
+            </Badge>{' '}
+            from{' '}
+            <Badge
+              component="span"
+              color="cyan"
+              variant="filled"
+              size="xs"
+              sx={{ backgroundColor: stc(manga.source), color: contrastColor({ bgColor: stc(manga.source) }) }}
+            >
+              {manga.source}
+            </Badge>
+          </Group>
           <Divider sx={{ fontWeight: 'bolder' }} variant="dashed" my="xs" label="Status" />
           <Badge color="cyan" variant="filled" size="sm">
             {manga.metadata.status}