34 lines
1.4 KiB
JavaScript
34 lines
1.4 KiB
JavaScript
|
import Link from "next/link";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
export default function projectCard({ title, url, src, alt, description }) {
|
||
|
|
return (
|
||
|
|
<li className="p2 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-light dark:bg-werefox-grey">
|
||
|
|
<div className="p-2 flow space-y-2 w-full">
|
||
|
|
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||
|
|
<div className="text-lg text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||
|
|
<Link href={url}>
|
||
|
|
<a target="_blank" className="transition hover:text-werefox-pink-dark dark:hover:text-werefox-pink">
|
||
|
|
<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}
|
||
|
|
</a>
|
||
|
|
</Link>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="p-3 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker w-full bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
||
|
|
<p className="text-md text-center text-werefox-blue-dark dark:text-werefox-blue">
|
||
|
|
{description}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</li>
|
||
|
|
);
|
||
|
|
}
|