feat: add new manga card

src/components/header.tsx

@@ -12,17 +12,17 @@ const useStyles = createStyles((theme) => ({
   },
 
   inner: {
-    height: 56,
+    height: '56px',
     display: 'flex',
     justifyContent: 'space-between',
     alignItems: 'center',
   },
 
   title: {
     fontFamily: 'Ninja Naruto Regular',
-    lineHeight: 56,
+    lineHeight: '56px',
     fontWeight: 300,
-    marginTop: 10,
+    marginTop: '10px',
     color: theme.colors.gray[0],
   },
 

src/components/newMangaCard.tsx

@@ -0,0 +1,41 @@
+import { Button, createStyles, Paper } from '@mantine/core';
+
+const useStyles = createStyles((theme) => ({
+  card: {
+    height: 350,
+    width: 210,
+    display: 'flex',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'flex-end',
+    backgroundSize: 'cover',
+    backgroundPosition: 'center',
+
+    transition: 'transform 150ms ease, box-shadow 150ms ease',
+
+    '&:hover': {
+      transform: 'scale(1.01)',
+      boxShadow: theme.shadows.md,
+    },
+  },
+}));
+
+export function NewMangaCard() {
+  const { classes } = useStyles();
+
+  return (
+    <Paper
+      shadow="lg"
+      p="md"
+      radius="md"
+      sx={{
+        backgroundImage: `linear-gradient(rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.9)), url('https://s4.anilist.co/file/anilistcdn/media/manga/cover/large/bx53390-1RsuABC34P9D.jpg')`,
+      }}
+      className={classes.card}
+    >
+      <Button variant="filled" fullWidth color="indigo" size="xs">
+        Add new
+      </Button>
+    </Paper>
+  );
+}

src/pages/index.tsx

@@ -1,5 +1,21 @@
+import { LoadingOverlay } from '@mantine/core';
+import { useRouter } from 'next/router';
+
 import { EmptyPrompt } from '../components/emptyPrompt';
+import { trpc } from '../utils/trpc';
 
 export default function IndexPage() {
+  const libraryQuery = trpc.library.query.useQuery();
+  const router = useRouter();
+
+  if (libraryQuery.isLoading) {
+    return <LoadingOverlay visible overlayBlur={2} />;
+  }
+
+  if (libraryQuery.data) {
+    router.push(`/library/${libraryQuery.data.id}`);
+    return <LoadingOverlay visible overlayBlur={2} />;
+  }
+
   return <EmptyPrompt />;
 }

src/pages/library/[id].tsx

@@ -0,0 +1,41 @@
+import { Grid } from '@mantine/core';
+import { useRouter } from 'next/router';
+import { MangaCard } from '../../components/mangaCard';
+import { NewMangaCard } from '../../components/newMangaCard';
+import { trpc } from '../../utils/trpc';
+
+export default function LibraryPage() {
+  const router = useRouter();
+  const { id } = router.query;
+
+  if (id === undefined || id === null) {
+    return null;
+  }
+
+  const mangaQuery = trpc.manga.query.useQuery({
+    library: parseInt(id as string, 10),
+  });
+
+  if (mangaQuery.isLoading) {
+    return null;
+  }
+
+  if (!mangaQuery.data) {
+    return <NewMangaCard />;
+  }
+
+  return (
+    <Grid justify="center">
+      <Grid.Col span="content">
+        <NewMangaCard />
+      </Grid.Col>
+      {mangaQuery.data.map((manga) => {
+        return (
+          <Grid.Col span="content" key={manga.id}>
+            <MangaCard category={manga.interval} title={manga.title} image={manga.cover} />
+          </Grid.Col>
+        );
+      })}
+    </Grid>
+  );
+}

src/server/trpc/router/library.ts

@@ -3,6 +3,9 @@ import { logger } from '../../../utils/logging';
 import { t } from '../trpc';
 
 export const libraryRouter = t.router({
+  query: t.procedure.query(async ({ ctx }) => {
+    return ctx.prisma.library.findFirst();
+  }),
   create: t.procedure
     .input(
       z.object({

src/server/trpc/router/manga.ts

@@ -2,13 +2,17 @@ import { z } from 'zod';
 import { t } from '../trpc';
 
 export const mangaRouter = t.router({
-  create: t.procedure
+  query: t.procedure
     .input(
       z.object({
         library: z.number(),
       }),
     )
-    .mutation(({ input }) => {
-      return input;
+    .query(async ({ input, ctx }) => {
+      return ctx.prisma.manga.findMany({
+        where: {
+          libraryId: input.library,
+        },
+      });
     }),
 });