From 25efb9faf5c2d777f3e46c53436dd0c8587d3ad1 Mon Sep 17 00:00:00 2001
From: Teguh Bayu Pratama <149038828+teguhbayu@users.noreply.github.com>
Date: Fri, 20 Sep 2024 16:12:23 +0700
Subject: [PATCH] Rebase (#140)

* fix: broken links and query in admin (#135)

* feat: Make admin team profile responsive
---
 next.config.mjs                               | 20 ++++--
 .../tim/[id]/[posisi]/components/Form.tsx     | 12 +++-
 .../admin/tim/[id]/components/ProfileTim.tsx  | 21 ++++--
 .../tim/[id]/components/parts/AnggotaCard.tsx | 68 +++++++++++++------
 src/app/(admin)/admin/tim/[id]/page.tsx       |  2 +-
 src/app/hooks/useCountdown.ts                 |  5 +-
 6 files changed, 92 insertions(+), 36 deletions(-)

diff --git a/next.config.mjs b/next.config.mjs
index 69dfa57..90c258f 100644
--- a/next.config.mjs
+++ b/next.config.mjs
@@ -1,10 +1,20 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    experimental:{
-        serverActions:{
-            bodySizeLimit:'5mb'
-        }
-    }
+  experimental: {
+    serverActions: {
+      bodySizeLimit: "5mb",
+    },
+  },
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "res.cloudinary.com",
+        port: "",
+        pathname: "/**",
+      },
+    ],
+  },
 };
 
 export default nextConfig;
diff --git a/src/app/(admin)/admin/tim/[id]/[posisi]/components/Form.tsx b/src/app/(admin)/admin/tim/[id]/[posisi]/components/Form.tsx
index dc6d18a..63bda6d 100644
--- a/src/app/(admin)/admin/tim/[id]/[posisi]/components/Form.tsx
+++ b/src/app/(admin)/admin/tim/[id]/[posisi]/components/Form.tsx
@@ -4,6 +4,7 @@ import { PrimaryButton } from "@/app/components/global/Button";
 import { H2, H3, P } from "@/app/components/global/Text";
 import cn from "@/lib/clsx";
 import { Anggota, Kelas } from "@prisma/client";
+import Image from "next/image";
 import { useRouter } from "next/navigation";
 
 const kelas: { label: Kelas; value: Kelas }[] = [
@@ -21,9 +22,18 @@ export default function DisplayAnggota({
   const router = useRouter();
 
   return (
-    <form className="mx-[100px] my-[24px]">
+    <form className="mx-[20px] md:mx-[100px] my-[24px]">
       <H2 className="mb-4">Informasi Anggota</H2>
       <div className="w-full bg-white rounded-lg p-5 flex flex-col gap-8">
+        <div className="w-full flex justify-center items-center">
+          <Image
+            alt={`${anggota.nama}'s photo`}
+            src={anggota.foto}
+            width={600}
+            height={800}
+            className="rounded-xl object-cover w-[40vw] md:w-[15vw] aspect-[2/3]"
+          />
+        </div>
         <div className="flex flex-col gap-1">
           <H3>Nama</H3>
           <P>{anggota.nama}</P>
diff --git a/src/app/(admin)/admin/tim/[id]/components/ProfileTim.tsx b/src/app/(admin)/admin/tim/[id]/components/ProfileTim.tsx
index b193a6e..f60dc78 100644
--- a/src/app/(admin)/admin/tim/[id]/components/ProfileTim.tsx
+++ b/src/app/(admin)/admin/tim/[id]/components/ProfileTim.tsx
@@ -25,9 +25,11 @@ const sizeMap = {
   NORMAL: 15,
 };
 
-function AnggotaCardsWrapper({ children }: Readonly<{ children: ReactNode }>) {
+function AnggotaCardsWrapper({ children }: Readonly<{ children?: ReactNode }>) {
   return (
-    <div className="flex items-center justify-center gap-20">{children}</div>
+    <div className="flex items-center justify-center gap-5 sm:gap-20 flex-wrap">
+      {children}
+    </div>
   );
 }
 
@@ -76,13 +78,20 @@ function TimLayout({ tim }: Readonly<{ tim: TimWithRelations }>) {
           (Data belum lengkap)
         </P>
       )}
-      <div className="py-5 right-0  rounded-lg flex flex-col gap-12">
+      <div className="py-5 right-0 rounded-lg flex flex-col gap-5 sm:gap-12 mb-10">
         {tim.jenjang === "SMA" ? (
           <AnggotaCardsWrapper>
             <AnggotaCard
-              href={`/admin/tim/${tim_id}/mascot`}
-              image={tim.foto_mascot ?? "/placeholder-profile-picture.jpg"}
-              name={tim.foto_mascot ? "Mascot " + tim.nama_tim : "Belum Diisi"}
+              image={
+                tim.foto_mascot && tim.foto_mascot !== ""
+                  ? tim.foto_mascot
+                  : "/placeholder-profile-picture.jpg"
+              }
+              name={
+                tim.foto_mascot && tim.foto_mascot !== ""
+                  ? "Mascot " + tim.nama_tim
+                  : "Belum Diisi"
+              }
               posisi={"MASCOT"}
             />
           </AnggotaCardsWrapper>
diff --git a/src/app/(admin)/admin/tim/[id]/components/parts/AnggotaCard.tsx b/src/app/(admin)/admin/tim/[id]/components/parts/AnggotaCard.tsx
index a749e1a..d65c5d7 100644
--- a/src/app/(admin)/admin/tim/[id]/components/parts/AnggotaCard.tsx
+++ b/src/app/(admin)/admin/tim/[id]/components/parts/AnggotaCard.tsx
@@ -7,7 +7,7 @@ interface AnggotaCardProps {
   image: string;
   name: string;
   posisi: string;
-  href: string;
+  href?: string;
 }
 
 export function AnggotaCard({
@@ -17,27 +17,51 @@ export function AnggotaCard({
   href,
 }: Readonly<AnggotaCardProps>) {
   return (
-    <Link
-      href={href}
-      className="relative flex w-1/6 items-center justify-center hover:scale-105 transition-all duration-300"
-    >
-      <Image
-        src={image}
-        alt={`${name}'s Photo`}
-        width={150}
-        height={200}
-        className="w-full h-[320px] object-cover rounded-3xl"
-        unoptimized
-      />
-      <div className="absolute rounded-3xl p-5 bg-white drop-shadow-md flex items-center gap-6 -bottom-4 w-[110%]">
-        <div className="p-[14px] rounded-2xl bg-primary-500 drop-shadow-glow">
-          <Person />
+    <>
+      {href ? (
+        <Link
+          href={href}
+          className="relative flex w-[65vw] sm:w-1/6 items-center justify-center hover:scale-105 transition-all duration-300 aspect-[2/3]"
+        >
+          <Image
+            src={image}
+            alt={`${name}'s Photo`}
+            width={150}
+            height={200}
+            className="w-full h-[320px] object-cover rounded-3xl"
+            unoptimized
+          />
+          <div className="absolute rounded-3xl p-5 bg-white drop-shadow-md flex items-center gap-6 -bottom-4 w-[110%]">
+            <div className="p-[14px] rounded-2xl bg-primary-500 drop-shadow-glow">
+              <Person />
+            </div>
+            <div className="block text-start">
+              <P className="font-bold text-black mb-1 line-clamp-1">{name}</P>
+              <P>{posisi.toUpperCase()}</P>
+            </div>
+          </div>
+        </Link>
+      ) : (
+        <div className="relative flex w-[65vw] sm:w-1/6 items-center justify-center transition-all duration-300 aspect-[23]">
+          <Image
+            src={image}
+            alt={`${name}'s Photo`}
+            width={150}
+            height={200}
+            className="w-full h-[320px] object-cover rounded-3xl"
+            unoptimized
+          />
+          <div className="absolute rounded-3xl p-5 bg-white drop-shadow-md flex items-center gap-6 -bottom-4 w-[110%]">
+            <div className="p-[14px] rounded-2xl bg-primary-500 drop-shadow-glow">
+              <Person />
+            </div>
+            <div className="block text-start">
+              <P className="font-bold text-black mb-1 line-clamp-1">{name}</P>
+              <P>{posisi.toUpperCase()}</P>
+            </div>
+          </div>
         </div>
-        <div className="block text-start">
-          <P className="font-bold text-black mb-1 line-clamp-1">{name}</P>
-          <P>{posisi.toUpperCase()}</P>
-        </div>
-      </div>
-    </Link>
+      )}
+    </>
   );
 }
diff --git a/src/app/(admin)/admin/tim/[id]/page.tsx b/src/app/(admin)/admin/tim/[id]/page.tsx
index 075f629..954a439 100644
--- a/src/app/(admin)/admin/tim/[id]/page.tsx
+++ b/src/app/(admin)/admin/tim/[id]/page.tsx
@@ -29,7 +29,7 @@ export default async function TimEdit({ params }: { params: { id: string } }) {
     tipe_tim: "NORMAL",
     foto_mascot: "",
     link_berkas: "",
-    link_video: ""
+    link_video: "",
   };
 
   const trygetTim = await findTim({ id: params.id });
diff --git a/src/app/hooks/useCountdown.ts b/src/app/hooks/useCountdown.ts
index 3ff4542..75a980e 100644
--- a/src/app/hooks/useCountdown.ts
+++ b/src/app/hooks/useCountdown.ts
@@ -9,7 +9,10 @@ export function useCountdown(targetDate: Date) {
 
   useEffect(() => {
     const interval = setInterval(() => {
-      setCountDown(countDownDate - new Date().getTime());
+      const counter = countDownDate - new Date().getTime();
+      if (counter > 0) {
+        setCountDown(counter);
+      } else return setCountDown(0);
     }, 1000);
 
     return () => clearInterval(interval);