64 lines
3.2 KiB
TypeScript
64 lines
3.2 KiB
TypeScript
import { RadioIcon, UserCircleIcon } from "@heroicons/react/24/solid";
|
|
import { Link } from "@remix-run/react";
|
|
import type { UserWithFavoriteStationsClientSide } from "~/models/user.server";
|
|
|
|
export function GithubIconLink() {
|
|
return (
|
|
<a aria-label="Github | Awesome Radio" target="_blank" href="https://github.com/wmluke/awesome-radio"
|
|
rel="noopener noreferrer"
|
|
className="btn btn-ghost drawer-button btn-square normal-case">
|
|
<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"
|
|
className="inline-block h-8 w-8 fill-current">
|
|
<path
|
|
d="M256,32C132.3,32,32,134.9,32,261.7c0,101.5,64.2,187.5,153.2,217.9a17.56,17.56,0,0,0,3.8.4c8.3,0,11.5-6.1,11.5-11.4,0-5.5-.2-19.9-.3-39.1a102.4,102.4,0,0,1-22.6,2.7c-43.1,0-52.9-33.5-52.9-33.5-10.2-26.5-24.9-33.6-24.9-33.6-19.5-13.7-.1-14.1,1.4-14.1h.1c22.5,2,34.3,23.8,34.3,23.8,11.2,19.6,26.2,25.1,39.6,25.1a63,63,0,0,0,25.6-6c2-14.8,7.8-24.9,14.2-30.7-49.7-5.8-102-25.5-102-113.5,0-25.1,8.7-45.6,23-61.6-2.3-5.8-10-29.2,2.2-60.8a18.64,18.64,0,0,1,5-.5c8.1,0,26.4,3.1,56.6,24.1a208.21,208.21,0,0,1,112.2,0c30.2-21,48.5-24.1,56.6-24.1a18.64,18.64,0,0,1,5,.5c12.2,31.6,4.5,55,2.2,60.8,14.3,16.1,23,36.6,23,61.6,0,88.2-52.4,107.6-102.3,113.3,8,7.1,15.2,21.1,15.2,42.5,0,30.7-.3,55.5-.3,63,0,5.4,3.1,11.5,11.4,11.5a19.35,19.35,0,0,0,4-.4C415.9,449.2,480,363.1,480,261.7,480,134.9,379.7,32,256,32Z"></path>
|
|
</svg>
|
|
</a>
|
|
);
|
|
}
|
|
|
|
export function UserDropdown() {
|
|
return (
|
|
<div className="dropdown dropdown-end">
|
|
<label tabIndex={0} className="btn btn-ghost btn-circle avatar placeholder">
|
|
<UserCircleIcon className="w-8 h-8" />
|
|
</label>
|
|
<ul tabIndex={0}
|
|
className="menu menu-compact dropdown-content mt-3 p-2 shadow bg-base-200 rounded-box w-30">
|
|
<li>
|
|
<Link to="/logout">Logout</Link>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export type TopNavbarProps = { user?: UserWithFavoriteStationsClientSide; };
|
|
|
|
export function TopNavbar({ user }: TopNavbarProps) {
|
|
return (
|
|
<div className="w-full navbar bg-base-300 lg:justify-end">
|
|
<div className="flex-none lg:hidden">
|
|
<label htmlFor="primary-drawer" className="btn btn-square btn-ghost">
|
|
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"
|
|
className="inline-block w-6 h-6 stroke-current">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"
|
|
d="M4 6h16M4 12h16M4 18h16"></path>
|
|
</svg>
|
|
</label>
|
|
</div>
|
|
<div className="flex-1 px-2 mx-2 gap-2 lg:hidden">
|
|
<RadioIcon className="h-8 w-8 p-0" />
|
|
<h1 className="text-2xl p-0">Awesome Radio</h1>
|
|
</div>
|
|
<div className="flex-none gap-4">
|
|
<GithubIconLink />
|
|
{user ?
|
|
<UserDropdown /> :
|
|
<Link to="/join" className="btn btn-accent btn-sm">Join</Link>
|
|
}
|
|
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|