sulthan/internify-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

progress: breadcrumbs fixation, submission task fixation and add new UI after submitted, Certificates change layout and new page (Certificate List)

Browse Source
This commit is contained in:
Kemas M. Aryadary Rasyad
2026-06-16 14:50:31 +07:00
parent 8b20c11822
commit f9bb21a961
23 changed files with 549 additions and 234 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/Pages/internify/intern/components/CertificateAvailabe.tsx
+8 -51
View File
@@ -1,10 +1,10 @@
import { useState } from "react";
import { Download, History , Link, Award, Printer } from "lucide-react";
import { type CertificateData, type CertificateHistory } from "../../../../lib/mockData";
import { Download, Link, Printer } from "lucide-react";
import { type CertificateData } from "../../../../lib/mockSertificates";
import certificateImg from "../../../../assets/certificate.png";
export default function CertificateAvailable({ data }: { data: CertificateData }) {
const { certificate, history } = data;
const { certificate } = data;
const [copied, setCopied] = useState(false);
const handleCopyLink = () => {
@@ -14,11 +14,9 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
};
return (
<div className="flex flex-col lg:flex-row gap-6 items-start">
{/* LEFT: Certificate Preview + Actions */}
<div className="w-full lg:w-4/6 flex flex-col gap-4">
{/* Certificate Card */}
<div className="flex rounded-xl p-10 mb-3 border border-gray-300 shadow-md items-center justify-center">
<div className="flex flex-col gap-4">
{/* Certificate Card */}
<div className="flex rounded-xl p-5 mb-1 border border-gray-300 shadow-md items-center justify-center">
<img
src={certificateImg}
alt="Certificate"
@@ -68,13 +66,13 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
<div className="flex flex-col gap-3">
{/* Unduh Sertifikat */}
<button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
<button className="flex items-center justify-center gap-2 w-full bg-red-700 hover:bg-red-800 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
<Download className="w-4 h-4" />
Unduh Sertifikat (PDF)
</button>
{/* Bagikan ke LinkedIn */}
<button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-3.5 rounded-xl text-sm">
<button className="flex items-center justify-center gap-2 w-full bg-blue-600 hover:bg-blue-700 active:scale-95 transition-all text-white font-semibold py-2 rounded-xl text-sm">
Bagikan ke LinkedIn
</button>
@@ -96,47 +94,6 @@ export default function CertificateAvailable({ data }: { data: CertificateData }
</div>
</div>
</div>
</div>
{/* RIGHT: Certificate History */}
<div className="w-full lg:w-2/6 flex-shrink-0">
<div className="bg-white rounded-2xl border border-gray-200 shadow-sm p-5">
<div className="flex items-center gap-2 mb-4">
<History className="w-5 h-5 text-red-700" />
<h3 className="font-semibold text-gray-800 text-lg">Certificate History</h3>
</div>
<div className="space-y-3">
{history.map((item: CertificateHistory) => (
<div
key={item.id}
className="flex flex-col gap-3 p-3 bg-white border border-gray-200 shadow-sm rounded-xl hover:bg-gray-50 transition-colors cursor-pointer"
>
<div className="w-full flex justify-center">
<img
src={certificateImg}
alt="Certificate"
className="rounded-xl h-[200px]"
/>
</div>
<div className="w-full">
<p className="text-xs">{item.month}</p>
<p className="text-sm font-semibold text-gray-800 leading-tight">{item.title}</p>
<p className="text-sm text-gray-500">
Grade: {item.grade}
</p>
</div>
</div>
))}
</div>
<div className="w-full my-3 flex justify-end">
<button className="text-sm text-red-500 font-semibold hover:underline">
See more
</button>
</div>
</div>
</div>
</div>
);
}