donny/portfolio
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: updated projectcard component to use the new data shape properly

Browse Source
This commit is contained in:
donny
2026-05-28 17:46:29 -07:00
parent f5010512d4
commit 54fd768af8
1 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/content/ProjectCard.tsx
+22 -10
View File
@@ -1,23 +1,35 @@
import { IconArrowNarrowRight } from '@tabler/icons-react'; import Link from 'next/link';
import { IconArrowNarrowRight, IconExternalLink } from '@tabler/icons-react';
import { colors } from '@/constants';
interface ProjectCardProps { interface ProjectCardProps {
title: string; slug: string;
year: string; title: string;
stack: string[]; year: string;
description: string; stack: string[];
outcome: string; description: string;
liveUrl: string;
} }
export default function ProjectCard({ title, year, stack, description, outcome }: ProjectCardProps) { export default function ProjectCard({ slug, title, year, stack, description, liveUrl }: ProjectCardProps) {
return ( return (
<section className="space-y-2 border-t border-neutral-700 pt-4 flex flex-col mt-5"> <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'> <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> <h1 className="text-[24px] font-semibold">{title}</h1>
<IconArrowNarrowRight className='group-hover:scale-150 transition-transform'/> <IconArrowNarrowRight className='group-hover:scale-150 transition-transform'/>
</button> </Link>
<p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p> <p className="text-md text-neutral-400 text-muted">{year} — {stack.join(' · ')}</p>
<p className="text-xl">{description}</p> <p className="text-xl">{description}</p>
<p className="text-md text-neutral-400 text-muted">{outcome}</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> </section>
); );
} }