Carlos
48 lines
1.7 KiB
React
48 lines
1.7 KiB
React
import { useState, useEffect } from 'react'
|
|
|
|
const AVATARS = [
|
|
'😀', '😃', '😄', '😁', '😆', '😅', '😂', '🤣', '😊', '😇',
|
|
'🙂', '🙃', '😉', '😌', '😍', '🥰', '😘', '😗', '😙', '😚',
|
|
'😋', '😛', '😝', '😜', '🤪', '🤨', '🧐', '🤓', '😎', '🤩',
|
|
'🥳', '😏', '😒', '😞', '😔', '😟', '😕', '😣', '😖', '😫',
|
|
'😩', '🥺', '😢', '😭', '😤', '😠', '😡', '🤬', '🤯', '😳',
|
|
'🥵', '🥶', '😱', '😨', '😰', '😥', '😢', '🤔', '🤫', '🤭',
|
|
'🤗', '🤑', '🤠', '🤢', '🤮', '🤧', '🥵', '🥶', '👍', '👎'
|
|
]
|
|
|
|
export default function AvatarSelector({ selectedAvatar, onSelect }) {
|
|
const [isOpen, setIsOpen] = useState(false)
|
|
|
|
return (
|
|
<div className="relative">
|
|
<button
|
|
onClick={() => setIsOpen(!isOpen)}
|
|
className="text-4xl hover:scale-110 transition-transform"
|
|
title="Selecionar avatar"
|
|
>
|
|
{selectedAvatar || '👤'}
|
|
</button>
|
|
|
|
{isOpen && (
|
|
<div className="absolute top-12 right-0 bg-white border rounded-lg shadow-lg p-3 z-50 w-64">
|
|
<div className="grid grid-cols-10 gap-2 max-h-48 overflow-y-auto">
|
|
{AVATARS.map((avatar, index) => (
|
|
<button
|
|
key={index}
|
|
onClick={() => {
|
|
onSelect(avatar)
|
|
setIsOpen(false)
|
|
}}
|
|
className={`text-xl hover:scale-125 transition-transform ${
|
|
selectedAvatar === avatar ? 'ring-2 ring-blue-500 rounded' : ''
|
|
}`}
|
|
>
|
|
{avatar}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
)
|
|
} |