68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
"use client"
|
||
|
||
import dynamic from 'next/dynamic'
|
||
import { useState, useRef, useEffect } from 'react'
|
||
import { Button } from '@/components/ui/button'
|
||
import { Smile } from 'lucide-react'
|
||
|
||
// Динамически импортируем EmojiPicker чтобы избежать проблем с SSR
|
||
const EmojiPicker = dynamic(
|
||
() => import('emoji-picker-react'),
|
||
{ ssr: false }
|
||
)
|
||
|
||
interface EmojiPickerComponentProps {
|
||
onEmojiSelect: (emoji: string) => void
|
||
}
|
||
|
||
export function EmojiPickerComponent({ onEmojiSelect }: EmojiPickerComponentProps) {
|
||
const [showPicker, setShowPicker] = useState(false)
|
||
const pickerRef = useRef<HTMLDivElement>(null)
|
||
|
||
useEffect(() => {
|
||
const handleClickOutside = (event: MouseEvent) => {
|
||
if (pickerRef.current && !pickerRef.current.contains(event.target as Node)) {
|
||
setShowPicker(false)
|
||
}
|
||
}
|
||
|
||
if (showPicker) {
|
||
document.addEventListener('mousedown', handleClickOutside)
|
||
}
|
||
|
||
return () => {
|
||
document.removeEventListener('mousedown', handleClickOutside)
|
||
}
|
||
}, [showPicker])
|
||
|
||
const handleEmojiClick = (emojiData: { emoji: string }) => {
|
||
onEmojiSelect(emojiData.emoji)
|
||
setShowPicker(false)
|
||
}
|
||
|
||
return (
|
||
<div className="relative" ref={pickerRef}>
|
||
<Button
|
||
type="button"
|
||
variant="ghost"
|
||
size="sm"
|
||
onClick={() => setShowPicker(!showPicker)}
|
||
className="text-white/60 hover:text-white hover:bg-white/10 p-2"
|
||
>
|
||
<Smile className="h-4 w-4" />
|
||
</Button>
|
||
|
||
{showPicker && (
|
||
<div className="absolute bottom-full right-0 mb-2 z-50">
|
||
<div className="bg-gray-800 border border-white/20 rounded-lg overflow-hidden shadow-xl">
|
||
<EmojiPicker
|
||
onEmojiClick={handleEmojiClick}
|
||
width={350}
|
||
height={400}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|