47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
|
export const ProjectCard = function ProjectCard(props: ProjectProps) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
class={`group space-y-1 rounded-md ${
|
||
|
|
props.wip ? "border-2 border-dashed" : "cursor-pointer"
|
||
|
|
} bg-[#45475a] px-3 py-2 m-10 shadow-md transition-all duration-300 ease-in-out hover:shadow-xl hover:scale-105`}
|
||
|
|
onClick={() => props.repo && open(props.repo, "_blank")}
|
||
|
|
>
|
||
|
|
<div class="flex items-center justify-between">
|
||
|
|
<h2 class="text-lg text-white font-black uppercase">
|
||
|
|
<a href={props.repo} target="_blank">
|
||
|
|
{props.title}
|
||
|
|
</a>
|
||
|
|
</h2>
|
||
|
|
<div class="bg-[#585b70] text-[#a6adc8] text-xs font-bold uppercase px-2.5 py-0.5 rounded-full">
|
||
|
|
{props.repo && (
|
||
|
|
<a
|
||
|
|
class="hover:underline"
|
||
|
|
href={props.repo}
|
||
|
|
target="_blank"
|
||
|
|
onClick={(e) => e.stopPropagation()}
|
||
|
|
>
|
||
|
|
Active
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
{!props.repo && !props.wip && <span>Dead</span>}
|
||
|
|
{props.wip && <span>WIP</span>}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<p class="whitespace-pre-wrap italic font-light text-lg text-[#a6adc8]">
|
||
|
|
{props.summary}
|
||
|
|
</p>
|
||
|
|
<p class="whitespace-pre-wrap text-sm font-semibold text-[#a6adc8]">
|
||
|
|
{props.tech}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
type ProjectProps = {
|
||
|
|
title: string;
|
||
|
|
repo?: string;
|
||
|
|
summary: string;
|
||
|
|
tech: string;
|
||
|
|
wip?: boolean;
|
||
|
|
};
|