Add submissions page (#74)

* Add submissions page * Remove use client, metas --------- Co-authored-by: Carlos Sánchez <[email protected]>
BuidlGuidl · Sep 5, 2024 · a0fb798 · a0fb798
1 parent 46333cf
commit a0fb798
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 2 deletions.
diff --git a/packages/nextjs/app/submissions/_components/SubmissionCard.tsx 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
@@ -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
@@ -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
@@ -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,