Files
MineGeo/components/Shell.tsx

70 lines
1.7 KiB
TypeScript

import Link from "next/link";
import { Compass, ArrowUpRight, Globe2 } from "lucide-react";
export function Brand() {
return (
<Link href="/" className="brand" aria-label="MineGeo home">
<span className="brand-cube">
<span />
</span>
Mine<span>Geo</span>
<sup>BETA</sup>
</Link>
);
}
export function Header() {
return (
<header className="site-header">
<div className="header-inner">
<Brand />
<nav aria-label="Main navigation">
<Link href="/servers">Play & maps</Link>
<Link href="/downloads">Downloads</Link>
<Link href="/about">Guide</Link>
</nav>
<Link href="/dashboard" className="header-account">
My account <ArrowUpRight size={15} />
</Link>
</div>
</header>
);
}
export function Footer() {
return (
<footer className="site-footer">
<div>
<Brand />
<p>A familiar world. A whole new perspective.</p>
</div>
<div>
<span>
<Globe2 size={14} /> English
</span>
<Link href="/downloads">Tools & downloads</Link>
<Link href="/moderation">Moderation</Link>
</div>
<p className="disclaimer">
An independent community project. Not affiliated with Mojang or
Microsoft.
</p>
</footer>
);
}
export function EmptyState({
title,
children,
}: {
title: string;
children: React.ReactNode;
}) {
return (
<div className="empty-state">
<Compass size={36} />
<h3>{title}</h3>
<p>{children}</p>
<Link className="button primary" href="/downloads">
Create the first map <ArrowUpRight size={16} />
</Link>
</div>
);
}