feat(board): add hyperboard

app/hyperboard/page.tsx

@@ -0,0 +1,24 @@
+import { Hyperboard } from "@/components/hyperboard";
+import { hyperboardId } from "@/config/hypercert";
+
+const HyperboardPage = () => {
+	return (
+		<main className="container flex max-w-4xl flex-col gap-4 pb-[64px] md:pb-12">
+			<header className="flex w-3/4 flex-col gap-2 py-4">
+				<h1 className="font-semibold text-xl md:text-3xl">
+					Render your collection as a hyperboard.
+				</h1>
+				<p className="text-sm">
+					A hyperboard provides a visual representation of your collection. This
+					empowers your application with an intuitive representation of shared
+					ownership of collections of hypercerts.
+				</p>
+			</header>
+			<section>
+				<Hyperboard hyperboardId={hyperboardId} showTable={true} />
+			</section>
+		</main>
+	);
+};
+
+export default HyperboardPage;

components/global/nav-links.tsx

@@ -40,7 +40,7 @@ const NavLinks = () => {
 	return (
 		<ul className="hidden gap-1 md:flex">
 			<li>
-				<NavLink href="/" isActive={isActive("/reports")}>
+				<NavLink href="/" isActive={isActive("/hypercerts")}>
 					Browse
 				</NavLink>
 			</li>
@@ -49,6 +49,11 @@ const NavLinks = () => {
 					Mint
 				</NavLink>
 			</li>
+			<li>
+				<NavLink href="/hyperboard" isActive={isActive("/hyperboard")}>
+					Hyperboard
+				</NavLink>
+			</li>
 			<li>
 				<a
 					href="https://www.hypercerts.org/docs"

components/global/nav-menu.tsx

@@ -12,8 +12,8 @@ const NavMenu = () => {
 				<div className="flex flex-1 items-center py-5 md:absolute md:left-[50%]">
 					<Link
 						className="flex w-full justify-center"
-						aria-label="ZuDeck Home"
-						href="/reports"
+						aria-label="Home"
+						href="/hypercerts"
 					>
 						<Logo
 							className="h-8 w-auto"

components/hyperboard.tsx

@@ -0,0 +1,23 @@
+import Script from "next/script";
+
+type HyperboardProps = {
+	hyperboardId: string;
+	showTable: boolean;
+};
+
+export const Hyperboard = ({ hyperboardId, showTable }: HyperboardProps) => {
+	return (
+		<>
+			<Script
+				async
+				src="https://staging.hyperboards.org/widget/hyperboard-widget.js"
+				type="module"
+			/>
+			<div
+				className="hyperboard-widget"
+				data-hyperboard-id={hyperboardId}
+				data-hyperboard-show-table={showTable.toString()}
+			/>
+		</>
+	);
+};