52 lines
1.5 KiB
JavaScript
52 lines
1.5 KiB
JavaScript
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function WerefoxCard({
|
|
isTitle,
|
|
isCardButton,
|
|
extraClasses,
|
|
imageObj,
|
|
innerText,
|
|
url,
|
|
children,
|
|
}) {
|
|
const images = Array(imageObj).flat();
|
|
if (isTitle) {
|
|
return (
|
|
<header className="rounded-lg ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
|
|
{children}
|
|
</header>
|
|
);
|
|
} else if (isCardButton) {
|
|
return (
|
|
<div className="">
|
|
<Link href={url}>
|
|
<a
|
|
className={`${extraClasses} sm:p-2 p-1 w-full inline-block ring-2 ring-werefox-grey-darker dark:ring-werefox-grey-light rounded-lg text-lg text-center text-werefox-grey-lighter dark:text-werefox-grey-dark bg-werefox-grey dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-dark dark:hover:bg-werefox-grey-light`}
|
|
>
|
|
{images.map((source) => (
|
|
<span
|
|
key={source.src}
|
|
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
|
|
>
|
|
<Image
|
|
src={source.src}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={source.alt}
|
|
/>
|
|
</span>
|
|
))}{" "}
|
|
{innerText}
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
return (
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|