47 lines
1.8 KiB
TypeScript
47 lines
1.8 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import Icon from '@/components/elements/Icon';
|
||
|
|
import { IconDefinition } from '@fortawesome/free-solid-svg-icons';
|
||
|
|
import classNames from 'classnames';
|
||
|
|
import Tooltip from '@/components/elements/tooltip/Tooltip';
|
||
|
|
|
||
|
|
interface StatBlockProps {
|
||
|
|
title: string;
|
||
|
|
description?: string;
|
||
|
|
color?: string | undefined;
|
||
|
|
icon: IconDefinition;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default ({ title, icon, color, description, children }: StatBlockProps) => {
|
||
|
|
return (
|
||
|
|
<Tooltip arrow placement={'top'} disabled={!description} content={description || ''}>
|
||
|
|
<div className={'flex items-center space-x-4 bg-gray-600 rounded p-4 shadow-lg'}>
|
||
|
|
<div
|
||
|
|
className={classNames(
|
||
|
|
'transition-colors duration-500',
|
||
|
|
'flex-shrink-0 flex items-center justify-center w-12 h-12 rounded-lg shadow-md',
|
||
|
|
color || 'bg-gray-700',
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
icon={icon}
|
||
|
|
className={classNames(
|
||
|
|
'w-6 h-6 m-auto',
|
||
|
|
{
|
||
|
|
'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'}>
|
||
|
|
<p className={'font-header leading-tight text-sm text-gray-200'}>{title}</p>
|
||
|
|
<p className={'text-xl font-semibold text-gray-50 truncate'}>
|
||
|
|
{children}
|
||
|
|
</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</Tooltip>
|
||
|
|
);
|
||
|
|
};
|