feat: ProjectCard — add url prop, RichText description, open link in new tab

This commit is contained in:
Ilia Mashkov
2026-05-18 20:45:54 +03:00
parent 2ae5ae3210
commit ac9ee0eb4e
2 changed files with 22 additions and 7 deletions
@@ -1,6 +1,6 @@
import Image from 'next/image';
import { cn } from '$shared/lib';
import { Badge, Button, Card, CardSidebar, CardTitle } from '$shared/ui';
import { Badge, Button, Card, CardSidebar, CardTitle, RichText } from '$shared/ui';
type Props = {
/**
@@ -19,6 +19,10 @@ type Props = {
* Technology or category tags
*/
tags: string[];
/**
* Project's URL
*/
url: string;
/**
* Optional preview image URL
*/
@@ -30,7 +34,7 @@ type Props = {
* Sidebar: year badge, stack tags, View Project button.
* Main: title, optional image, description.
*/
export function ProjectCard({ title, year, description, tags, imageUrl }: Props) {
export function ProjectCard({ title, year, description, tags, url, imageUrl }: Props) {
return (
<Card className={cn('group hover:shadow-brutal-xl transition-shadow duration-300')}>
<CardSidebar
@@ -46,7 +50,7 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
))}
</div>
)}
<Button variant="primary" size="sm" className="w-full">
<Button href={url} variant="primary" size="sm" className="w-full">
View Project
</Button>
</div>
@@ -59,7 +63,7 @@ export function ProjectCard({ title, year, description, tags, imageUrl }: Props)
<Image src={imageUrl} alt={title} fill className="object-cover" />
</div>
)}
<p className="opacity-80">{description}</p>
<RichText html={description} />
</div>
</CardSidebar>
</Card>