werefox-cafe/src/info/components/project-card.js

32 lines
1008 B
JavaScript

import Link from "next/link";
import Image from "next/image";
export default function projectCard({
title,
url,
new_tab,
src,
alt,
description,
}) {
const open_new_tab = new_tab ? "_blank" : "";
return (
<div>
<Link href={url}>
<a target={open_new_tab}>
<li className="p-4 space-y-2 rounded-sm ring-2 text-werefox-blue-dark dark:text-werefox-blue hover:text-werefox-pink-dark dark:hover:text-werefox-pink ring-werefox-blue-dark dark:ring-werefox-blue hover:ring-werefox-pink-dark dark:hover:ring-werefox-pink hover:animate-yip transition">
<div className="text-lg text-center">
<span className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top">
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
</span>
{` ${title}`}
</div>
<div className="text-md text-center">{description}</div>
</li>
</a>
</Link>
</div>
);
}