Skip to content

Commit

Permalink
feat(ui): add desc to lib page
Browse files Browse the repository at this point in the history
  • Loading branch information
prostarz committed Nov 17, 2024
1 parent 76d380b commit 23c805a
Show file tree
Hide file tree
Showing 4 changed files with 39 additions and 19 deletions.
18 changes: 12 additions & 6 deletions src/features/library/components/activeLibrary.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type ActiveLibraryProps =
}
| {
title: string;
description?: string;
type: "list";
listId: number;
};
Expand All @@ -19,13 +20,18 @@ const ActiveLibrary = (props: ActiveLibraryProps) => {
return (
<div className="flex flex-col gap-4 p-6 rounded-lg">
{/* Header */}
<div className="flex items-center gap-3">
{type === "game" ? (
<Play size={36} className="text-primary fill-white" />
) : (
<Book size={36} className="text-primary" />
<div className="flex flex-col gap-1.5">
<div className="flex items-center gap-3">
{type === "game" ? (
<Play size={36} className="text-primary fill-white" />
) : (
<Book size={36} className="text-primary" />
)}
<h2 className="text-2xl font-bold capitalize">{title}</h2>
</div>
{type === "list" && props.description && (
<div className="text-muted-foreground">{props.description}</div>
)}
<h2 className="text-2xl font-bold capitalize">{title}</h2>
</div>

{/* Content */}
Expand Down
29 changes: 19 additions & 10 deletions src/features/library/components/containers/activeLibraryGame.tsx
Original file line number Diff line number Diff line change
@@ -1,21 +1,30 @@
import { useMemo } from "react";
import { useGames } from "../../hooks/useGames";
import ContinuePlayingCard from "../cards/continuePlaying";

const ActiveLibraryGame = () => {
const { fetchGames, deleteGame, updateGame, games } = useGames(true);

const gamesCount = useMemo(() => Object.values(games)?.length, [games]);

return (
<div className="flex flex-wrap gap-4">
{Object.values(games).map((game) => (
<ContinuePlayingCard
key={game.id}
bg_image={game.game_icon ?? ""}
game={game}
fetchGames={fetchGames}
deleteGame={deleteGame}
updateGame={updateGame}
/>
))}
{gamesCount ? (
Object.values(games).map((game) => (
<ContinuePlayingCard
key={game.id}
bg_image={game.game_icon ?? ""}
game={game}
fetchGames={fetchGames}
deleteGame={deleteGame}
updateGame={updateGame}
/>
))
) : (
<div className="text-lg font-bold text-center">
You have not added any games to continue playing
</div>
)}
</div>
);
};
Expand Down
10 changes: 7 additions & 3 deletions src/features/library/components/containers/activeLibraryList.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,13 @@ const ActiveLibraryList = ({ listId }: ActiveLibraryListProps) => {

return listId && data && data.length > 0 ? (
<div className="flex flex-wrap gap-4">
{data.map((game) => (
<ListCard key={game.game_id} {...game} />
))}
{data?.length ? (
data.map((game) => <ListCard key={game.game_id} {...game} />)
) : (
<div className="text-lg font-bold text-center">
No games in this list
</div>
)}
</div>
) : null;
};
Expand Down
1 change: 1 addition & 0 deletions src/routes/library.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ function Library() {
<ActiveLibrary
type="list"
listId={list.id}
description={list.description}
title={list.name}
key={list.id}
/>
Expand Down

0 comments on commit 23c805a

Please sign in to comment.