98 lines
3.7 KiB
JavaScript
98 lines
3.7 KiB
JavaScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function IdentityCard({
|
|
title,
|
|
info,
|
|
url,
|
|
src,
|
|
alt,
|
|
src2,
|
|
alt2,
|
|
children,
|
|
}) {
|
|
if (children) {
|
|
return (
|
|
<div className="p-2 flow space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
|
|
<span className="relative inline-block w-8 h-8 align-middle mb-1">
|
|
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
|
</span>{" "}
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
{children}
|
|
</div>
|
|
);
|
|
} else if (src2) {
|
|
return (
|
|
<div className="p-2 flow space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<h4 className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
|
|
<span className="relative inline-block w-8 h-8 align-middle mb-1">
|
|
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
|
</span>{" "}
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
|
|
{Object.keys(info).map((i) => (
|
|
<p className="pb-4" key={i}>
|
|
{info[i]}
|
|
</p>
|
|
))}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<a href="https://twitter.com/ribbonfemale" target="_blank">
|
|
<span className="relative inline-flex align-middle">
|
|
<Image
|
|
className="rounded-lg"
|
|
src={src2}
|
|
layout="intrinsic"
|
|
width="2048"
|
|
height="2048"
|
|
alt={alt2}
|
|
/>
|
|
</span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="p-2 flow space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<p className="p-4 text-center text-lg sm:text-2xl text-werefox-grey-dark dark:text-werefox-grey-lighter">
|
|
<span className="relative inline-block w-8 h-8 align-middle mb-1">
|
|
<Image src={src} layout="fill" objectFit="contain" alt={alt} />
|
|
</span>{" "}
|
|
{title}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey-lightest dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<p className="p-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
|
|
{Object.keys(info).map((i) => (
|
|
<p className="pb-4" key={i}>
|
|
{info[i]}
|
|
</p>
|
|
))}
|
|
</p>
|
|
<div className="pb-4 text-center text-md sm:text-lg 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"
|
|
>
|
|
Learn More
|
|
</a>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|