36 lines
1.4 KiB
TypeScript
36 lines
1.4 KiB
TypeScript
import Link from 'next/link';
|
|
import { IconArrowNarrowRight, IconExternalLink } from '@tabler/icons-react';
|
|
import { colors } from '@/constants';
|
|
|
|
interface ProjectCardProps {
|
|
slug: string;
|
|
title: string;
|
|
year: string;
|
|
stack: string[];
|
|
description: string;
|
|
liveUrl: string;
|
|
}
|
|
|
|
export default function ProjectCard({ slug, title, year, stack, description, liveUrl }: ProjectCardProps) {
|
|
return (
|
|
<section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5">
|
|
<Link href={`/projects/${slug}`} 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'/>
|
|
</Link>
|
|
<p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
|
|
<p className="text-xl">{description}</p>
|
|
<a
|
|
href={liveUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="mt-2 inline-flex w-fit items-center gap-2 rounded-lg border border-neutral-700 px-4 py-2 text-[15px] font-medium transition-colors hover:border-neutral-500"
|
|
style={{ color: colors.accent }}
|
|
>
|
|
Live Demo
|
|
<IconExternalLink size={18} />
|
|
</a>
|
|
</section>
|
|
);
|
|
}
|