62 lines
1.7 KiB
JavaScript
62 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 (
|
|
<>
|
|
{values.map((v, i) => (
|
|
<div key={v}>{replaceWithImageTags(i, v, emoji_paths[v])}</div>
|
|
))}
|
|
</>
|
|
);
|
|
} else {
|
|
return <></>;
|
|
}
|
|
}
|
|
|
|
export function renderPossibleInfo(info, emoji_paths) {
|
|
if (Boolean(info)) {
|
|
let infoarray = info.split("\n");
|
|
infoarray = infoarray.slice(0, infoarray.length - 1);
|
|
return infoarray.map((line) => (
|
|
<div key={line}>
|
|
{line == "" ? <br /> : formatCustomEmoji(line, emoji_paths)}
|
|
</div>
|
|
));
|
|
} else {
|
|
return <></>;
|
|
}
|
|
}
|
|
|
|
export default function introductionCard({ local, introduction, emoji_paths }) {
|
|
if (local) {
|
|
return (
|
|
<div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
|
|
{renderPossibleInfo(introduction, emoji_paths)}
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="items-center justify-center space-y-4 p-8 overflow-wrap w-full text-lg text-center text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
|
|
{renderPossibleInfo(introduction, emoji_paths)}
|
|
</div>
|
|
);
|
|
}
|
|
}
|