misc_pterodactyl-panel/resources/scripts/components/server/console/StatBlock.tsx

52 lines
1.9 KiB
TypeScript
Raw Normal View History

2022-11-25 20:25:03 +00:00
import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
import classNames from 'classnames';
2022-11-25 20:25:03 +00:00
import type { ReactNode } from 'react';
import { useFitText } from '@flyyer/use-fit-text';
import CopyOnClick from '@/components/elements/CopyOnClick';
2022-11-25 20:25:03 +00:00
import Icon from '@/components/elements/Icon';
import styles from './style.module.css';
interface StatBlockProps {
title: string;
copyOnClick?: string;
color?: string | undefined;
icon: IconDefinition;
2022-11-25 20:25:03 +00:00
children: ReactNode;
className?: string;
}
2022-11-25 20:25:03 +00:00
function StatBlock({ title, copyOnClick, icon, color, className, children }: StatBlockProps) {
const { fontSize, ref } = useFitText({ minFontSize: 8, maxFontSize: 500 });
return (
<CopyOnClick text={copyOnClick}>
<div className={classNames(styles.stat_block, 'bg-gray-600', className)}>
<div className={classNames(styles.status_bar, color || 'bg-gray-700')} />
<div className={classNames(styles.icon, color || 'bg-gray-700')}>
<Icon
icon={icon}
className={classNames({
'text-gray-100': !color || color === 'bg-gray-700',
'text-gray-50': color && color !== 'bg-gray-700',
})}
/>
</div>
<div className={'flex flex-col justify-center overflow-hidden w-full'}>
<p className={'font-header leading-tight text-xs md:text-sm text-gray-200'}>{title}</p>
<div
ref={ref}
className={'h-[1.75rem] w-full font-semibold text-gray-50 truncate'}
style={{ fontSize }}
>
{children}
</div>
</div>
</div>
</CopyOnClick>
);
2022-11-25 20:25:03 +00:00
}
export default StatBlock;