2021-04-18 18:27:30 -05:00
|
|
|
import Image from "next/image";
|
|
|
|
import Link from "next/link";
|
|
|
|
|
|
|
|
export default function IdentityButton({
|
|
|
|
extraClasses,
|
|
|
|
imageObj,
|
|
|
|
innerText,
|
|
|
|
url,
|
2021-05-01 18:25:28 -05:00
|
|
|
locator,
|
2021-06-14 23:30:03 -05:00
|
|
|
partners,
|
2021-04-18 18:27:30 -05:00
|
|
|
}) {
|
|
|
|
const images = Array(imageObj).flat();
|
2021-05-01 18:25:28 -05:00
|
|
|
const maybeLocator = locator ? `#${locator}` : "";
|
2021-04-18 18:27:30 -05:00
|
|
|
|
|
|
|
return (
|
2021-04-26 22:47:40 -05:00
|
|
|
<div className="animate-wiggle container max-w-sm mx-auto md:px-2 p-2">
|
2021-05-01 18:25:28 -05:00
|
|
|
<Link href={`${url}${maybeLocator}`}>
|
2021-04-18 18:27:30 -05:00
|
|
|
<a
|
2022-01-19 21:56:01 -06:00
|
|
|
className={`${extraClasses} block text-lg text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red hover:ring-alice-werefox-blue-dark dark:hover:ring-alice-werefox-blue text-alice-werefox-red-dark dark:text-alice-werefox-red-light hover:text-alice-werefox-blue-dark dark:hover:text-alice-werefox-blue-light hover:animate-yip transition`}
|
2021-04-18 18:27:30 -05:00
|
|
|
>
|
|
|
|
{images.map((source) => (
|
|
|
|
<span
|
|
|
|
key={source.src}
|
|
|
|
className="relative inline-block w-4 h-4 align-middle mb-1"
|
|
|
|
>
|
|
|
|
{" "}
|
|
|
|
<Image
|
|
|
|
src={source.src}
|
|
|
|
layout="fill"
|
|
|
|
objectFit="contain"
|
|
|
|
alt={source.alt}
|
|
|
|
/>{" "}
|
|
|
|
</span>
|
|
|
|
))}{" "}
|
2021-06-14 23:30:03 -05:00
|
|
|
{innerText == "Partners"
|
|
|
|
? partners > 0
|
|
|
|
? `Taken(${partners})`
|
|
|
|
: "Single"
|
|
|
|
: innerText}
|
2021-04-18 18:27:30 -05:00
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|