66 lines
1.8 KiB
TypeScript
66 lines
1.8 KiB
TypeScript
import Spinner from '@/components/Spinner';
|
|
import Tooltip from '@/components/Tooltip';
|
|
import clsx from 'clsx/lite';
|
|
import { ReactNode } from 'react';
|
|
import { BiLogoGithub } from 'react-icons/bi';
|
|
|
|
export default function GitHubForkStatusBadgeClient({
|
|
label,
|
|
style = 'mono',
|
|
tooltip,
|
|
}: {
|
|
label?: ReactNode
|
|
style?: 'success' | 'warning' | 'error' | 'mono'
|
|
tooltip?: ReactNode
|
|
}) {
|
|
const classNameForStyle = () => {
|
|
switch (style) {
|
|
case 'success': return clsx(
|
|
'text-green-700 hover:text-green-700',
|
|
'dark:text-green-400 dark:hover:text-green-400',
|
|
'bg-green-100/40 dark:bg-green-900/25',
|
|
'border-green-300/40 dark:border-green-900/50',
|
|
);
|
|
case 'warning': return clsx(
|
|
'text-amber-800/90 hover:text-amber-800/90',
|
|
'dark:text-amber-400 dark:hover:text-amber-400',
|
|
'bg-amber-100/40 dark:bg-amber-900/25',
|
|
'border-amber-300/40 dark:border-amber-900/50',
|
|
);
|
|
case 'error': return clsx(
|
|
'text-red-700/90 hover:text-red-700/90',
|
|
'dark:text-red-400 dark:hover:text-red-400',
|
|
'bg-red-100/20 dark:bg-red-900/25',
|
|
'border-red-300/40 dark:border-red-900/50',
|
|
);
|
|
default: return clsx(
|
|
'text-main',
|
|
'bg-white dark:bg-transparent',
|
|
'border-main',
|
|
);
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Tooltip content={tooltip}>
|
|
<div className={clsx(
|
|
'opacity-0 transition-opacity animate-fade-in',
|
|
'inline-flex items-center gap-2',
|
|
'border transition-colors',
|
|
'select-none',
|
|
'pl-[4.5px] pr-2.5 py-[3px]',
|
|
'rounded-full shadow-xs',
|
|
classNameForStyle(),
|
|
)}>
|
|
{!label
|
|
? <Spinner
|
|
color="text"
|
|
className="translate-x-[3px]"
|
|
/>
|
|
: <BiLogoGithub size={17} />}
|
|
{label ?? 'Checking'}
|
|
</div>
|
|
</Tooltip>
|
|
);
|
|
}
|