feat: create certificate detail page

feat: create certificate detail page

Author: vickyadrii

src/app/[locale]/certificates/[slug]/page.tsx

@@ -0,0 +1,33 @@
+import { notFound } from "next/navigation";
+
+import Certificate from "@/features/certificate/Certificate";
+import { CertificateType } from "@/features/certificate/types";
+
+export async function getCertificate(slug: string) {
+  try {
+    const response = await fetch(`https://moonlight.hammercode.org/v1/certificates/${slug}`);
+    if (!response.ok) return null;
+
+    return response.json();
+  } catch (error) {
+    console.error("Error fetching certificate:", error);
+    return null;
+  }
+}
+
+type Props = {
+  params: {
+    slug: string;
+  };
+};
+
+const CertificateDetail = async ({ params }: Props) => {
+  const certificate: CertificateType = await getCertificate(params.slug);
+  if (!certificate.name) {
+    return notFound();
+  }
+
+  return <Certificate certificate={certificate} />;
+};
+
+export default CertificateDetail;

src/app/[locale]/layout.tsx

@@ -48,7 +48,3 @@ export default async function LocaleRootLayout({ children, params: { locale } }:
     </html>
   );
 }
-
-// {
-//   ""
-// }

src/components/layout/wrapper/index.tsx

@@ -1,14 +1,26 @@
 "use client";
+
 import Navbar from "@/components/common/navbar";
 import { ThemeProvider } from "../theme-provider";
 import Footer from "@/components/common/footer/Footer";
+import { useParams, usePathname } from "next/navigation";
 
 const Wrapper = ({ children }: { children: React.ReactNode }) => {
+  const params = useParams();
+  const pathname = usePathname();
+  const isCertificateDetailPage = !!params?.slug && pathname.includes("certificates");
+
   return (
     <ThemeProvider attribute="class" defaultTheme="light" enableSystem disableTransitionOnChange>
-      <Navbar />
-      {children}
-      <Footer />
+      {isCertificateDetailPage ? (
+        children
+      ) : (
+        <>
+          <Navbar />
+          {children}
+          <Footer />
+        </>
+      )}
     </ThemeProvider>
   );
 };

src/features/certificate/Certificate.tsx

@@ -0,0 +1,70 @@
+import Image from "next/image";
+import { CertificateType } from "./types";
+import { Button } from "@/components/ui/button";
+import { Link } from "@/lib/navigation";
+import { Linkedin, TwitterIcon } from "lucide-react";
+
+type Props = {
+  certificate: CertificateType;
+};
+
+const Certificate = ({ certificate }: Props) => {
+  const { _id, event, image_link, name, share_link } = certificate;
+  return (
+    <div className="w-full">
+      <div className="p-4 my-12">
+        <div className="space-y-2">
+          <h3 className="text-hmc-primary md:text-2xl text-xl font-semibold text-center">
+            Terima Kasih kepada <strong className="font-extrabold">{name}</strong>!
+          </h3>
+          <p className="md:text-base text-sm text-center text-gray-500">Kamu telah berpartisipasi dalam acara ini.</p>
+        </div>
+        <div className="w-full h-full relative">
+          <div className="flex justify-center">
+            <Image
+              src={image_link}
+              className="my-4 rounded-lg shadow-md object-cover object-center"
+              width="640"
+              height="480"
+              alt={`Sertikat ${event} - ${name}`}
+            />
+          </div>
+          <p className="md:text-base text-sm text-center text-gray-500 mb-8">
+            Sertifikat : <b>{_id}</b>
+          </p>
+
+          <div className="flex justify-center">
+            <Button asChild variant="tertiary">
+              <Link href={share_link} target="_blank">
+                UNDUH SERTIFIKAT
+              </Link>
+            </Button>
+          </div>
+          <div>
+            <p className="md:text-base text-sm text-center text-gray-500 my-4">
+              <strong className="md:text-lg text-md text-black">Pamerkan</strong> sertifikat ini ke teman-temanmu!
+            </p>
+
+            <div className="flex justify-center space-x-6">
+              <Button variant="secondary" size="icon">
+                <Link
+                  href={`https://twitter.com/intent/tweet?text=Saya telah mengikuti kegiatan ${event} yang diadakan oleh Hammercode.org&url=${share_link}`}
+                  target={"_blank"}
+                >
+                  <TwitterIcon className="w-full text-3xl text-sky-600 hover:text-sky-700" size={24} />
+                </Link>
+              </Button>
+              <Button variant="secondary" size="icon">
+                <Link href={`https://www.linkedin.com/shareArticle?mini=true&url=${share_link}`} target={"_blank"}>
+                  <Linkedin className="text-3xl text-sky-600 hover:text-sky-700" size={24} />
+                </Link>
+              </Button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Certificate;

src/features/certificate/types.ts

@@ -0,0 +1,7 @@
+export type CertificateType = {
+  _id: string;
+  name: string;
+  image_link: string;
+  share_link: string;
+  event: string;
+};