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

style: make everything look a lot better

Browse source
This commit is contained in:
trafficlunar 2025-03-28 21:31:10 +00:00
parent 7f78c9ecc4
commit d60eb5f34a
4 changed files with 31 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -5,26 +5,35 @@ import { Icon } from "@iconify/react";
export default function Header() {
return (
<div className="fixed w-full p-4 flex justify-between items-center bg-amber-100 border-b-2 border-amber-200">
<Link href={"/"} className="font-black text-3xl">
<div className="fixed 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>
<SearchBar />
<ul className="flex gap-2 items-center">
<ul className="flex gap-3 items-center">
<li>
<Link href={"/login"} className="flex justify-center items-center p-0.5 bg-orange-400 border-2 rounded">
<Icon icon="ri:dice-fill" fontSize={32} />
<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"
>
<Icon icon="mdi:dice-3" fontSize={28} />
</Link>
</li>
<li>
<Link href={"/login"} className="flex justify-center items-center px-4 py-1.5 bg-orange-400 border-2 rounded">
<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"
>
Submit
</Link>
</li>
<li>
<Link href={"/login"} className="flex justify-center items-center px-4 py-1.5 bg-orange-400 border-2 rounded">
<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"
>
Login
</Link>
</li>

4
src/app/components/search-bar.tsx
View file

@ -4,8 +4,8 @@ import { Icon } from "@iconify/react";
export default function SearchBar() {
return (
<div className="max-w-md w-full flex rounded-xlfocus-within:ring-4 ring-orange-400/50 transition">
<input type="text" placeholder="Search..." className="bg-orange-200 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full" />
<div className="max-w-md w-full flex rounded-xl focus-within:ring-[3px] ring-orange-200/75 transition shadow-md">
<input type="text" placeholder="Search..." className="bg-orange-300 border-2 border-orange-400 py-2 px-3 rounded-l-xl outline-0 w-full" />
<button className="bg-orange-400 p-2 w-12 rounded-r-xl flex justify-center items-center">
<Icon icon="ic:baseline-search" fontSize={24} />
</button>

6
src/app/layout.tsx
View file

@ -1,10 +1,10 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import { Lexend } from "next/font/google";
import "./globals.css";
import Header from "./components/header";
const inter = Inter({
const lexend = Lexend({
subsets: ["latin"],
});
@ -20,7 +20,7 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={`${inter.className} antialiased flex flex-col items-center`}>
<body className={`${lexend.className} antialiased flex flex-col items-center`}>
<Header />
{children}
</body>

32
src/app/page.tsx
View file

@ -1,38 +1,18 @@
export default function Page() {
return (
<div className="max-w-5xl grid grid-cols-3 gap-4 py-32">
<div className="bg-zinc-50 rounded-2xl border-2 border-zinc-200">
<img src="https://placehold.co/600x400" alt="mii" className="rounded-t-xl" />
<div className="p-4 border-t-2 border-zinc-200">
{[...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" />
<div className="p-4">
<h3 className="font-bold text-2xl">Frieren</h3>
<div id="tags" className="flex gap-1 mt-1 *:px-1.5 *:py-1 *:bg-orange-400 *:rounded *:text-xs">
<span>Anime</span>
<span>Test</span>
</div>
</div>
</div>
<div className="bg-zinc-50 rounded-2xl border-2 border-zinc-200">
<img src="https://placehold.co/600x400" alt="mii" className="rounded-t-xl" />
<div className="p-4 border-t-2 border-zinc-200">
<h3 className="font-bold text-2xl">Frieren</h3>
<div id="tags" className="flex gap-1 mt-1 *:px-1.5 *:py-1 *:bg-orange-400 *:rounded *:text-xs">
<span>Anime</span>
<span>Test</span>
</div>
</div>
</div>
<div className="bg-zinc-50 rounded-2xl border-2 border-zinc-200">
<img src="https://placehold.co/600x400" alt="mii" className="rounded-t-xl" />
<div className="p-4 border-t-2 border-zinc-200">
<h3 className="font-bold text-2xl">Frieren</h3>
<div id="tags" className="flex gap-1 mt-1 *:px-1.5 *:py-1 *:bg-orange-400 *:rounded *:text-xs">
<div id="tags" className="flex gap-1 mt-1 *:px-2 *:py-1 *:bg-orange-300 *:rounded-full *:text-xs">
<span>Anime</span>
<span>Test</span>
</div>
</div>
</div>
))}
</div>
);
}