69 lines
1.8 KiB
TypeScript
69 lines
1.8 KiB
TypeScript
|
import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter, Button } from '$shared/ui'
|
||
|
|
import { cn } from '$shared/lib'
|
||
|
|
|
||
|
|
type Props = {
|
||
|
|
/**
|
||
|
|
* Project name
|
||
|
|
*/
|
||
|
|
title: string
|
||
|
|
/**
|
||
|
|
* Year the project was completed
|
||
|
|
*/
|
||
|
|
year: string
|
||
|
|
/**
|
||
|
|
* Short project description
|
||
|
|
*/
|
||
|
|
description: string
|
||
|
|
/**
|
||
|
|
* Technology or category tags
|
||
|
|
*/
|
||
|
|
tags: string[]
|
||
|
|
/**
|
||
|
|
* Optional preview image URL
|
||
|
|
*/
|
||
|
|
imageUrl?: string
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* Compact project card for grid/list display.
|
||
|
|
*/
|
||
|
|
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
|
||
|
|
return (
|
||
|
|
<Card
|
||
|
|
className={cn(
|
||
|
|
'group hover:translate-x-[2px] hover:translate-y-[2px]',
|
||
|
|
'hover:shadow-[10px_10px_0_var(--carbon-black)] transition-all duration-300',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<CardHeader>
|
||
|
|
<div className="flex flex-row justify-between items-start mb-3">
|
||
|
|
<CardTitle className="flex-1">{title}</CardTitle>
|
||
|
|
<span className="brutal-border px-3 py-1 bg-carbon-black text-ochre-clay text-sm">{year}</span>
|
||
|
|
</div>
|
||
|
|
<CardDescription>{description}</CardDescription>
|
||
|
|
</CardHeader>
|
||
|
|
|
||
|
|
{imageUrl && (
|
||
|
|
<div className="brutal-border my-6 aspect-video bg-slate-indigo overflow-hidden">
|
||
|
|
<img src={imageUrl} alt={title} className="w-full h-full object-cover" />
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
<CardContent className="flex flex-wrap gap-2">
|
||
|
|
{tags.map((tag) => (
|
||
|
|
<span
|
||
|
|
key={tag}
|
||
|
|
className="brutal-border px-3 py-1 bg-white text-carbon-black text-sm uppercase tracking-wide"
|
||
|
|
>
|
||
|
|
{tag}
|
||
|
|
</span>
|
||
|
|
))}
|
||
|
|
</CardContent>
|
||
|
|
|
||
|
|
<CardFooter>
|
||
|
|
<Button variant="primary" className="w-full">View Project</Button>
|
||
|
|
</CardFooter>
|
||
|
|
</Card>
|
||
|
|
)
|
||
|
|
}
|