trafficlunar/tomodachi-share
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: 404 page

Browse source
This commit is contained in:
trafficlunar 2025-03-28 21:37:00 +00:00
parent d60eb5f34a
commit 599c59bb38
5 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/app/components/header.tsx
View file

@ -5,7 +5,7 @@ import { Icon } from "@iconify/react";
export default function Header() {
return (
<div className="fixed w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
<div className="fixed top-0 w-full p-4 flex justify-between items-center bg-amber-50 border-b-4 border-amber-200 shadow-md">
<Link href={"/"} className="font-black text-3xl tracking-wide text-orange-400">
TomodachiShare
</Link>
@ -14,26 +14,17 @@ export default function Header() {
<ul className="flex gap-3 items-center">
<li>
<Link
href={"/random"}
className="flex justify-center items-center p-1.5 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
>
<Link href={"/random"} className="button !p-1.5">
<Icon icon="mdi:dice-3" fontSize={28} />
</Link>
</li>
<li>
<Link
href={"/submit"}
className="flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
>
<Link href={"/submit"} className="button">
Submit
</Link>
</li>
<li>
<Link
href={"/login"}
className="flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400"
>
<Link href={"/login"} className="button">
Login
</Link>
</li>

4
src/app/globals.css
View file

@ -11,3 +11,7 @@ body {
background-position: 0 0, 10px 10px;
background-size: 20px 20px;
}
.button {
@apply flex justify-center items-center px-5 py-2 bg-orange-300 border-2 border-orange-400 rounded-full shadow-md hover:bg-orange-400;
}

2
src/app/layout.tsx
View file

@ -20,7 +20,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${lexend.className} antialiased flex flex-col items-center`}>
<body className={`${lexend.className} antialiased flex flex-col items-center py-32`}>
<Header />
{children}
</body>

13
src/app/not-found.tsx Normal file
View file

@ -0,0 +1,13 @@
import Link from "next/link";
export default function NotFound() {
return (
<div className="flex flex-col items-center">
<h2 className="text-7xl font-black">404</h2>
<p className="text-xl">Page not found</p>
<Link href="/" className="button mt-8">
Return Home
</Link>
</div>
);
}

2
src/app/page.tsx
View file

@ -1,6 +1,6 @@
export default function Page() {
return (
<div className="max-w-5xl grid grid-cols-3 gap-4 py-32">
<div className="max-w-5xl grid grid-cols-3 gap-4">
{[...Array(3)].map(() => (
<div className="bg-zinc-50 rounded-3xl border-2 border-amber-300 shadow-lg p-3 transition hover:scale-105">
<img src="https://placehold.co/600x400" alt="mii" className="rounded-xl" />