88 lines
2.1 KiB
Plaintext
88 lines
2.1 KiB
Plaintext
---
|
|
import { Icon } from "astro-icon/components";
|
|
import { getLanguage } from "../../utils/languages";
|
|
|
|
interface Props {
|
|
lang: string;
|
|
size?: "xs" | "md";
|
|
linkEnabled?: boolean;
|
|
}
|
|
|
|
const { size = "md", lang, linkEnabled = true } = Astro.props as Props;
|
|
|
|
const baseClasses = {
|
|
container: [
|
|
"flex items-center w-fit",
|
|
"pl-2 pr-2 py-0.5 gap-1",
|
|
"text-sm font-semibold leading-3",
|
|
"bg-white shadow rounded-full",
|
|
"transition-all duration-300 ease-in-out hover:bg-zinc-800 hover:text-white",
|
|
"max-sm:pl-1 max-sm:pr-1.5 max-sm:text-xs max-sm:gap-0.5",
|
|
].join(" "),
|
|
iconContainer: [
|
|
"flex items-center justify-center",
|
|
"aspect-square",
|
|
"bg-black rounded-full p-1",
|
|
].join(" "),
|
|
};
|
|
|
|
const sizeClasses = {
|
|
xs: "size-5",
|
|
md: "size-7",
|
|
};
|
|
|
|
const selectedLanguage = getLanguage(lang);
|
|
|
|
const getContainerClasses = () => {
|
|
const textSize = selectedLanguage.name.length > 10 ? "text-sm" : "text-base";
|
|
return `${baseClasses.container} ${textSize}`;
|
|
};
|
|
|
|
const getIconContainerClasses = () => {
|
|
return `${baseClasses.iconContainer} ${sizeClasses[size]} max-lg:size-6 max-sm:size-5 ${
|
|
selectedLanguage.className ? selectedLanguage.className : ""
|
|
}`;
|
|
};
|
|
---
|
|
|
|
{
|
|
linkEnabled ? (
|
|
<a
|
|
class="cursor-pointer"
|
|
href={`/blog/techs/${lang}`}
|
|
aria-label={`View articles about ${selectedLanguage.name}`}
|
|
role="link"
|
|
>
|
|
<span
|
|
class={getContainerClasses()}
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class={getIconContainerClasses()}
|
|
role="img"
|
|
aria-label={`${selectedLanguage.name} icon`}
|
|
>
|
|
<Icon class="!w-full" name={selectedLanguage.iconName} />
|
|
</div>
|
|
{selectedLanguage.name}
|
|
</span>
|
|
</a>
|
|
) : (
|
|
<span
|
|
class={`${getContainerClasses()} cursor-default`}
|
|
role="presentation"
|
|
aria-hidden="true"
|
|
>
|
|
<div
|
|
class={getIconContainerClasses()}
|
|
role="img"
|
|
aria-label={`${selectedLanguage.name} icon`}
|
|
>
|
|
<Icon class="!w-full" name={selectedLanguage.iconName} />
|
|
</div>
|
|
{selectedLanguage.name}
|
|
</span>
|
|
)
|
|
}
|