Skip to content
Snippets Groups Projects
Commit c08aa95d authored by DESKTOP-9FO96TP\hehexd's avatar DESKTOP-9FO96TP\hehexd
Browse files

added dropdown for add-games buttons

parent f48e0d07
No related branches found
No related tags found
1 merge request!28Planning to play list
Pipeline #38317 passed
Stage: build
Stage: test
Hide whitespace changes
Inline Side-by-side
app/(content)/(gaming)/games/[gameid]/page.tsx
+ 6
− 3
View file @ c08aa95d
import AddGameDropdown from "@/components/add-game-dropdown";
import AddGameToFinishedList from "@/components/add-game-to-finished-list"; import AddGameToFinishedList from "@/components/add-game-to-finished-list";
import AddGameToPlanList from "@/components/add-game-to-plan-list"; import AddGameToPlanList from "@/components/add-game-to-plan-list";
import AddGameToPlayingList from "@/components/add-game-to-playing-list"; import AddGameToPlayingList from "@/components/add-game-to-playing-list";
...@@ -55,7 +56,11 @@ export default async function GameDetail({ params }: { params: { gameid: string ...@@ -55,7 +56,11 @@ export default async function GameDetail({ params }: { params: { gameid: string
priority priority
className="object-cover rounded-lg" /> className="object-cover rounded-lg" />
</Card> </Card>
<div className="flex justify-start p-6">
<AddGameDropdown fullUser={fullUser!} gameid={params.gameid} />
</div>
</div> </div>
<div className="ml-6 md:ml-12 space-y-3"> <div className="ml-6 md:ml-12 space-y-3">
<h1 className="text-2xl font-bold">{data[0].name}</h1> <h1 className="text-2xl font-bold">{data[0].name}</h1>
<h1>released on{' '} <h1>released on{' '}
...@@ -65,6 +70,7 @@ export default async function GameDetail({ params }: { params: { gameid: string ...@@ -65,6 +70,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
<h1 className="pt-3">{data[0].summary}</h1> <h1 className="pt-3">{data[0].summary}</h1>
<div className="pt-6"> <div className="pt-6">
<h1 className="mb-2">Genres</h1> <h1 className="mb-2">Genres</h1>
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{data[0].genres.map((genre, i) => { {data[0].genres.map((genre, i) => {
...@@ -86,9 +92,6 @@ export default async function GameDetail({ params }: { params: { gameid: string ...@@ -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="border-b border-gray-400 dark:border-gray-200" />
<div className="p-6 w-full flex justify-center"> <div className="p-6 w-full flex justify-center">
{user && <AddGameToFavList userGameList={fullUser?.favGameList!} gameId={params.gameid} />} {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> </div>
{/* comments */} {/* comments */}
</div> </div>
......
app/(content)/(user)/[userid]/page.tsx
+ 79
− 74
View file @ c08aa95d
...@@ -21,6 +21,7 @@ export default async function User({ params }: { params: { userid: string } }) { ...@@ -21,6 +21,7 @@ export default async function User({ params }: { params: { userid: string } }) {
} }
}) })
let favoritegames = undefined let favoritegames = undefined
let playingGames = undefined let playingGames = undefined
let finishedGames = undefined let finishedGames = undefined
...@@ -39,93 +40,97 @@ export default async function User({ params }: { params: { userid: string } }) { ...@@ -39,93 +40,97 @@ export default async function User({ params }: { params: { userid: string } }) {
planningGames = await getFavoriteGames(fullUser?.planningGameList!) planningGames = await getFavoriteGames(fullUser?.planningGameList!)
} }
return ( return (
<div className="main-content h-full"> <>
<Card className="w-full h-full overflow-hidden"> <div className="main-content h-full">
<div className="h-64 overflow-hidden"> <Card className="w-full h-full overflow-hidden">
<AspectRatio ratio={889 / 500} className="bg-slate-600 dark:bg-slate-400"> <div className="h-64 overflow-hidden">
{/* profile banner */} <AspectRatio ratio={889 / 500} className="bg-slate-600 dark:bg-slate-400">
{/* <Image {/* profile banner */}
{/* <Image
src={ } src={ }
alt={ } alt={ }
fill fill
priority priority
className="object-center" /> */} className="object-center" /> */}
</AspectRatio> </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> */}
</div> </div>
</div> <div className="p-6 md:p-12 ss:flex">
<div className="px-6 md:px-12"> <UserAvatar
{/* <div className="border-b border-gray-400 dark:border-gray-200" /> */} user={{ name: user.name || null, image: user.image || null }}
{/* tweets */} className="h-52 w-52 -mt-36"
</div> />
</Card > <div className="ml-6 md:ml-12 space-y-3">
<div className="side-content"> <h1 className="text-2xl font-bold">{user.name}</h1>
<Card className="p-6 grid items-start gap-2 bg-secondary"> <h1 className="text-md text-sky-500">@{user.username}</h1>
<h1>Media</h1> {/* <h1 className="pt-3">{user.bio}</h1> */}
<div className="grid grid-cols-1 gap-4"> </div>
{Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
return (
<Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
)
})}
</div> </div>
</Card> <div className="px-6 md:px-12">
</div> {/* <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" > <div className="side-content">
<h1 className="text-2xl font-bold pb-3">Your Favorite Games</h1> <Card className="p-6 grid items-start gap-2 bg-secondary">
<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"> <h1>Media</h1>
{favoritegames ? favoritegames.map((game: IGame) => ( <div className="grid grid-cols-1 gap-4">
<GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} /> {Array.from({ length: 2 }, (_, i) => i + 1).map((i) => {
)) return (
: <Skeleton key={i} className="aspect-[264/374] bg-gray-300" />
<p>You have no favorites currently</p>} )
})}
</div>
</Card>
</div> </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" > </div >
<h1 className="text-2xl font-bold pb-3">Planning on Playing</h1> <div className="main-content">
<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"> <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
{planningGames ? planningGames.map((game: IGame) => ( <h1 className="text-2xl font-bold pb-3">Your Favorite Games</h1>
<GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} /> <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 are currently not planning on playing any games</p>} ))
</div> :
</Card> <p>You have no favorites currently</p>}
</div>
</Card>
<Card className="w-full h-full overflow-hidden p-6 md:p-12" > <Card className="w-full h-full overflow-hidden p-6 md:p-12" >
<h1 className="text-2xl font-bold pb-3">Finished Games</h1> <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"> <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) => ( {playingGames ? playingGames.map((game: IGame) => (
<GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} /> <GameItem id={game.id} name={game.name} cover={game.cover} key={game.id} />
)) ))
: :
<p>You have no Games in your finished-Games-List </p>} <p>You are currently not playing any games</p>}
</div> </div>
</Card> </Card>
</div >
<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
components/add-game-dropdown.tsx 0 → 100644
+ 33
− 0
View file @ c08aa95d
"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>
</>
)
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment