Ilia Mashkov
75 lines
2.0 KiB
TypeScript
75 lines
2.0 KiB
TypeScript
import { cn } from '$shared/lib';
|
|
import { Badge, Button, Card, CardSidebar, CardTitle, ImageLightbox, RichText } from '$shared/ui';
|
|
|
|
export interface Props {
|
|
/**
|
|
* Project name
|
|
*/
|
|
title: string;
|
|
/**
|
|
* Year the project was completed
|
|
*/
|
|
year: string;
|
|
/**
|
|
* Short project description
|
|
*/
|
|
description: string;
|
|
/**
|
|
* Technology or category tags
|
|
*/
|
|
tags: string[];
|
|
/**
|
|
* Project's URL
|
|
*/
|
|
url: string;
|
|
/**
|
|
* Optional preview image URL
|
|
*/
|
|
imageUrl?: string;
|
|
/**
|
|
* Skip lazy-loading the preview image. Set true for above-the-fold cards
|
|
* (typically the first card in the list) to improve LCP.
|
|
* @default false
|
|
*/
|
|
priority?: boolean;
|
|
}
|
|
|
|
/**
|
|
* Project card with sidebar layout.
|
|
* Sidebar: year badge, stack tags, View Project button.
|
|
* Main: title, optional image, description.
|
|
*/
|
|
export function ProjectCard({ title, year, description, tags, url, imageUrl, priority = false }: Props) {
|
|
return (
|
|
<Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
|
|
<CardSidebar
|
|
sidebar={
|
|
<div className="flex flex-col gap-4">
|
|
<p className="text-sm font-medium brutal-border-left pl-3">{year}</p>
|
|
{tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-2">
|
|
{tags.map((tag) => (
|
|
<Badge key={tag} variant="outline" size="xs">
|
|
{tag}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
<Button href={url} variant="primary" size="sm" className="self-start lg:w-full lg:self-auto text-center">
|
|
View Project
|
|
</Button>
|
|
</div>
|
|
}
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<CardTitle className="font-heading">{title}</CardTitle>
|
|
{imageUrl && (
|
|
<ImageLightbox src={imageUrl} alt={title} priority={priority} className="brutal-border bg-blue" />
|
|
)}
|
|
<RichText html={description} />
|
|
</div>
|
|
</CardSidebar>
|
|
</Card>
|
|
);
|
|
}
|