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

66 lines
1.7 KiB
JavaScript

import Image from "next/image";
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 renderPossibleInfo(info, emoji_paths) {
if (Boolean(info)) {
let infoarray = info.split("\n");
infoarray = infoarray.slice(0, infoarray.length - 1);
const infodict = Object.assign({}, infoarray);
return Object.keys(infodict).map((info) => (
<div key={info}>
{infodict[info] == "" ? (
<br />
) : (
formatCustomEmoji(infodict[info], emoji_paths)
)}
</div>
));
} else {
return <></>;
}
}
export default function IdentityCardTextBox({ info }) {
let infoarray = [];
let infodict = {};
if (info) {
infoarray = info.split("\n");
infoarray = infoarray.slice(0, infoarray.length - 1);
infodict = Object.assign({}, infoarray);
}
return (
<div className="p-4 text-center text-md sm:text-lg ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
{renderPossibleInfo(info, {})}
</div>
);
}