51 lines
2.0 KiB
TypeScript
51 lines
2.0 KiB
TypeScript
import React from 'react'
|
|
import { Link } from 'react-router-dom'
|
|
import { useStatusLabel } from '../api'
|
|
|
|
export function ProjectCard({ project }: any) {
|
|
const isOngoing = project.status === 'progress'
|
|
|
|
const statusText = useStatusLabel(project.status)
|
|
|
|
const dotColor = isOngoing ? 'bg-copper animate-pulse' : 'bg-ivory/60'
|
|
const textColor = isOngoing ? 'text-copper' : 'text-ivory/90'
|
|
|
|
return (
|
|
<article className="group flex h-full flex-col overflow-hidden border border-ivory/10 bg-char transition-[transform,box-shadow,border-color] duration-500 ease-lux hover:-translate-y-2 hover:border-copper/50 hover:shadow-lift focus:outline-none focus-visible:ring-2 focus-visible:ring-copper">
|
|
<Link to={`/projects/${project.slug || '#'}`} className="flex h-full flex-col focus:outline-none">
|
|
|
|
<div className="relative aspect-[4/3] w-full overflow-hidden">
|
|
<img
|
|
src={project.image}
|
|
alt={project.title}
|
|
className="h-full w-full object-cover transition-transform duration-700 ease-lux group-hover:scale-105"
|
|
/>
|
|
<div className={`absolute right-4 top-4 flex items-center gap-2 bg-ink/85 px-4 py-2 text-xs font-light backdrop-blur-md ${textColor}`}>
|
|
<span className={`h-1.5 w-1.5 rounded-full ${dotColor}`} />
|
|
{statusText}
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-1 flex-col p-8">
|
|
|
|
<div className="text-center">
|
|
<h3 className="font-pinar text-xl font-bold text-ivory">
|
|
{project.title}
|
|
</h3>
|
|
<p className="mt-7 text-sm font-light text-ivory/60">
|
|
{project.location}
|
|
</p>
|
|
</div>
|
|
|
|
<div className="my-7 h-px w-full bg-ivory/10" />
|
|
|
|
<div className="mt-auto flex items-center justify-between text-sm font-light text-ivory/60">
|
|
<span>سال: {project.year}</span>
|
|
<span>{project.area} متر مربع</span>
|
|
</div>
|
|
|
|
</div>
|
|
</Link>
|
|
</article>
|
|
)
|
|
} |