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

feat: basic design

Browse source
This commit is contained in:
trafficlunar 2025-03-28 21:14:15 +00:00
parent 44b3e493aa
commit 7f78c9ecc4
7 changed files with 262 additions and 150 deletions
Download patch file Download diff file Expand all files Collapse all files

34
src/app/components/header.tsx Normal file
View file

@ -0,0 +1,34 @@
import Link from "next/link";
import SearchBar from "./search-bar";
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">
TomodachiShare
</Link>
<SearchBar />
<ul className="flex gap-2 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>
</li>
<li>
<Link href={"/login"} className="flex justify-center items-center px-4 py-1.5 bg-orange-400 border-2 rounded">
Submit
</Link>
</li>
<li>
<Link href={"/login"} className="flex justify-center items-center px-4 py-1.5 bg-orange-400 border-2 rounded">
Login
</Link>
</li>
</ul>
</div>
);
}

14
src/app/components/search-bar.tsx Normal file
View file

@ -0,0 +1,14 @@
"use client";
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" />
<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>
</div>
);
}