trafficlunar/tomodachi-share
1
0
Fork 0
mirror of https://github.com/trafficlunar/tomodachi-share.git synced 2026-06-28 14:44:15 +00:00
Code Issues 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
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>