49 lines
1.4 KiB
JavaScript
49 lines
1.4 KiB
JavaScript
|
import Link from 'next/link';
|
||
|
|
import Icon from './Icon';
|
||
|
|
|
||
|
|
export default function ProjectCard({ project }) {
|
||
|
|
const { title, description, tags, href, repo, featured, internal } = project;
|
||
|
|
const primaryHref = href || repo;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<article className={`project-card ${featured ? 'is-featured' : ''}`}>
|
||
|
|
<div className="project-top">
|
||
|
|
{featured ? (
|
||
|
|
<span className="pill pill-accent">
|
||
|
|
<span className="live-dot" /> Live
|
||
|
|
</span>
|
||
|
|
) : (
|
||
|
|
<Icon name="github" size={20} className="project-glyph" />
|
||
|
|
)}
|
||
|
|
{repo && href && (
|
||
|
|
<a href={repo} target="_blank" rel="noopener noreferrer" className="project-repo" aria-label={`${title} source code`}>
|
||
|
|
<Icon name="github" size={16} />
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<h3 className="project-title">
|
||
|
|
{internal ? (
|
||
|
|
<Link href={primaryHref} className="project-link">
|
||
|
|
{title}
|
||
|
|
</Link>
|
||
|
|
) : (
|
||
|
|
<a href={primaryHref} target="_blank" rel="noopener noreferrer" className="project-link">
|
||
|
|
{title}
|
||
|
|
</a>
|
||
|
|
)}
|
||
|
|
<Icon name="arrowUpRight" size={18} className="project-arrow" />
|
||
|
|
</h3>
|
||
|
|
<p className="project-description">{description}</p>
|
||
|
|
|
||
|
|
<ul className="tag-list">
|
||
|
|
{tags.map((tag) => (
|
||
|
|
<li key={tag} className="tag">
|
||
|
|
{tag}
|
||
|
|
</li>
|
||
|
|
))}
|
||
|
|
</ul>
|
||
|
|
</article>
|
||
|
|
);
|
||
|
|
}
|