Skip to content
Snippets Groups Projects
Select Git revision
  • main default protected
  • testing protected
2 results
Blame Permalink
page.tsx 4.50 KiB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101 






import { AspectRatio } from "@/components/ui/aspect-ratio";
import { Button } from "@/components/ui/button";
import { Card } from "@/components/ui/card";
import { getGame } from "@/lib/igdb";
import { IGame } from "@/types/igdb-types";
import Image from "next/image";

// renders a single game detail page
export default async function GameDetail({ params }: { params: { gameid: string } }) {
    const data: IGame[] = await getGame(parseInt(params.gameid))

    const date = new Date(data[0].first_release_date * 1000).toLocaleDateString('en-US', {
        month: 'short',
        day: 'numeric',
        year: 'numeric'
    })

    const companies = data[0].involved_companies.map((company) => {
        if (company !== data[0].involved_companies[0]) {
            return `, ${company.company.name}`
        }
        return company.company.name
    })

    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}>
                        <Image
                            src={data[0].screenshots[0].url}
                            alt={data[0].name}
                            fill
                            priority
                            className="object-center" />
                    </AspectRatio>
                </div>
                <div className="p-6 md:p-12 ss:flex">
                    <div className="aspect-[264/374]">
                        <Card className="aspect-[264/374] relative block group -mt-36 w-52 flex-shrink-0">
                            <Image
                                src={data[0].cover.url}
                                alt={data[0].name}
                                fill
                                priority
                                className="object-cover rounded-lg" />
                        </Card>
                    </div>
                    <div className="ml-6 md:ml-12 space-y-3">
                        <h1 className="text-2xl font-bold">{data[0].name}</h1>
                        <h1>released on{' '}
                            <span className="font-semibold">{date}</span> by{' '}
                            <span className="font-semibold">{companies}</span>
                        </h1>
                        <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) => {
                                    return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{genre.name}</Button>
                                })}
                            </div>
                        </div>
                        <div className="pt-6">
                            <h1 className="mb-2">Platforms</h1>
                            <div className="flex flex-wrap gap-2">
                                {data[0].platforms.map((platform, i) => {
                                    return <Button key={i} variant="outline" size="lg" className="px-6 py-3">{platform.name}</Button>
                                })}
                            </div>
                        </div>
                    </div>
                </div>
                <div className="px-6 md:px-12">
                    {/* <div className="border-b border-gray-400 dark:border-gray-200" /> */}
                    {/* comments */}
                </div>
            </Card >
            <div className="side-content">
                <Card className="p-6 grid items-start gap-2 bg-secondary">
                    <h1>Screenshots</h1>
                    <div className="grid grid-cols-1 gap-4">
                        {data[0].screenshots.slice(1, 4).map((screenshot, i) => {
                            return (
                                <Card key={i} className="aspect-[264/374] relative block">
                                    <Image
                                        src={screenshot.url}
                                        alt={data[0].name}
                                        fill
                                        priority
                                        className="object-cover rounded-lg" />
                                </Card>
                            )
                        })}
                    </div>
                </Card>
            </div>
        </div >
    )
}