59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
'use client'
|
|
|
|
import { Shield, Eye, Edit3 } from 'lucide-react'
|
|
import { useEffect, useState } from 'react'
|
|
|
|
type Permission = 'owner' | 'editor' | 'viewer'
|
|
|
|
interface PermissionBadgeProps {
|
|
permission: Permission
|
|
size?: 'sm' | 'md'
|
|
}
|
|
|
|
export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
|
|
const [mounted, setMounted] = useState(false)
|
|
|
|
useEffect(() => {
|
|
setMounted(true)
|
|
}, [])
|
|
|
|
const config = {
|
|
owner: {
|
|
icon: Shield,
|
|
label: 'Owner',
|
|
className: 'bg-purple-100 text-purple-700 border-purple-200',
|
|
},
|
|
editor: {
|
|
icon: Edit3,
|
|
label: 'Editor',
|
|
className: 'bg-blue-100 text-blue-700 border-blue-200',
|
|
},
|
|
viewer: {
|
|
icon: Eye,
|
|
label: 'Viewer',
|
|
className: 'bg-gray-100 text-gray-700 border-gray-200',
|
|
},
|
|
}
|
|
|
|
if (!mounted) {
|
|
return (
|
|
<span className={`inline-flex items-center gap-1.5 rounded-full border font-medium bg-gray-100 text-gray-700 border-gray-200 ${size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'}`}>
|
|
Loading...
|
|
</span>
|
|
)
|
|
}
|
|
|
|
const { icon: Icon, label, className } = config[permission]
|
|
const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
|
|
const iconSize = size === 'sm' ? 12 : 14
|
|
|
|
return (
|
|
<span
|
|
className={`inline-flex items-center gap-1.5 rounded-full border font-medium ${className} ${sizeClasses}`}
|
|
>
|
|
<Icon size={iconSize} />
|
|
{label}
|
|
</span>
|
|
)
|
|
}
|