85 lines
3.0 KiB
JavaScript
85 lines
3.0 KiB
JavaScript
import Image from "next/image";
|
|
|
|
export default function WerefoxCardTitle({ theme, title, title_emoji }) {
|
|
if (theme == "Ada") {
|
|
if (Boolean(title_emoji)) {
|
|
return (
|
|
<div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan ">
|
|
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
|
|
<Image
|
|
src={title_emoji["src"]}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={title_emoji["alt"]}
|
|
/>
|
|
</span>
|
|
<p className="inline text-md sm:text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
|
|
{` ${title}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="rounded-sm ring-2 ring-ada-werefox-cyan-dark dark:ring-ada-werefox-cyan">
|
|
<p className="p-4 text-center text-md sm:text-lg text-ada-werefox-cyan-dark dark:text-ada-werefox-cyan">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
if (theme == "Skye") {
|
|
if (Boolean(title_emoji)) {
|
|
return (
|
|
<div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink ">
|
|
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
|
|
<Image
|
|
src={title_emoji["src"]}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={title_emoji["alt"]}
|
|
/>
|
|
</span>
|
|
<p className="inline text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
|
|
{` ${title}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="rounded-sm ring-2 ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink">
|
|
<p className="p-4 text-center text-md sm:text-lg text-skye-werefox-pink-dark dark:text-skye-werefox-pink">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
} else {
|
|
if (Boolean(title_emoji)) {
|
|
return (
|
|
<div className="p-4 w-full items-center justify-center align-middle rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red ">
|
|
<span className="object-contain relative inline-block w-8 h-8 mb-1 align-middle">
|
|
<Image
|
|
src={title_emoji["src"]}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={title_emoji["alt"]}
|
|
/>
|
|
</span>
|
|
<p className="inline text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
|
|
{` ${title}`}
|
|
</p>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div className="rounded-sm ring-2 ring-alice-werefox-red-dark dark:ring-alice-werefox-red">
|
|
<p className="p-4 text-center text-md sm:text-lg text-alice-werefox-red-dark dark:text-alice-werefox-red-light">
|
|
{title}
|
|
</p>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|