cv/theme/certificate.tsx
Ivan Dimitrov 3f2e7cd352 Squashed commit of the following:
commit ef058ba8e3498eb0b0606d8cf55c41a8718b7820
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Sat Dec 23 19:20:50 2023 +0200

    set version

commit 3b6cf8c60b0803b8316cdd5b0884671b980b3600
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Sat Dec 23 19:17:45 2023 +0200

    formatting

commit 218cfd137f7c1b71399036f6101b4614aaec1406
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Sat Dec 23 19:15:11 2023 +0200

    add more fields to data json

commit bdb87f634b6e1da9dba7c9fd5637731bb39df4f2
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Sat Dec 23 18:51:30 2023 +0200

    parsing json file

commit 7d83d7d85ad61bf181a30bf4a1855928f222d768
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Sat Dec 23 18:23:10 2023 +0200

    move data to json file

commit c6fcac47cbd1da4003d9c562a59f9d2075c6b789
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Fri Dec 22 20:08:29 2023 +0200

    separate files

commit 2079aa20aa78ae8c8bd4d0be2b87fa637cf2f8bb
Author: Ivan Dimitrov <ivan@idimitrov.dev>
Date:   Fri Dec 22 19:37:47 2023 +0200

    make it wrap automatically
2023-12-23 19:21:12 +02:00

52 lines
1.3 KiB
TypeScript

import { Text, View } from "@react-pdf/renderer";
import { tw } from "./lib";
import SvgLink from "./link";
export type Cert = {
name: string;
issuer: string;
description: string;
date: Date;
links?: A[];
};
export default function Certificate({
name,
issuer,
description,
date,
links,
}: Cert) {
return (
<View style={tw("w-full flex flex-col")}>
<View
style={tw(
"w-full flex flex-col mt-2 border-2 border-slate-50 p-4 rounded-2xl"
)}
>
<View style={tw("flex flex-row flex-wrap gap-1")}>
<Text style={tw("text-amber-500")}>{name}</Text>
<Text>from</Text>
<Text style={tw("text-blue-500")}>{issuer}</Text>
<Text>on</Text>
<Text style={tw("text-lime-500")}>{date.toDateString()}</Text>
</View>
{links && (
<View
style={tw("flex flex-row flex-wrap w-full gap-2 justify-center")}
>
{links.map((l) => (
<View key={l.href} style={tw("flex flex-row gap-2")}>
<SvgLink text={l.text} href={l.href} icon={l.icon} />
</View>
))}
</View>
)}
<View style={tw("m-4")}>
<Text style={tw("text-neutral-400")}>{description}</Text>
</View>
</View>
</View>
);
}