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

53 lines
1.5 KiB
JavaScript
Raw Normal View History

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 (
<div className="rounded-lg container ring-4 ring-werefox-blue bg-werefox-grey-light dark:bg-werefox-grey">
{children}
</div>
);
} else if (isCardButton) {
return (
<div className="container">
<Link href={url}>
<a
className={`${extraClasses} block ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker rounded-lg p-4 text-xl text-center text-werefox-grey dark:text-werefox-grey-dark bg-werefox-grey-lighter dark:bg-werefox-grey-lightest transition hover:bg-werefox-grey-lightest dark:hover:bg-werefox-grey-light`}
>
{images.map((source) => (
<span
key={source.src}
className="relative inline-block w-8 h-8 align-middle mb-1"
>
{" "}
<Image
src={source.src}
layout="fill"
objectFit="contain"
alt={source.alt}
/>{" "}
</span>
))}{" "}
{innerText}
</a>
</Link>
</div>
);
}
return (
<div className="rounded-lg container ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
{children}
</div>
);
}