diff --git a/app/(auth)/layout.tsx b/app/(auth)/layout.tsx
index 0b6cf1f4ad6173e8bfbe529605af4714390e3b12..10b94341a2d8696b665d751074a5f8af0c9a354f 100644
--- a/app/(auth)/layout.tsx
+++ b/app/(auth)/layout.tsx
@@ -1,7 +1,37 @@
+import { GameUnityLogo } from "@/components/logo"
+import { AspectRatio } from "@/components/ui/aspect-ratio"
+import { siteConfig } from "@/lib/config/site"
+import Image from "next/image"
+import Link from 'next/link'
+
interface AuthLayoutProps {
children: React.ReactNode
}
export default function AuthLayout({ children }: AuthLayoutProps) {
- return <div className="min-h-screen">{children}</div>
+ return (
+ <div className="grid min-h-screen grid-cols-1 overflow-hidden md:grid-cols-3 lg:grid-cols-2">
+ <AspectRatio ratio={16 / 9}>
+ <Image
+ src="/auth-image.png"
+ alt="Play a game together"
+ fill
+ className="absolute inset-0 object-cover"
+ priority
+ sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+ />
+ <div className="absolute inset-0 bg-gradient-to-t from-background to-background/60 md:to-background/40" />
+ <Link
+ href="/home"
+ className="absolute left-8 top-6 z-20 flex items-center text-lg font-bold tracking-tight"
+ >
+ <GameUnityLogo className="mr-2 h-6 w-6" aria-hidden="true" />
+ <span>{siteConfig.name}</span>
+ </Link>
+ </AspectRatio>
+ <main className="container absolute top-1/2 col-span-1 flex -translate-y-1/2 items-center md:static md:top-0 md:col-span-2 md:flex md:translate-y-0 lg:col-span-1">
+ {children}
+ </main>
+ </div>
+ )
}
\ No newline at end of file
diff --git a/app/(auth)/login/page.tsx b/app/(auth)/login/page.tsx
index 5cadd641771412cd575c1c1fb9ed2691fbe37311..25e355ff0afc835788a27815a7433b76fddab880 100644
--- a/app/(auth)/login/page.tsx
+++ b/app/(auth)/login/page.tsx
@@ -1,8 +1,5 @@
-import { Icons } from '@/components/icons'
-import { GameUnityLogo } from '@/components/logo'
-import { buttonVariants } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { UserAuthForm } from '@/components/user-auth-form'
-import { cn } from '@/lib/utils'
import Link from 'next/link'
export const metadata = {
@@ -12,39 +9,32 @@ export const metadata = {
export default function LoginPage() {
return (
- <div className="container flex min-h-screen w-screen flex-col items-center justify-center">
- <Link
- href="/"
- className={cn(
- buttonVariants({ variant: "ghost" }),
- "absolute left-4 top-4 md:left-8 md:top-8"
- )}
- >
- <>
- <Icons.chevronLeft />
- Back
- </>
- </Link>
- <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
- <div className="flex flex-col items-center space-y-2 text-center">
- <GameUnityLogo className="h-10 w-10" />
- <h1 className="text-2xl font-semibold tracking-tight">
- Welcome back
- </h1>
- <p className="text-sm text-muted-foreground">
- Enter your email to sign in to your account
- </p>
- </div>
- <UserAuthForm type='login' />
- <p className="px-8 text-center text-sm text-muted-foreground">
- <Link
- href="/signup"
- className="hover:text-brand underline underline-offset-4"
- >
- Don't have an account? Sign Up
- </Link>
- </p>
- </div>
+ <div className="container grid items-center gap-8 pb-8 pt-6 md:py-8 max-w-lg">
+ <Card>
+ <CardHeader className="space-y-1">
+ <CardTitle className="text-2xl">Sign in</CardTitle>
+ <CardDescription>
+ Choose your preferred sign in method
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="grid gap-4">
+ <UserAuthForm type='login' />
+ </CardContent>
+ <CardFooter className="flex flex-wrap items-center justify-between gap-2">
+ <div className="text-sm text-muted-foreground">
+ <span className="mr-1 hidden sm:inline-block">
+ Don't have an account?
+ </span>
+ <Link
+ aria-label="Sign up"
+ href="/signup"
+ className="text-primary underline-offset-4 transition-colors hover:underline"
+ >
+ Sign up
+ </Link>
+ </div>
+ </CardFooter>
+ </Card>
</div>
)
}
\ No newline at end of file
diff --git a/app/(auth)/signup/page.tsx b/app/(auth)/signup/page.tsx
index c35601883d1af6559b71b6e63844db02609f2a0b..4cc41c5b6d721cd67904b9b5ba9b16c32e8681d9 100644
--- a/app/(auth)/signup/page.tsx
+++ b/app/(auth)/signup/page.tsx
@@ -1,6 +1,6 @@
import { Icons } from '@/components/icons'
-import { GameUnityLogo } from '@/components/logo'
import { buttonVariants } from '@/components/ui/button'
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { UserAuthForm } from '@/components/user-auth-form'
import { cn } from '@/lib/utils'
import Link from 'next/link'
@@ -12,61 +12,32 @@ export const metadata = {
export default function SignupPage() {
return (
- <div className="container grid h-screen w-screen flex-col items-center justify-center lg:max-w-none lg:grid-cols-2 lg:px-0">
- <Link
- href="/"
- className={cn(
- buttonVariants({ variant: "ghost" }),
- "absolute left-4 top-4 md:left-8 md:top-8"
- )}
- >
- <>
- <Icons.chevronLeft />
- Back
- </>
- </Link>
- <Link
- href="/login"
- className={cn(
- buttonVariants({ variant: "ghost" }),
- "absolute right-4 top-4 md:right-8 md:top-8"
- )}
- >
- Login
- </Link>
- <div className="hidden h-full bg-muted lg:block" />
- <div className="lg:p-8">
- <div className="mx-auto flex w-full flex-col justify-center space-y-6 sm:w-[350px]">
- <div className="flex flex-col items-center space-y-2 text-center">
- <GameUnityLogo className="h-10 w-10" />
-
- <h1 className="text-2xl font-semibold tracking-tight">
- Create an account
- </h1>
- <p className="text-sm text-muted-foreground">
- Give yourself a username, enter your email and password below to create an account
- </p>
- </div>
+ <div className="container grid items-center gap-8 pb-8 pt-6 md:py-8 max-w-lg">
+ <Card>
+ <CardHeader className="space-y-1">
+ <CardTitle className="text-2xl">Sign up</CardTitle>
+ <CardDescription>
+ Give yourself a username, enter your email and password below to create an account
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="grid gap-4">
<UserAuthForm type='signup' />
- <p className="px-8 text-center text-sm text-muted-foreground">
- By clicking continue, you agree to our{" "}
+ </CardContent>
+ <CardFooter className="flex flex-wrap items-center justify-between gap-2">
+ <div className="text-sm text-muted-foreground">
+ <span className="mr-1 hidden sm:inline-block">
+ Already have an account?{" "}
+ </span>
<Link
- href="/terms"
- className="hover:text-brand underline underline-offset-4"
+ aria-label="Sign in"
+ href="/login"
+ className="text-primary underline-offset-4 transition-colors hover:underline"
>
- Terms of Service
- </Link>{" "}
- and{" "}
- <Link
- href="/privacy"
- className="hover:text-brand underline underline-offset-4"
- >
- Privacy Policy
+ Sign in
</Link>
- .
- </p>
- </div>
- </div>
+ </div>
+ </CardFooter>
+ </Card>
</div>
)
}
\ No newline at end of file
diff --git a/app/(auth)/verify/page.tsx b/app/(auth)/verify/page.tsx
index 7cac28a401f67fa10028bb40232a62f8c40d0cab..6ed8bcfd0b983c8d99245fe39b21cf2c5e0ba11b 100644
--- a/app/(auth)/verify/page.tsx
+++ b/app/(auth)/verify/page.tsx
@@ -1,24 +1,25 @@
-import { GameUnityLogo } from "@/components/logo"
import { buttonVariants } from "@/components/ui/button"
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
import { cn } from "@/lib/utils"
import Link from "next/link"
export default function EmailVerification() {
return (
- <div className="container flex max-w-[64rem] flex-col items-center gap-4 text-center">
- <div className="flex items-center">
- <Link href="/home" className={cn("rounded-full p-3 hover:bg-accent")}>
- <GameUnityLogo className="h-10 w-10" />
- </Link>
- </div>
- <p className="max-w-[42rem] leading-normal sm:text-xl sm:leading-8">
- Your Email has been Verified and your Account was Activated <br /> You can now login
- </p>
- <div className="align-middle">
- <Link href="/login" className={cn(buttonVariants({ size: "lg" }), "mr-6")}>
- Login
- </Link>
- </div>
+ <div className="container grid items-center gap-8 pb-8 pt-6 md:py-8 max-w-lg">
+ <Card>
+ <CardHeader className="space-y-1">
+ <CardTitle className="text-2xl">Email Verified</CardTitle>
+ <CardDescription>
+ <span>Your Email has been Verified and your Account was Activated.</span>
+ </CardDescription>
+ </CardHeader>
+ <CardContent className="grid gap-4 pt-6">
+ <span>You can now continue to login.</span>
+ <Link href="/login" className={cn(buttonVariants())} type="submit">
+ Login
+ </Link>
+ </CardContent>
+ </Card>
</div>
)
}
\ No newline at end of file
diff --git a/app/(content)/(gaming)/games/[gameid]/page.tsx b/app/(content)/(gaming)/games/[gameid]/page.tsx
index 8ae2d7623ae3bb014c185102658d1459ea5e3889..ef0ed17e93b9fd7bb362e6bd1e2e1664c4f661dc 100644
--- a/app/(content)/(gaming)/games/[gameid]/page.tsx
+++ b/app/(content)/(gaming)/games/[gameid]/page.tsx
@@ -20,7 +20,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
if (!data[0]) return <TryAgain />
// TODO put to backend
- const date = formatDate(data[0].first_release_date * 1000)
+ const date = data[0].first_release_date && formatDate(data[0].first_release_date * 1000)
const user = await getCurrentUser()
const fullUser = await db.user.findFirst({
@@ -50,7 +50,7 @@ export default async function GameDetail({ params }: { params: { gameid: string
<AspectRatio ratio={889 / 500}>
<Image
src={data[0].screenshots[0]?.url ?? ""}
- alt={data[0].name}
+ alt={data[0].name ?? ""}
fill
priority
className="object-center" />
@@ -60,8 +60,8 @@ export default async function GameDetail({ params }: { params: { gameid: string
<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}
+ src={data[0].cover.url ?? ""}
+ alt={data[0].name ?? ""}
fill
priority
className="object-cover rounded-lg" />
@@ -77,29 +77,35 @@ export default async function GameDetail({ params }: { params: { gameid: string
</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>
+ <h1 className="text-2xl font-bold">{data[0].name ?? ""}</h1>
+ {date && companies &&
+ <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>
+ {data[0].genres && data[0].genres.length === 0 &&
+ <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>
+ {data[0].platforms && data[0].platforms.length === 0 &&
+ <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>
diff --git a/components/search/components/search-input.tsx b/components/search/components/search-input.tsx
index 628763314c2921837661c0c1caa6c380bcf809a9..d5be323eabddd5667a56b614af33a0419bfcead9 100644
--- a/components/search/components/search-input.tsx
+++ b/components/search/components/search-input.tsx
@@ -25,7 +25,7 @@ export default function SearchInput({ className, ...props }: DocsSearchProps) {
function onSearch(event: React.FormEvent) {
event.preventDefault()
- if (pathname === "/games") {
+ if (pathname.startsWith("/games")) {
if (!searchQuery) {
router.push(pathname)
return