46 lines
1.8 KiB
JavaScript
46 lines
1.8 KiB
JavaScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function projectCard({
|
|
title,
|
|
url,
|
|
new_tab,
|
|
src,
|
|
alt,
|
|
description,
|
|
}) {
|
|
if (Boolean(new_tab)) {
|
|
return (
|
|
<div>
|
|
<Link href={url} target="_blank">
|
|
<li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue 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>
|
|
</Link>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<Link href={url}>
|
|
<li className="p-4 space-y-2 rounded-sm ring-2 text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue 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>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
}
|