add library item component layout

Hartaithan · Feb 11, 2024 · 2781e0c · 2781e0c
1 parent 334ad21
commit 2781e0c
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 8 deletions.
diff --git a/components/LibaryItem/LibraryItem.module.css b/components/LibaryItem/LibraryItem.module.css
@@ -0,0 +1,31 @@
+.container {
+  width: 100%;
+  height: 60px;
+  align-items: center;
+}
+
+.content {
+  flex-grow: 1;
+  flex-direction: column;
+  margin-left: var(--mantine-spacing-md);
+}
+
+.thumbnail {
+  height: 100%;
+  width: auto;
+}
+
+.title {
+  margin-top: 4px;
+  font-size: var(--mantine-font-size-sm);
+}
+
+.add {
+  height: 100%;
+  width: auto;
+  padding: 0px 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  border-radius: var(--mantine-radius-md);
+}
diff --git a/components/LibaryItem/LibraryItem.tsx b/components/LibaryItem/LibraryItem.tsx
@@ -0,0 +1,35 @@
+import { ActionIcon, Flex, Text } from "@mantine/core";
+import { type TrophyTitle } from "psn-api";
+import { type FC } from "react";
+import classes from "./LibraryItem.module.css";
+import GameThumbnail from "../GameThumbnail/GameThumbnail";
+import PlatformBadge from "../PlatformBadge/PlatformBadge";
+import { IconPlus } from "@tabler/icons-react";
+
+interface Props {
+  item: TrophyTitle;
+  onClick?: () => void;
+}
+
+const LibraryItem: FC<Props> = (props) => {
+  const { item, onClick } = props;
+  return (
+    <Flex className={classes.container}>
+      <GameThumbnail
+        className={classes.thumbnail}
+        url={item.trophyTitleIconUrl}
+        overlay={item.trophyTitlePlatform === "PS5"}
+      />
+      <Flex className={classes.content}>
+        <PlatformBadge platform={item.trophyTitlePlatform} />
+        <Text className={classes.title}>{item.trophyTitleName}</Text>
+      </Flex>
+      <ActionIcon className={classes.add} variant="filled" onClick={onClick}>
+        <IconPlus size={18} />
+        <Text size="xs">Add</Text>
+      </ActionIcon>
+    </Flex>
+  );
+};
+
+export default LibraryItem;
diff --git a/components/PlatformBadge/PlatformBadge.tsx b/components/PlatformBadge/PlatformBadge.tsx
@@ -10,9 +10,13 @@ interface PlatformBadgeProps {
 
 const PlatformBadge: FC<PlatformBadgeProps> = (props) => {
   const { platform } = props;
+  const label =
+    platform !== null ? platformLabels[platform.toLowerCase()] : undefined;
   return (
     <Badge className={classes.platform} radius="sm">
-      {platform !== null ? platformLabels[platform].short : "Not Found"}
+      {label != null
+        ? label.short
+        : platform?.replaceAll(",", ", ") ?? "Not Found"}
     </Badge>
   );
 };

diff --git a/modals/AddGameModal.tsx b/modals/AddGameModal.tsx
@@ -48,8 +48,8 @@ const AddGameModal: FC<Props> = (props) => {
           <Tabs defaultValue="search">
             <Tabs.List mb="md">
               <Tabs.Tab value="search">Search</Tabs.Tab>
-              <Tabs.Tab value="code">Manual</Tabs.Tab>
               <Tabs.Tab value="library">Library</Tabs.Tab>
+              <Tabs.Tab value="code">Manual</Tabs.Tab>
             </Tabs.List>
             <Tabs.Panel value="search">
               <AddGameSearchTab
@@ -58,15 +58,15 @@ const AddGameModal: FC<Props> = (props) => {
                 setSubmit={setSubmit}
               />
             </Tabs.Panel>
-            <Tabs.Panel value="code">
-              <AddGameCodeTab
+            <Tabs.Panel value="library">
+              <AddGameLibraryTab
                 state={state}
                 onClose={onClose}
                 setSubmit={setSubmit}
               />
             </Tabs.Panel>
-            <Tabs.Panel value="library">
-              <AddGameLibraryTab
+            <Tabs.Panel value="code">
+              <AddGameCodeTab
                 state={state}
                 onClose={onClose}
                 setSubmit={setSubmit}

diff --git a/tabs/AddGameLibraryTab/AddGameLibraryTab.tsx b/tabs/AddGameLibraryTab/AddGameLibraryTab.tsx
@@ -1,5 +1,6 @@
 "use client";
 
+import LibraryItem from "@/components/LibaryItem/LibraryItem";
 import { type AddGameState } from "@/models/GameModel";
 import API from "@/utils/api";
 import { Button, Flex, Loader, Stack } from "@mantine/core";
@@ -29,7 +30,7 @@ const AddGameLibraryTab: FC<Props> = () => {
 
   const fetchTitles = useCallback(() => {
     setStatus("loading");
-    API.get("/games/library", { params: { limit: 10, offset: 0 } })
+    API.get("/games/library", { params: { limit: 5, offset: 0 } })
       .then(({ data }) => {
         const titlesRes = data?.trophyTitles ?? [];
         setTitles(titlesRes);
@@ -65,7 +66,7 @@ const AddGameLibraryTab: FC<Props> = () => {
       <Stack mt="md">
         {!isLoading &&
           titles?.map((title, index) => (
-            <p key={title.trophyTitleName + index}>{title.trophyTitleName}</p>
+            <LibraryItem key={title.trophyTitleName + index} item={title} />
           ))}
       </Stack>
     </Flex>