From 036a5819c9d7847e40cf7671edd634aad2af00f0 Mon Sep 17 00:00:00 2001
From: Hunter Chang <716376+ChangoMan@users.noreply.github.com>
Date: Fri, 23 Aug 2024 11:37:45 +0800
Subject: [PATCH 1/3] use grid for admin view. adjust card layout

---
 .../app/admin/_components/SubmissionCard.tsx  | 178 +++++++++++-------
 .../app/admin/_components/Submissions.tsx     |   6 +-
 packages/nextjs/public/logo-telegram.svg      |   1 +
 3 files changed, 111 insertions(+), 74 deletions(-)
 create mode 100644 packages/nextjs/public/logo-telegram.svg

diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
index eaca930..ee99ccd 100644
--- a/packages/nextjs/app/admin/_components/SubmissionCard.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
@@ -87,89 +87,125 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
   const currentVote = submission.votes.find(vote => vote.builder === connectedAddress);
   const score = currentVote ? currentVote.score : 0;
 
+  const telegramUser = submission.telegram?.replace("@", "");
+
   return (
-    <div key={submission.id} className="indicator">
-      <div className="indicator-item badge badge-secondary flex flex-col p-8">
-        <div className="text-2xl font-bold">{scoreAvg}</div>
-        <div>{submission.votes.length} votes</div>
-      </div>
-      <div className="card bg-primary text-primary-content">
-        <div className="card-body">
-          <div className="flex mb-4 items-center">
-            <div className="rating flex items-center">
+    <div key={submission.id} className="card bg-secondary text-secondary-content border border-primary rounded-none">
+      <div className="card-body pt-6">
+        <h2 className="card-title mb-4 text-2xl xl:text-3xl">{submission.title}</h2>
+        <div className="flex justify-between">
+          <div className="mt-1 flex gap-4">
+            {submission.linkToRepository && (
+              <a href={submission.linkToRepository} className="inline-block" target="_blank">
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                >
+                  <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
+                  <path d="M9 18c-4.51 2-5-2-7-2" />
+                </svg>
+              </a>
+            )}
+
+            <a href={submission.linkToVideo} className="inline-block" target="_blank">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              >
+                <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+                <path d="m10 15 5-3-5-3z" />
+              </svg>
+            </a>
+
+            {submission.telegram && (
+              <a href={`https://t.me/${telegramUser}`} className="inline-block" target="_blank">
+                <img alt="telegram logo" className="w-6 h-6" src="/logo-telegram.svg" />
+              </a>
+            )}
+          </div>
+          {submission.builder && <Address address={submission.builder} />}
+        </div>
+
+        <p>{submission.description}</p>
+        {submission.feedback && <p>Extensions feedback: {submission.feedback}</p>}
+
+        <div className="flex mb-4 items-center">
+          <div className="rating flex items-center">
+            <input
+              type="radio"
+              id={`rating_${submission.id}_0`}
+              name={`rating_${submission.id}`}
+              className="rating-hidden"
+              checked={score === 0}
+              onChange={() => vote(0)}
+            />
+            {[...Array(10)].map((_e, i) => (
               <input
                 type="radio"
-                id={`rating_${submission.id}_0`}
                 name={`rating_${submission.id}`}
-                className="rating-hidden"
-                checked={score === 0}
-                onChange={() => vote(0)}
+                className="mask mask-star"
+                title={(i + 1).toString()}
+                checked={score === i + 1}
+                key={i}
+                onChange={() => vote(i + 1)}
               />
-              {[...Array(10)].map((_e, i) => (
-                <input
-                  type="radio"
-                  name={`rating_${submission.id}`}
-                  className="mask mask-star"
-                  title={(i + 1).toString()}
-                  checked={score === i + 1}
-                  key={i}
-                  onChange={() => vote(i + 1)}
-                />
-              ))}
-              {score > 0 && (
-                <label className="cursor-pointer underline text-sm ml-3" htmlFor={`rating_${submission.id}_0`}>
-                  Clear
-                </label>
-              )}
-            </div>
+            ))}
+            {score > 0 && (
+              <label className="cursor-pointer underline text-sm ml-3" htmlFor={`rating_${submission.id}_0`}>
+                Clear
+              </label>
+            )}
           </div>
-          <h2 className="card-title">{submission.title}</h2>
-          {submission.linkToRepository && (
-            <a href={submission.linkToRepository} className="link" target="_blank">
-              {submission.linkToRepository}
-            </a>
-          )}
-          <p>{submission.description}</p>
-          <p>
-            Video:
-            <a href={submission.linkToVideo} className="link" target="_blank">
-              {submission.linkToVideo}
-            </a>
-          </p>
-          {submission.builder && <Address address={submission.builder} />}
-          {submission.telegram && <p>Telegram: {submission.telegram}</p>}
-          {submission.feedback && <p>Extensions feedback: {submission.feedback}</p>}
-          <div className="collapse">
-            <input type="checkbox" />
-            <div className="collapse-title text-xl font-medium">{submission.comments.length} comments</div>
-            <div className="collapse-content">
-              {submission.comments?.map(comment => (
-                <div key={comment.id} className="card bg-base-200 text-base-content mb-4">
-                  <div className="card-body">
-                    <Address address={comment.builder} />
-                    <p className="m-1">{comment.comment}</p>
-                    <p>{comment.createdAt ? getFormattedDateTime(new Date(comment.createdAt)) : "-"}</p>
-                  </div>
-                </div>
-              ))}
-              <div className="card bg-base-200 text-base-content mb-4">
+        </div>
+
+        <div className="collapse">
+          <input type="checkbox" />
+          <div className="collapse-title text-xl font-medium">{submission.comments.length} comments</div>
+          <div className="collapse-content">
+            {submission.comments?.map(comment => (
+              <div key={comment.id} className="card bg-base-200 text-base-content mb-4">
                 <div className="card-body">
-                  <form action={clientFormAction} className="card-body space-y-3 p-0">
-                    <textarea
-                      className="p-2 h-32"
-                      value={newComment}
-                      name="comment"
-                      onChange={field => {
-                        setNewComment(field.target.value);
-                      }}
-                    />
-                    <button className="btn btn-primary">Add Comment</button>
-                  </form>
+                  <Address address={comment.builder} />
+                  <p className="m-1">{comment.comment}</p>
+                  <p>{comment.createdAt ? getFormattedDateTime(new Date(comment.createdAt)) : "-"}</p>
                 </div>
               </div>
+            ))}
+            <div className="card bg-base-200 text-base-content mb-4">
+              <div className="card-body">
+                <form action={clientFormAction} className="card-body space-y-3 p-0">
+                  <textarea
+                    className="p-2 h-32"
+                    value={newComment}
+                    name="comment"
+                    onChange={field => {
+                      setNewComment(field.target.value);
+                    }}
+                  />
+                  <button className="btn btn-primary">Add Comment</button>
+                </form>
+              </div>
             </div>
           </div>
         </div>
+        <div className="badge badge-accent flex flex-col p-8 border border-accent-content">
+          <div className="text-2xl font-bold">{scoreAvg}</div>
+          <div>{submission.votes.length} votes</div>
+        </div>
       </div>
     </div>
   );
diff --git a/packages/nextjs/app/admin/_components/Submissions.tsx b/packages/nextjs/app/admin/_components/Submissions.tsx
index 7cd59f7..8301f63 100644
--- a/packages/nextjs/app/admin/_components/Submissions.tsx
+++ b/packages/nextjs/app/admin/_components/Submissions.tsx
@@ -5,12 +5,12 @@ export const Submissions = async () => {
   const submissions = await getAllSubmissions();
 
   return (
-    <>
-      <div className="flex items-center flex-col flex-grow pt-14 space-y-12">
+    <div className="px-8 pt-14">
+      <div className="grid gap-8 lg:grid-cols-3">
         {submissions?.map(submission => {
           return <SubmissionCard key={submission.id} submission={submission} />;
         })}
       </div>
-    </>
+    </div>
   );
 };
diff --git a/packages/nextjs/public/logo-telegram.svg b/packages/nextjs/public/logo-telegram.svg
new file mode 100644
index 0000000..b49dbf7
--- /dev/null
+++ b/packages/nextjs/public/logo-telegram.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="enable-background:new 0 0 50 50" viewBox="0 0 50 50"><path d="M43.361 7.242c-1.284.516-37.728 16.147-37.728 16.147s-1.765.614-1.625 1.748 1.58 1.653 1.58 1.653l9.38 3.212s2.832 9.448 3.39 11.241c.558 1.796 1.004 1.838 1.004 1.838.518.23.992-.137.992-.137l6.061-5.622 9.448 7.369c2.554 1.134 3.483-1.228 3.483-1.228l6.509-33.925c.576-2.625-1.138-2.839-2.494-2.296z" style="fill:none;stroke:#000;stroke-width:3;stroke-miterlimit:10"/><path d="m15 30 24-16-17 20M20 43l2-9 4 3" style="fill:none;stroke:#000;stroke-width:3;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10"/></svg>
\ No newline at end of file

From 9a8587f5f230b1a3c7c0917bdfc884107842e593 Mon Sep 17 00:00:00 2001
From: Hunter Chang <716376+ChangoMan@users.noreply.github.com>
Date: Fri, 23 Aug 2024 12:12:10 +0800
Subject: [PATCH 2/3] adjust admin card padding and grid spacing

---
 packages/nextjs/app/admin/_components/SubmissionCard.tsx | 7 ++++---
 packages/nextjs/app/admin/_components/Submissions.tsx    | 4 ++--
 2 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
index ee99ccd..d92f18b 100644
--- a/packages/nextjs/app/admin/_components/SubmissionCard.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
@@ -91,10 +91,10 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
 
   return (
     <div key={submission.id} className="card bg-secondary text-secondary-content border border-primary rounded-none">
-      <div className="card-body pt-6">
+      <div className="card-body p-5 xl:p-6">
         <h2 className="card-title mb-4 text-2xl xl:text-3xl">{submission.title}</h2>
-        <div className="flex justify-between">
-          <div className="mt-1 flex gap-4">
+        <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">
                 <svg
@@ -137,6 +137,7 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
               </a>
             )}
           </div>
+
           {submission.builder && <Address address={submission.builder} />}
         </div>
 
diff --git a/packages/nextjs/app/admin/_components/Submissions.tsx b/packages/nextjs/app/admin/_components/Submissions.tsx
index 8301f63..36ba65e 100644
--- a/packages/nextjs/app/admin/_components/Submissions.tsx
+++ b/packages/nextjs/app/admin/_components/Submissions.tsx
@@ -5,8 +5,8 @@ export const Submissions = async () => {
   const submissions = await getAllSubmissions();
 
   return (
-    <div className="px-8 pt-14">
-      <div className="grid gap-8 lg:grid-cols-3">
+    <div className="px-6">
+      <div className="grid gap-6 md:grid-cols-2 xl:grid-cols-3">
         {submissions?.map(submission => {
           return <SubmissionCard key={submission.id} submission={submission} />;
         })}

From 78131ac6140fb1d0a5573a19d6dfb058bdef2f4e Mon Sep 17 00:00:00 2001
From: Hunter Chang <716376+ChangoMan@users.noreply.github.com>
Date: Fri, 23 Aug 2024 21:04:09 +0800
Subject: [PATCH 3/3] move icons to svg files

---
 packages/nextjs/.eslintrc.json                |  1 +
 .../app/admin/_components/SubmissionCard.tsx  | 32 ++-----------------
 packages/nextjs/public/icon-github.svg        |  1 +
 .../{logo-telegram.svg => icon-telegram.svg}  |  0
 packages/nextjs/public/icon-youtube.svg       |  1 +
 5 files changed, 6 insertions(+), 29 deletions(-)
 create mode 100644 packages/nextjs/public/icon-github.svg
 rename packages/nextjs/public/{logo-telegram.svg => icon-telegram.svg} (100%)
 create mode 100644 packages/nextjs/public/icon-youtube.svg

diff --git a/packages/nextjs/.eslintrc.json b/packages/nextjs/.eslintrc.json
index c120c8c..018c5f8 100644
--- a/packages/nextjs/.eslintrc.json
+++ b/packages/nextjs/.eslintrc.json
@@ -5,6 +5,7 @@
     "@typescript-eslint/no-unused-vars": ["error"],
     "@typescript-eslint/no-explicit-any": ["off"],
     "@typescript-eslint/ban-ts-comment": ["off"],
+    "@next/next/no-img-element": ["off"],
     "prettier/prettier": [
       "warn",
       {
diff --git a/packages/nextjs/app/admin/_components/SubmissionCard.tsx b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
index d92f18b..5d26b67 100644
--- a/packages/nextjs/app/admin/_components/SubmissionCard.tsx
+++ b/packages/nextjs/app/admin/_components/SubmissionCard.tsx
@@ -97,43 +97,17 @@ export const SubmissionCard = ({ submission }: { submission: Submission }) => {
           <div className="mt-1 flex shrink-0 gap-3">
             {submission.linkToRepository && (
               <a href={submission.linkToRepository} className="inline-block" target="_blank">
-                <svg
-                  xmlns="http://www.w3.org/2000/svg"
-                  width="24"
-                  height="24"
-                  viewBox="0 0 24 24"
-                  fill="none"
-                  stroke="currentColor"
-                  strokeWidth="2"
-                  strokeLinecap="round"
-                  strokeLinejoin="round"
-                >
-                  <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4" />
-                  <path d="M9 18c-4.51 2-5-2-7-2" />
-                </svg>
+                <img alt="github icon" className="w-6 h-6" src="/icon-github.svg" />
               </a>
             )}
 
             <a href={submission.linkToVideo} className="inline-block" target="_blank">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="2"
-                strokeLinecap="round"
-                strokeLinejoin="round"
-              >
-                <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
-                <path d="m10 15 5-3-5-3z" />
-              </svg>
+              <img alt="youtube icon" className="w-6 h-6" src="/icon-youtube.svg" />
             </a>
 
             {submission.telegram && (
               <a href={`https://t.me/${telegramUser}`} className="inline-block" target="_blank">
-                <img alt="telegram logo" className="w-6 h-6" src="/logo-telegram.svg" />
+                <img alt="telegram icon" className="w-6 h-6" src="/icon-telegram.svg" />
               </a>
             )}
           </div>
diff --git a/packages/nextjs/public/icon-github.svg b/packages/nextjs/public/icon-github.svg
new file mode 100644
index 0000000..ca269a0
--- /dev/null
+++ b/packages/nextjs/public/icon-github.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github"><path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"/><path d="M9 18c-4.51 2-5-2-7-2"/></svg>
\ No newline at end of file
diff --git a/packages/nextjs/public/logo-telegram.svg b/packages/nextjs/public/icon-telegram.svg
similarity index 100%
rename from packages/nextjs/public/logo-telegram.svg
rename to packages/nextjs/public/icon-telegram.svg
diff --git a/packages/nextjs/public/icon-youtube.svg b/packages/nextjs/public/icon-youtube.svg
new file mode 100644
index 0000000..5de99f8
--- /dev/null
+++ b/packages/nextjs/public/icon-youtube.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-youtube"><path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17"/><path d="m10 15 5-3-5-3z"/></svg>
\ No newline at end of file