feat: scaffold basic ProjectCard component
This commit is contained in:
@@ -0,0 +1,23 @@
|
|||||||
|
import { IconArrowNarrowRight } from '@tabler/icons-react';
|
||||||
|
|
||||||
|
interface ProjectCardProps {
|
||||||
|
title: string;
|
||||||
|
year: string;
|
||||||
|
stack: string[];
|
||||||
|
description: string;
|
||||||
|
outcome: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function ProjectCard({ title, year, stack, description, outcome }: ProjectCardProps) {
|
||||||
|
return (
|
||||||
|
<section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5">
|
||||||
|
<button className='flex justify-between hover:text-neutral-500 transition-colors items-center w-full text-left cursor-pointer group'>
|
||||||
|
<h1 className="text-[24px] font-semibold">{title}</h1>
|
||||||
|
<IconArrowNarrowRight className='group-hover:scale-150 transition-transform'/>
|
||||||
|
</button>
|
||||||
|
<p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
|
||||||
|
<p className="text-xl">{description}</p>
|
||||||
|
<p className="text-md text-neutral-400 text-muted">{outcome}</p>
|
||||||
|
</section>
|
||||||
|
);
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user