From 70203c5df68f54c72283761338d79c70e5e469d1 Mon Sep 17 00:00:00 2001
From: bitbeckers <code@bitbeckers.com>
Date: Thu, 14 Nov 2024 16:13:16 +0700
Subject: [PATCH] feat(board): add hyperboard

---
 app/hyperboard/page.tsx         | 24 ++++++++++++++++++++++++
 components/global/nav-links.tsx |  7 ++++++-
 components/global/nav-menu.tsx  |  4 ++--
 components/hyperboard.tsx       | 23 +++++++++++++++++++++++
 4 files changed, 55 insertions(+), 3 deletions(-)
 create mode 100644 app/hyperboard/page.tsx
 create mode 100644 components/hyperboard.tsx

diff --git a/app/hyperboard/page.tsx b/app/hyperboard/page.tsx
new file mode 100644
index 0000000..72e159b
--- /dev/null
+++ b/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;
diff --git a/components/global/nav-links.tsx b/components/global/nav-links.tsx
index 9d0f252..5e94b97 100644
--- a/components/global/nav-links.tsx
+++ b/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"
diff --git a/components/global/nav-menu.tsx b/components/global/nav-menu.tsx
index 4088c05..af643ff 100644
--- a/components/global/nav-menu.tsx
+++ b/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"
diff --git a/components/hyperboard.tsx b/components/hyperboard.tsx
new file mode 100644
index 0000000..fffba27
--- /dev/null
+++ b/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()}
+			/>
+		</>
+	);
+};