989af67c0a
* refactor: update Next.js and React.js * refactor: update Next.js images * refactor: update ESLint rules and fix warnings/errors * fix: remove old intl polyfill * fix: add proper size to next/image components * fix: adjust full-size for next/image components * fix: temporary allow all domains for image optimization * build: fixes an issue where dev env could lead to javascript heap out of memory * fix: resolve webpack cache issue with country-flag-icons * refactor: switch compiler from Babel to SWC * fix: resize logo in sidebar * fix: break word on long path to avoid text overflow * chore: added sharp for production image optimisation * fix: change extract script for i18n to a custom script * fix: resolve GitHub CodeQL alert * chore: temporarily remove builds for ARMv7 * fix: resize avatar images * refactor: update Node.js to v20 * fix: resolve various UI issues * build: migrate yarn to pnpm and restrict engine to node@^20.0.0 * ci: specify the pnpm version to use in workflow actions * ci: fix typo in pnpm action-setup for cypress workflow * test(cypress): use pnpm instead of yarn * style: ran prettier on pnpm-lock * ci(cypress): setup nodejs v20 in cypress workflow * ci: pnpm cache to reduce install time * ci: use sh shell to get pnpm store directory * build(dockerfile): migrate to pnpm from yarn in docker builds * build(dockerfile): copy the proper pnpm lockfile * build: install pnpm for all platforms * build(dockerfile): remove unnecessary `&&` on apk installation steps * build: migrate pnpm 8 to 9 * build(dockerfile): add node-gyp back in * build(dockerfile): install node-gyp through npm * build(dockerfile): ignore scripts to not run husky install when devdependencies are pruned * build: migrate to pnpm from yarn * chore: remove a section that is no longer relevant --------- Co-authored-by: fallenbagel <98979876+Fallenbagel@users.noreply.github.com>
117 lines
2.6 KiB
TypeScript
117 lines
2.6 KiB
TypeScript
import Link from 'next/link';
|
|
import React from 'react';
|
|
|
|
interface BadgeProps {
|
|
badgeType?:
|
|
| 'default'
|
|
| 'primary'
|
|
| 'danger'
|
|
| 'warning'
|
|
| 'success'
|
|
| 'dark'
|
|
| 'light';
|
|
className?: string;
|
|
href?: string;
|
|
children: React.ReactNode;
|
|
}
|
|
|
|
const Badge = (
|
|
{ badgeType = 'default', className, href, children }: BadgeProps,
|
|
ref?: React.Ref<HTMLElement>
|
|
) => {
|
|
const badgeStyle = [
|
|
'px-2 inline-flex text-xs leading-5 font-semibold rounded-full whitespace-nowrap',
|
|
];
|
|
|
|
if (href) {
|
|
badgeStyle.push('transition cursor-pointer !no-underline');
|
|
} else {
|
|
badgeStyle.push('cursor-default');
|
|
}
|
|
|
|
switch (badgeType) {
|
|
case 'danger':
|
|
badgeStyle.push(
|
|
'bg-red-600 bg-opacity-80 border-red-500 border !text-red-100'
|
|
);
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-red-500 bg-opacity-100');
|
|
}
|
|
break;
|
|
case 'warning':
|
|
badgeStyle.push(
|
|
'bg-yellow-500 bg-opacity-80 border-yellow-500 border !text-yellow-100'
|
|
);
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-yellow-500 hover:bg-opacity-100');
|
|
}
|
|
break;
|
|
case 'success':
|
|
badgeStyle.push(
|
|
'bg-green-500 bg-opacity-80 border border-green-500 !text-green-100'
|
|
);
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-green-500 hover:bg-opacity-100');
|
|
}
|
|
break;
|
|
case 'dark':
|
|
badgeStyle.push('bg-gray-900 !text-gray-400');
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-gray-800');
|
|
}
|
|
break;
|
|
case 'light':
|
|
badgeStyle.push('bg-gray-700 !text-gray-300');
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-gray-600');
|
|
}
|
|
break;
|
|
default:
|
|
badgeStyle.push(
|
|
'bg-indigo-500 bg-opacity-80 border border-indigo-500 !text-indigo-100'
|
|
);
|
|
if (href) {
|
|
badgeStyle.push('hover:bg-indigo-500 hover:bg-opacity-100');
|
|
}
|
|
}
|
|
|
|
if (className) {
|
|
badgeStyle.push(className);
|
|
}
|
|
|
|
if (href?.includes('://')) {
|
|
return (
|
|
<a
|
|
href={href}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
className={badgeStyle.join(' ')}
|
|
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
>
|
|
{children}
|
|
</a>
|
|
);
|
|
} else if (href) {
|
|
return (
|
|
<Link
|
|
href={href}
|
|
className={badgeStyle.join(' ')}
|
|
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
>
|
|
{children}
|
|
</Link>
|
|
);
|
|
} else {
|
|
return (
|
|
<span
|
|
className={badgeStyle.join(' ')}
|
|
ref={ref as React.Ref<HTMLSpanElement>}
|
|
>
|
|
{children}
|
|
</span>
|
|
);
|
|
}
|
|
};
|
|
|
|
export default React.forwardRef(Badge) as typeof Badge;
|