Remove mounted state check to fix hydration error
This commit is contained in:
@@ -162,7 +162,7 @@ export default function ListDetailView({
|
|||||||
return (
|
return (
|
||||||
<div className="space-y-6">
|
<div className="space-y-6">
|
||||||
{/* Permission Badge and Share Button */}
|
{/* Permission Badge and Share Button */}
|
||||||
{mounted && (permission || canShare) && (
|
{(permission || canShare) && (
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
{permission && <PermissionBadge permission={permission} />}
|
{permission && <PermissionBadge permission={permission} />}
|
||||||
{canShare && (
|
{canShare && (
|
||||||
|
|||||||
@@ -1,7 +1,6 @@
|
|||||||
'use client'
|
'use client'
|
||||||
|
|
||||||
import { Shield, Eye, Edit3 } from 'lucide-react'
|
import { Shield, Eye, Edit3 } from 'lucide-react'
|
||||||
import { useEffect, useState } from 'react'
|
|
||||||
|
|
||||||
type Permission = 'owner' | 'editor' | 'viewer'
|
type Permission = 'owner' | 'editor' | 'viewer'
|
||||||
|
|
||||||
@@ -11,12 +10,6 @@ interface PermissionBadgeProps {
|
|||||||
}
|
}
|
||||||
|
|
||||||
export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
|
export default function PermissionBadge({ permission, size = 'md' }: PermissionBadgeProps) {
|
||||||
const [mounted, setMounted] = useState(false)
|
|
||||||
|
|
||||||
useEffect(() => {
|
|
||||||
setMounted(true)
|
|
||||||
}, [])
|
|
||||||
|
|
||||||
const config = {
|
const config = {
|
||||||
owner: {
|
owner: {
|
||||||
icon: Shield,
|
icon: Shield,
|
||||||
@@ -35,14 +28,6 @@ export default function PermissionBadge({ permission, size = 'md' }: PermissionB
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
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 { icon: Icon, label, className } = config[permission]
|
||||||
const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
|
const sizeClasses = size === 'sm' ? 'text-xs px-2 py-1' : 'text-sm px-3 py-1.5'
|
||||||
const iconSize = size === 'sm' ? 12 : 14
|
const iconSize = size === 'sm' ? 12 : 14
|
||||||
|
|||||||
Reference in New Issue
Block a user