112 lines
4.7 KiB
JavaScript
112 lines
4.7 KiB
JavaScript
import Link from "next/link";
|
|
import Image from "next/image";
|
|
|
|
export default function PageButton({
|
|
theme,
|
|
title,
|
|
images,
|
|
url,
|
|
extra_classes,
|
|
new_tab,
|
|
}) {
|
|
if (theme == "Skye") {
|
|
if (Boolean(new_tab)) {
|
|
return (
|
|
<div>
|
|
<Link href={url}
|
|
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
|
|
target="_blank"
|
|
>
|
|
{images.map((source) => (
|
|
<span
|
|
key={source}
|
|
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
|
|
>
|
|
<Image
|
|
src={source.src}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={source.alt}
|
|
/>
|
|
</span>
|
|
))}
|
|
{` ${title}`}
|
|
</Link>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<Link href={url}
|
|
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-skye-werefox-grey-lightest dark:bg-skye-werefox-grey-dark ring-skye-werefox-pink-dark dark:ring-skye-werefox-pink hover:ring-skye-werefox-blue-dark dark:hover:ring-skye-werefox-blue text-skye-werefox-pink-dark dark:text-skye-werefox-pink hover:text-skye-werefox-blue-dark dark:hover:text-skye-werefox-blue-light focus:text-skye-werefox-blue-dark dark:focus:text-skye-werefox-blue-light hover:animate-yip transition`}
|
|
>
|
|
{images.map((source) => (
|
|
<span
|
|
key={source}
|
|
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
|
|
>
|
|
<Image
|
|
src={source.src}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={source.alt}
|
|
/>
|
|
</span>
|
|
))}
|
|
{` ${title}`}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
} else {
|
|
if (Boolean(new_tab)) {
|
|
return (
|
|
<div>
|
|
<Link href={url}
|
|
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark 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 focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
|
|
target="_blank"
|
|
>
|
|
{images.map((source) => (
|
|
<span
|
|
key={source}
|
|
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
|
|
>
|
|
<Image
|
|
src={source.src}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={source.alt}
|
|
/>
|
|
</span>
|
|
))}
|
|
{` ${title}`}
|
|
</Link>
|
|
</div>
|
|
);
|
|
} else {
|
|
return (
|
|
<div>
|
|
<Link href={url}
|
|
className={`${extra_classes} p-2 w-full inline-block text-lg text-center rounded-sm ring-2 bg-alice-werefox-grey-lightest dark:bg-alice-werefox-grey-dark 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 focus:text-alice-werefox-blue-dark dark:focus:text-alice-werefox-blue-light hover:animate-yip transition`}
|
|
>
|
|
{images.map((source) => (
|
|
<span
|
|
key={source}
|
|
className="animate-jiggle sm:w-6 sm:h-6 w-4 h-6 inline-block align-top"
|
|
>
|
|
<Image
|
|
src={source.src}
|
|
layout="fill"
|
|
objectFit="contain"
|
|
alt={source.alt}
|
|
/>
|
|
</span>
|
|
))}
|
|
{` ${title}`}
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
}
|
|
}
|