144 lines
5.9 KiB
JavaScript
144 lines
5.9 KiB
JavaScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function IdentityCard({
|
|
title,
|
|
info,
|
|
url,
|
|
src,
|
|
alt,
|
|
src2,
|
|
alt2,
|
|
children,
|
|
}) {
|
|
let infoarray = [];
|
|
let infodict = {};
|
|
if (info) {
|
|
infoarray = info.split("\n");
|
|
infoarray = infoarray.slice(0, infoarray.length - 1);
|
|
infodict = Object.assign({}, infoarray);
|
|
}
|
|
if (children) {
|
|
return (
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<div className="p-2 space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey 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">
|
|
<img
|
|
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
|
|
src={src}
|
|
alt={alt}
|
|
/>{" "}
|
|
{title}
|
|
</p>
|
|
</div>
|
|
<div className="p-4 space-y-4 rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
} else if (src2) {
|
|
return (
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<div className="p-2 flow space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey 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">
|
|
<img
|
|
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
|
|
src={src}
|
|
alt={alt}
|
|
/>{" "}
|
|
{title}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
|
|
{Object.keys(infodict).map((i) => (
|
|
<p key={i}>{infodict[i] == "" ? <br /> : infodict[i]}</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey 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>
|
|
</div>
|
|
);
|
|
} else if (url) {
|
|
return (
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<div className="p-2 flow space-y-3" id={title}>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey 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">
|
|
<img
|
|
className="object-contain relative inline-block w-8 h-8 align-middle mb-1"
|
|
src={src}
|
|
alt={alt}
|
|
/>{" "}
|
|
{title}
|
|
</p>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
|
|
{Object.keys(infodict).map((i) => (
|
|
<p className="overflow-auto" key={i}>
|
|
{infodict[i] == "" ? <br /> : infodict[i]}
|
|
</p>
|
|
))}
|
|
</div>
|
|
<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>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-light dark:bg-werefox-grey">
|
|
<div className="p-2 flow space-y-3">
|
|
<div className="rounded-lg ring-2 ring-werefox-grey 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">
|
|
<img
|
|
className="relative inline-block w-8 h-8 align-middle mb-1"
|
|
src={src}
|
|
alt={alt}
|
|
/>{" "}
|
|
{title}
|
|
</h4>
|
|
</div>
|
|
<div className="rounded-lg ring-2 ring-werefox-grey dark:ring-werefox-grey-darker bg-werefox-grey-lighter dark:bg-werefox-grey-dark">
|
|
<div className="p-4 space-y-4 text-center text-md sm:text-lg text-werefox-blue-dark dark:text-werefox-blue">
|
|
{Object.keys(infodict).map((i) => (
|
|
<p className="overflow-auto" key={i}>
|
|
{" "}
|
|
{infodict[i] == "" ? <br /> : infodict[i]}
|
|
</p>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
}
|