From c08aa95dc589f4d0eff26316e7d6c0db98af6173 Mon Sep 17 00:00:00 2001
From: "DESKTOP-9FO96TP\\hehexd" <davidjakszta@outlook.de>
Date: Wed, 21 Jun 2023 15:32:29 +0200
Subject: [PATCH] added dropdown for add-games buttons
---
.../(gaming)/games/[gameid]/page.tsx | 9 +-
app/(content)/(user)/[userid]/page.tsx | 153 +++++++++---------
components/add-game-dropdown.tsx | 33 ++++
3 files changed, 118 insertions(+), 77 deletions(-)
create mode 100644 components/add-game-dropdown.tsx
diff --git a/app/(content)/(gaming)/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
index 7052233..b3f1924 100644
--- a/app/(content)/(gaming)/games/[gameid]/page.tsx
+++ b/app/(content)/(gaming)/games/[gameid]/page.tsx
@@ -1,3 +1,4 @@
+import AddGameDropdown from "@/components/add-game-dropdown";
import AddGameToFinishedList from "@/components/add-game-to-finished-list";
import AddGameToPlanList from "@/components/add-game-to-plan-list";
import AddGameToPlayingList from "@/components/add-game-to-playing-list";
@@ -55,7 +56,11 @@ export default async function GameDetail({ params }: { params: { gameid: string
priority
className="object-cover rounded-lg" />
</Card>
+ <div className="flex justify-start p-6">
+ <AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
+ </div>
</div>
+
<div className="ml-6 md:ml-12 space-y-3">
<h1 className="text-2xl font-bold">{data[0].name}</h1>
<h1>released on{' '}
@@ -65,6 +70,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
<h1 className="pt-3">{data[0].summary}</h1>
<div className="pt-6">
+
<h1 className="mb-2">Genres</h1>
<div className="flex flex-wrap gap-2">
{data[0].genres.map((genre, i) => {
@@ -86,9 +92,6 @@ export default async function GameDetail({ params }: { params: { gameid: string
<div className="border-b border-gray-400 dark:border-gray-200" />
<div className="p-6 w-full flex justify-center">
{user && <AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />}
- <AddGameToPlanList user={fullUser!} gameId={params.gameid} />
- <AddGameToFinishedList user={fullUser!} gameId={params.gameid} />
- <AddGameToPlayingList user={fullUser!} gameId={params.gameid} />
</div>
{/* comments */}
</div>
diff --git a/app/(content)/(user)/[userid]/page.tsx b/app/(content)/(user)/[userid]/page.tsx
index 874cee9..f7eb0fe 100644
--- a/app/(content)/(user)/[userid]/page.tsx
+++ b/app/(content)/(user)/[userid]/page.tsx
@@ -21,6 +21,7 @@ export default async function User({ params }: { params: { userid: string } }) {
}
})
+
let favoritegames = undefined
let playingGames = undefined
let finishedGames = undefined
@@ -39,93 +40,97 @@ export default async function User({ params }: { params: { userid: string } }) {
planningGames = await getFavoriteGames(fullUser?.planningGameList!)
}
return (
- <div className="main-content h-full">
- <Card className="w-full h-full overflow-hidden">
- <div className="h-64 overflow-hidden">
- <AspectRatio ratio={889 / 500} className="bg-slate-600 dark:bg-slate-400">
- {/* profile banner */}
- {/* <Image
+ <>
+ <div className="main-content h-full">
+ <Card className="w-full h-full overflow-hidden">
+ <div className="h-64 overflow-hidden">
+ <AspectRatio ratio={889 / 500} className="bg-slate-600 dark:bg-slate-400">
+ {/* profile banner */}
+ {/* <Image
src={ }
alt={ }
fill
priority
className="object-center" /> */}
- </AspectRatio>
- </div>
- <div className="p-6 md:p-12 ss:flex">
- <UserAvatar
- user={{ name: user.name || null, image: user.image || null }}
- className="h-52 w-52 -mt-36"
- />
- <div className="ml-6 md:ml-12 space-y-3">
- <h1 className="text-2xl font-bold">{user.name}</h1>
- <h1 className="text-md text-sky-500">@{user.username}</h1>
- {/* <h1 className="pt-3">{user.bio}</h1> */}
+ </AspectRatio>
</div>
- </div>
- <div className="px-6 md:px-12">
- {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
- {/* tweets */}
- </div>
- </Card >
- <div className="side-content">
- <Card className="p-6 grid items-start gap-2 bg-secondary">
- <h1>Media</h1>
- <div className="grid grid-cols-1 gap-4">
- {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
- return (
- <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
- )
- })}
+ <div className="p-6 md:p-12 ss:flex">
+ <UserAvatar
+ user={{ name: user.name || null, image: user.image || null }}
+ className="h-52 w-52 -mt-36"
+ />
+ <div className="ml-6 md:ml-12 space-y-3">
+ <h1 className="text-2xl font-bold">{user.name}</h1>
+ <h1 className="text-md text-sky-500">@{user.username}</h1>
+ {/* <h1 className="pt-3">{user.bio}</h1> */}
+ </div>
</div>
- </Card>
- </div>
+ <div className="px-6 md:px-12">
+ {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
+ {/* tweets */}
+ </div>
+ </Card >
- <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
- <h1 className="text-2xl font-bold pb-3">Your Favorite Games</h1>
- <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
- {favoritegames ? favoritegames.map((game: IGame) => (
- <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
- ))
- :
- <p>You have no favorites currently</p>}
+ <div className="side-content">
+ <Card className="p-6 grid items-start gap-2 bg-secondary">
+ <h1>Media</h1>
+ <div className="grid grid-cols-1 gap-4">
+ {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
+ return (
+ <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
+ )
+ })}
+ </div>
+ </Card>
</div>
- </Card>
- <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
- <h1 className="text-2xl font-bold pb-3">Currently Playing</h1>
- <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
- {playingGames ? playingGames.map((game: IGame) => (
- <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
- ))
- :
- <p>You are currently not playing any games</p>}
- </div>
- </Card>
- <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
- <h1 className="text-2xl font-bold pb-3">Planning on Playing</h1>
- <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
- {planningGames ? planningGames.map((game: IGame) => (
- <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
- ))
- :
- <p>You are currently not planning on playing any games</p>}
- </div>
- </Card>
+ </div >
+ <div className="main-content">
+ <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+ <h1 className="text-2xl font-bold pb-3">Your Favorite Games</h1>
+ <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+ {favoritegames ? favoritegames.map((game: IGame) => (
+ <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+ ))
+ :
+ <p>You have no favorites currently</p>}
+ </div>
+ </Card>
- <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
- <h1 className="text-2xl font-bold pb-3">Finished Games</h1>
- <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
- {finishedGames ? finishedGames.map((game: IGame) => (
- <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
- ))
- :
- <p>You have no Games in your finished-Games-List </p>}
- </div>
- </Card>
- </div >
+ <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+ <h1 className="text-2xl font-bold pb-3">Currently Playing</h1>
+ <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+ {playingGames ? playingGames.map((game: IGame) => (
+ <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+ ))
+ :
+ <p>You are currently not playing any games</p>}
+ </div>
+ </Card>
+ <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+ <h1 className="text-2xl font-bold pb-3">Planning on Playing</h1>
+ <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+ {planningGames ? planningGames.map((game: IGame) => (
+ <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+ ))
+ :
+ <p>You are currently not planning on playing any games</p>}
+ </div>
+ </Card>
+ <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
+ <h1 className="text-2xl font-bold pb-3">Finished Games</h1>
+ <div className="grid grid-cols-1 ss:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4 lg:gap-8 items-center">
+ {finishedGames ? finishedGames.map((game: IGame) => (
+ <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
+ ))
+ :
+ <p>You have no Games in your finished-Games-List </p>}
+ </div>
+ </Card>
+ </div>
+ </>
)
}
\ No newline at end of file
diff --git a/components/add-game-dropdown.tsx b/components/add-game-dropdown.tsx
new file mode 100644
index 0000000..e8fb0d4
--- /dev/null
+++ b/components/add-game-dropdown.tsx
@@ -0,0 +1,33 @@
+"use client"
+
+import { useState } from "react";
+import { Card } from "./ui/card";
+import GameItem from "./game-item";
+import { IGame } from "@/types/igdb-types";
+import { User } from "@prisma/client";
+import AddGameToPlanList from "./add-game-to-plan-list";
+import AddGameToPlayingList from "./add-game-to-playing-list";
+import AddGameToFinishedList from "./add-game-to-finished-list";
+import { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectTrigger, SelectValue } from "./ui/select";
+
+export default function AddGameDropdown(props: { gameid: string, fullUser: User }) {
+ return (
+ <>
+ <Select>
+ <SelectTrigger className={`bg-background border-full w-32 h-8}`}>
+ <SelectValue placeholder="Status" />
+ </SelectTrigger>
+ <SelectContent>
+ <SelectGroup>
+ <SelectLabel>Status</SelectLabel>
+ <AddGameToPlanList user={props.fullUser!} gameId={props.gameid} />
+ <AddGameToFinishedList user={props.fullUser!} gameId={props.gameid} />
+ <AddGameToPlayingList user={props.fullUser!} gameId={props.gameid} />
+ </SelectGroup>
+ </SelectContent>
+ </Select>
+
+ </>
+ )
+
+}
--
GitLab