Merge pull request #185 from gofr-dev/fix-certificate-page

updated the certificate page from path params to query params and rem…

Author: naveen-bandela-au2

src/app/certificate/page.js

@@ -0,0 +1,50 @@
+'use client'
+
+import { useSearchParams } from 'next/navigation'
+import { useEffect, useState } from 'react'
+import Image from 'next/image'
+import NotFound from '@/app/not-found'
+
+export default function Certificate() {
+  const searchParams = useSearchParams()
+  const id = searchParams.get('id')
+
+  const [certificateUrl, setCertificateUrl] = useState(null)
+  const [error, setError] = useState(false)
+
+  useEffect(() => {
+    async function fetchCertificate() {
+      try {
+        const response = await fetch(
+          `https://gofr.dev/certificate-service/certificate/${id}`,
+        )
+        const { data } = await response.json()
+        setCertificateUrl(data.url)
+      } catch (err) {
+        setError(true)
+      }
+    }
+
+    if (id) fetchCertificate()
+  }, [id])
+
+  if (error) return <NotFound />
+  if (!certificateUrl)
+    return (
+      <div className="flex h-[80vh] items-center justify-center">
+        <div className="h-12 w-12 animate-spin rounded-full border-4 border-gray-300 border-t-[#38bdf9]" />
+      </div>
+    )
+
+  return (
+    <Image
+      className="mx-auto w-[90%] max-w-5xl"
+      src={certificateUrl}
+      alt="certificate"
+      height={600}
+      width={800}
+      unoptimized
+      priority
+    />
+  )
+}

src/components/Layout.jsx

@@ -10,7 +10,7 @@ import { Search } from '@/components/Search'
 import { formatNumber } from '@/lib/common'
 import { ErrorBoundary } from './BugsnagWrapper'
 import FooterUi from '@/components/Footer'
-import { HackathonLinkButton } from './goforgofr/HackathonLinkButton'
+// import { HackathonLinkButton } from './goforgofr/HackathonLinkButton'
 
 export function GitHubIcon(props) {
   return (
@@ -149,10 +149,10 @@ export function Layout({ children }) {
       <div className="flex w-full flex-col">
         {pathname !== '/hackathon' && (
           <>
-            <div className="relative z-50 sm:fixed sm:left-0 sm:right-0 sm:top-0">
+            {/* <div className="relative z-50 sm:fixed sm:left-0 sm:right-0 sm:top-0">
               <HackathonLinkButton />
-            </div>
-            <div className="sticky left-0 right-0 top-0 z-40 sm:top-8">
+            </div> */}
+            <div className="sticky left-0 right-0 top-0 z-40 sm:top-0">
               <Header />
             </div>
           </>