2021-04-25 01:57:01 -05:00
|
|
|
import Link from "next/link";
|
2021-10-13 23:00:25 -05:00
|
|
|
import Image from "next/image";
|
2021-04-25 01:57:01 -05:00
|
|
|
|
2021-04-25 21:18:47 -05:00
|
|
|
export function validURL(str) {
|
2021-10-18 13:08:33 -05:00
|
|
|
const pattern = new RegExp(
|
2021-04-25 21:18:47 -05:00
|
|
|
"^(https?:\\/\\/)?" + // protocol
|
|
|
|
"((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|" + // domain name
|
|
|
|
"((\\d{1,3}\\.){3}\\d{1,3}))" + // OR ip (v4) address
|
2021-10-18 13:08:33 -05:00
|
|
|
"(\\:\\d+)?(\\/[-a-z\\d%_.~+$]*)*" + // port and path
|
2021-04-25 21:18:47 -05:00
|
|
|
"(\\?[;&a-z\\d%_.~+=-]*)?" + // query string
|
|
|
|
"(\\#[-a-z\\d_]*)?$",
|
|
|
|
"i"
|
|
|
|
); // fragment locator
|
|
|
|
return !!pattern.test(str);
|
|
|
|
}
|
|
|
|
|
2021-10-18 13:08:33 -05:00
|
|
|
export function replaceWithImageTags(index, str, emoji_path) {
|
|
|
|
if (index % 2 === 0) {
|
|
|
|
return <p className="inline">{`${str}`}</p>;
|
|
|
|
} else {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
|
|
|
|
<Image src={emoji_path} layout="fill" objectFit="contain" alt={str} />
|
|
|
|
</span>
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export function formatCustomEmoji(str, emoji_paths) {
|
|
|
|
const emoji_pattern = new RegExp(/(:[A-Za-z_-]+:)/, "g");
|
|
|
|
const values = emoji_pattern[Symbol.split](str);
|
|
|
|
if (Boolean(emoji_paths)) {
|
|
|
|
return (
|
|
|
|
<>
|
|
|
|
{Object.keys(values).map((v) =>
|
|
|
|
replaceWithImageTags(v, values[v], emoji_paths[values[v]])
|
|
|
|
)}
|
|
|
|
</>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export function renderPossibleURLField(field, emoji_paths) {
|
2021-04-25 21:18:47 -05:00
|
|
|
if (validURL(field)) {
|
|
|
|
return (
|
|
|
|
<Link href={field}>
|
2021-10-13 23:00:25 -05:00
|
|
|
<a target="_blank">
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm 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-10-13 23:00:25 -05:00
|
|
|
{field}
|
|
|
|
</div>
|
2021-04-25 21:18:47 -05:00
|
|
|
</a>
|
|
|
|
</Link>
|
|
|
|
);
|
|
|
|
} else {
|
|
|
|
return (
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="p-2 flex min-w-full min-h-full justify-center items-center align-middle ring-2 rounded-sm ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
|
2021-10-18 13:08:33 -05:00
|
|
|
{formatCustomEmoji(field, emoji_paths)}
|
2021-06-23 19:25:33 -05:00
|
|
|
</div>
|
2021-04-25 21:18:47 -05:00
|
|
|
);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-18 13:08:33 -05:00
|
|
|
export function renderPossibleFields(fields, emoji_paths) {
|
2021-10-17 14:41:51 -05:00
|
|
|
if (Boolean(fields)) {
|
|
|
|
return Object.keys(fields).map((field) => (
|
|
|
|
<div className="grid grid-cols-2 space-x-4" key={field}>
|
2021-10-18 13:08:33 -05:00
|
|
|
<div className="order-1">
|
|
|
|
{renderPossibleURLField(field, emoji_paths)}
|
|
|
|
</div>
|
|
|
|
<div className="order-2">
|
|
|
|
{renderPossibleURLField(fields[field], emoji_paths)}
|
|
|
|
</div>
|
2021-10-17 14:41:51 -05:00
|
|
|
</div>
|
|
|
|
));
|
|
|
|
} else {
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-18 13:08:33 -05:00
|
|
|
export function renderPossibleBio(bio, emoji_paths) {
|
2021-10-17 14:41:51 -05:00
|
|
|
if (Boolean(bio)) {
|
|
|
|
let bioarray = bio.split("\n");
|
|
|
|
bioarray = bioarray.slice(0, bioarray.length - 1);
|
|
|
|
const biodict = Object.assign({}, bioarray);
|
|
|
|
return Object.keys(biodict).map((bio) => (
|
2021-10-18 13:08:33 -05:00
|
|
|
<div key={bio}>
|
|
|
|
{biodict[bio] == "" ? (
|
|
|
|
<br />
|
|
|
|
) : (
|
|
|
|
formatCustomEmoji(biodict[bio], emoji_paths)
|
|
|
|
)}
|
|
|
|
</div>
|
2021-10-17 14:41:51 -05:00
|
|
|
));
|
|
|
|
} else {
|
|
|
|
return <></>;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2021-10-18 13:08:33 -05:00
|
|
|
export default function PartnerCard({
|
|
|
|
src,
|
|
|
|
alt,
|
|
|
|
url,
|
|
|
|
fields,
|
|
|
|
bio,
|
|
|
|
user,
|
|
|
|
emoji_paths,
|
|
|
|
}) {
|
2021-04-25 21:18:47 -05:00
|
|
|
const finalsrc = Boolean(src) ? src : "/images/logo.png";
|
2021-04-25 01:57:01 -05:00
|
|
|
|
|
|
|
return (
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="p-4 flex-column space-y-4 sm:break-normal break-all sm:text-sm text-xs text-center rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
|
2021-04-25 01:57:01 -05:00
|
|
|
<Link href={url}>
|
2021-10-13 23:00:25 -05:00
|
|
|
<a target="_blank">
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="p-4 flex group 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-10-13 23:00:25 -05:00
|
|
|
<div className="order-1 flex-1 flex-shrink-0 relative items-center justify-center align-middle sm:w-32 w-16 min-h-full mr-4">
|
|
|
|
<Image
|
|
|
|
src={finalsrc}
|
|
|
|
layout="fill"
|
|
|
|
objectFit="contain"
|
|
|
|
alt={alt}
|
|
|
|
/>
|
|
|
|
</div>
|
2021-10-14 16:22:07 -05:00
|
|
|
<div className="order-2 flex-5 space-y-4">
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="p-2 rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red group-hover:ring-alice-werefox-blue-dark dark:group-hover:ring-alice-werefox-blue">
|
2021-10-18 13:08:33 -05:00
|
|
|
{renderPossibleBio(bio, emoji_paths)}
|
2021-10-13 23:00:25 -05:00
|
|
|
{`- @${user}`}
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-04-25 01:57:01 -05:00
|
|
|
</div>
|
|
|
|
</a>
|
2021-10-13 23:00:25 -05:00
|
|
|
</Link>
|
2022-01-19 21:56:01 -06:00
|
|
|
<div className="flex-column space-y-4 break-all text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
|
2021-10-18 13:08:33 -05:00
|
|
|
{renderPossibleFields(fields, emoji_paths)}
|
2021-04-25 01:57:01 -05:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|