From ac6aab1fe11acec866aa566fbfe8252c0e4ca848 Mon Sep 17 00:00:00 2001
From: Arik Chakma <arikchangma@gmail.com>
Date: Thu, 24 Oct 2024 13:45:31 +0600
Subject: [PATCH] wip

---
 src/components/Course/CertificateView.tsx    | 42 ++++++++++++++++++++
 src/pages/learn/[courseId]/certificate.astro |  3 +-
 2 files changed, 44 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Course/CertificateView.tsx

diff --git a/src/components/Course/CertificateView.tsx b/src/components/Course/CertificateView.tsx
new file mode 100644
index 000000000..dedd6096c
--- /dev/null
+++ b/src/components/Course/CertificateView.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+import { Rating } from '../Rating/Rating';
+
+type CertificateViewProps = {
+  currentCourseId: string;
+};
+
+export function CertificateView(props: CertificateViewProps) {
+  const { currentCourseId } = props;
+
+  const [rating, setRating] = useState(0);
+
+  return (
+    <div className="mx-auto flex max-w-md flex-col items-center justify-center">
+      <div className="flex flex-col items-center">
+        <h1 className="text-4xl font-semibold">Congratulations!</h1>
+        <p className="mt-3 text-center text-lg text-zinc-200">
+          You finished the course. Download the completion certificate below and
+          share it with the world.
+        </p>
+        <button>
+          <a
+            target="_blank"
+            rel="noreferrer"
+            className="mt-8 block rounded-full bg-zinc-700 px-6 py-2.5 font-medium text-white"
+          >
+            Download Certificate
+          </a>
+        </button>
+      </div>
+
+      <div className="mt-24 flex flex-col items-center gap-3">
+        <Rating
+          rating={rating}
+          onRatingChange={(rating) => setRating(rating)}
+          starSize={36}
+        />
+        <span>Rate your experience</span>
+      </div>
+    </div>
+  );
+}
diff --git a/src/pages/learn/[courseId]/certificate.astro b/src/pages/learn/[courseId]/certificate.astro
index fcbc2f674..6cbaf9b6a 100644
--- a/src/pages/learn/[courseId]/certificate.astro
+++ b/src/pages/learn/[courseId]/certificate.astro
@@ -1,4 +1,5 @@
 ---
+import { CertificateView } from '../../../components/Course/CertificateView';
 import { CourseLayout } from '../../../components/Course/CourseLayout';
 import SkeletonLayout from '../../../layouts/SkeletonLayout.astro';
 import {
@@ -60,6 +61,6 @@ const { course } = Astro.props;
     chapters={course.chapters}
     client:load
   >
-    Hello
+    <CertificateView currentCourseId={courseId} client:load />
   </CourseLayout>
 </SkeletonLayout>