81 lines
3.3 KiB
TypeScript
81 lines
3.3 KiB
TypeScript
import Title from "@/components/atoms/title";
|
|
import { Button } from "@/components/ui/button";
|
|
import { Dialog, DialogContent, DialogHeader } from "@/components/ui/dialog";
|
|
import React from "react";
|
|
|
|
function CertificationDetails(props: {
|
|
yes: { title: string; skills: string[] }[];
|
|
}) {
|
|
const [open, setOpen] = React.useState(false);
|
|
|
|
return (
|
|
<>
|
|
<Dialog
|
|
open={open}
|
|
onOpenChange={(o) => {
|
|
setOpen(o);
|
|
}}
|
|
>
|
|
<DialogContent>
|
|
<DialogHeader>
|
|
<Title
|
|
title="Specialization Details"
|
|
size="h2"
|
|
capitalize
|
|
/>
|
|
</DialogHeader>
|
|
|
|
<div className="flex max-h-[70vh] w-full flex-wrap items-center justify-center gap-0 overflow-y-auto py-8">
|
|
{props.yes.map((item, index) => (
|
|
<div key={index} className="flex w-full gap-2">
|
|
<div className="flex w-8 flex-col items-center">
|
|
<div className="h-2 w-0.5 bg-blue-200">
|
|
{" "}
|
|
</div>
|
|
<div className="h-3 w-3 rounded-full bg-blue-200"></div>
|
|
<div className="h-full w-0.5 bg-blue-200">
|
|
{" "}
|
|
</div>
|
|
</div>
|
|
<div className="flex w-full flex-col gap-2 pb-4">
|
|
<Title
|
|
title={item.title}
|
|
size="h4"
|
|
weight="semibold"
|
|
/>
|
|
<div className="flex flex-wrap gap-2">
|
|
{item.skills.map((skill, index) => (
|
|
<small
|
|
key={index}
|
|
className="h-max rounded-md border p-0.5 px-1"
|
|
>
|
|
{skill}
|
|
</small>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
|
|
<Button variant={"muted"}>
|
|
<a
|
|
className="h-full w-full"
|
|
target="_blank"
|
|
href="https://www.coursera.org/account/accomplishments/specialization/certificate/TFKYJD4BT977"
|
|
>
|
|
View Certificate
|
|
</a>
|
|
</Button>
|
|
</DialogContent>
|
|
</Dialog>
|
|
|
|
<Button onClick={() => setOpen(true)} variant={"muted"}>
|
|
Show Details
|
|
</Button>
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default CertificationDetails;
|