From a0fb79834117347f3396c5e180152fe0647c7c89 Mon Sep 17 00:00:00 2001
From: Damian Martinelli <damianmarti@gmail.com>
Date: Thu, 5 Sep 2024 05:50:49 -0300
Subject: [PATCH] Add submissions page (#74)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* Add submissions page

* Remove use client, metas

---------

Co-authored-by: Carlos Sánchez <oceanrdn@gmail.com>
---
 .../_components/SubmissionCard.tsx            | 29 ++++++++++++++++++
 packages/nextjs/app/submissions/page.tsx      | 30 +++++++++++++++++++
 packages/nextjs/components/Header.tsx         |  7 ++++-
 .../nextjs/utils/scaffold-eth/getMetadata.ts  |  2 +-
 4 files changed, 66 insertions(+), 2 deletions(-)
 create mode 100644 packages/nextjs/app/submissions/_components/SubmissionCard.tsx
 create mode 100644 packages/nextjs/app/submissions/page.tsx

diff --git a/packages/nextjs/app/submissions/_components/SubmissionCard.tsx b/packages/nextjs/app/submissions/_components/SubmissionCard.tsx
new file mode 100644
index 0000000..16b28a8
--- /dev/null
+++ b/packages/nextjs/app/submissions/_components/SubmissionCard.tsx
@@ -0,0 +1,29 @@
+import { Address } from "~~/components/scaffold-eth";
+import { Submission } from "~~/services/database/repositories/submissions";
+
+export const SubmissionCard = ({ submission }: { submission: Submission }) => {
+  return (
+    <div key={submission.id} className="card bg-base-200 text-secondary-content border border-gray-300 rounded-none">
+      <div className="card-body p-4 pt-6">
+        <h2 className="card-title mb-3 xl:text-2xl">{submission.title}</h2>
+        <div className="flex flex-wrap justify-between items-center gap-4">
+          <div className="mt-1 flex shrink-0 gap-3">
+            {submission.linkToRepository && (
+              <a href={submission.linkToRepository} className="inline-block" target="_blank">
+                <img alt="github icon" className="w-6 h-6" src="/icon-github.svg" />
+              </a>
+            )}
+
+            <a href={submission.linkToVideo} className="inline-block" target="_blank">
+              <img alt="youtube icon" className="w-6 h-6" src="/icon-youtube.svg" />
+            </a>
+          </div>
+
+          {submission.builder && <Address address={submission.builder} />}
+        </div>
+
+        <p>{submission.description}</p>
+      </div>
+    </div>
+  );
+};
diff --git a/packages/nextjs/app/submissions/page.tsx b/packages/nextjs/app/submissions/page.tsx
new file mode 100644
index 0000000..4b8547d
--- /dev/null
+++ b/packages/nextjs/app/submissions/page.tsx
@@ -0,0 +1,30 @@
+import { SubmissionCard } from "./_components/SubmissionCard";
+import type { NextPage } from "next";
+import { getAllSubmissions } from "~~/services/database/repositories/submissions";
+import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
+
+export const metadata = getMetadata({
+  title: "Submissions",
+  description: "Check all the submissions for the SE-2 extensions hackathon.",
+});
+
+const Submissions: NextPage = async () => {
+  const submissions = await getAllSubmissions();
+
+  return (
+    <div className="max-w-7xl container mx-auto px-6">
+      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
+        {submissions.length === 0 && (
+          <div role="alert" className="alert col-span-2">
+            <span>No submissions yet.</span>
+          </div>
+        )}
+        {submissions.map(submission => {
+          return <SubmissionCard key={submission.id} submission={submission} />;
+        })}
+      </div>
+    </div>
+  );
+};
+
+export default Submissions;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 2dd0b6a..7d14d29 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -3,7 +3,7 @@
 import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
-import { Bars3Icon, ChatBubbleLeftEllipsisIcon, LockClosedIcon } from "@heroicons/react/24/outline";
+import { Bars3Icon, ChatBubbleLeftEllipsisIcon, DocumentTextIcon, LockClosedIcon } from "@heroicons/react/24/outline";
 import { RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
 import { useAuthSession } from "~~/hooks/useAuthSession";
@@ -15,6 +15,11 @@ type HeaderMenuLink = {
 };
 
 export const menuLinks: HeaderMenuLink[] = [
+  {
+    label: "Submissions",
+    href: "/submissions",
+    icon: <DocumentTextIcon className="h-4 w-4" />,
+  },
   {
     label: "Admin",
     href: "/admin",
diff --git a/packages/nextjs/utils/scaffold-eth/getMetadata.ts b/packages/nextjs/utils/scaffold-eth/getMetadata.ts
index ad531ae..6787e37 100644
--- a/packages/nextjs/utils/scaffold-eth/getMetadata.ts
+++ b/packages/nextjs/utils/scaffold-eth/getMetadata.ts
@@ -3,7 +3,7 @@ import type { Metadata } from "next";
 const baseUrl = process.env.VERCEL_PROJECT_PRODUCTION_URL
   ? `https://${process.env.VERCEL_PROJECT_PRODUCTION_URL}`
   : `http://localhost:${process.env.PORT || 3000}`;
-const titleTemplate = "%s | Scaffold-ETH 2";
+const titleTemplate = "%s | Extensions Hackathon";
 
 export const getMetadata = ({
   title,