hamid zarghami
42 lines
1.0 KiB
TypeScript
42 lines
1.0 KiB
TypeScript
import { FC } from 'react'
|
|
|
|
type Props = {
|
|
color: string
|
|
text?: string
|
|
size?: 'sm' | 'md' | 'lg'
|
|
}
|
|
|
|
const StatusCircle: FC<Props> = ({ color, text, size = 'md' }) => {
|
|
const sizeClasses = {
|
|
sm: 'size-2',
|
|
md: 'size-3',
|
|
lg: 'size-4'
|
|
}
|
|
|
|
const colorClasses = {
|
|
green: 'bg-green-500',
|
|
blue: 'bg-blue-500',
|
|
red: 'bg-red-500',
|
|
gray: 'bg-gray-500',
|
|
purple: 'bg-purple-500',
|
|
orange: 'bg-orange-500',
|
|
yellow: 'bg-yellow-500'
|
|
}
|
|
|
|
if (text) {
|
|
return (
|
|
<div className="flex items-center gap-2">
|
|
<div className={`${sizeClasses[size]} ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'} rounded-full`} />
|
|
<span className="text-sm font-medium">{text}</span>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className={`${sizeClasses[size]} rounded-full ${colorClasses[color as keyof typeof colorClasses] || 'bg-gray-500'}`}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export default StatusCircle |