Portfolio/front/Tabs/Project.ts

import { link } from "ansi-escapes";
import { newLine } from "..";
import generateQRCode from "../../wrapers/qr-code-wraper";

interface ProjectProps {
	title: string;
	description: string;
	technologies: string[];
	learnMoreLink: string;
}

const Project = async ({ title, description, technologies, learnMoreLink }: ProjectProps) => {
	return (
		`    ┏━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┓${newLine}` +
		`    ┃ \x1b[33m${title.padEnd(80 - 4)}\x1b[0m ┃${newLine}` +
		`    ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫${newLine}` +
		description
			.split(newLine)
			.map((line) => `    ┃ ${line.padEnd(80 - 4)} ┃${newLine}`)
			.join("") +
		`    ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫${newLine}` +
		`    ┃ Technologies: \x1b[34m${technologies.join(", ").padEnd(80 - 18)}\x1b[0m ┃${newLine}` +
		`    ┣━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┫${newLine}` +
		`    ┃${link(
			"                                  \x1b[32mLearn more\x1b[0m                                  ",
			learnMoreLink
		)}┃${newLine}` +
		(await generateQRCode(learnMoreLink))
			.split(newLine)
			.map((line) => `    ┃ ${line.padEnd(57 - 4).padStart(80 - 4)} ┃${newLine}`)
			.join("") +
		`    ┗━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━┛${newLine}`
	);
};

export default Project;

export type { ProjectProps };