50 lines
1.1 KiB
TypeScript
50 lines
1.1 KiB
TypeScript
import React from "react";
|
|
|
|
interface Props {
|
|
emojis: string[];
|
|
onSelectEmoji(emoji: string): void;
|
|
}
|
|
|
|
export function QuickEmojis({ emojis, onSelectEmoji }: Props) {
|
|
return (
|
|
<div
|
|
style={{
|
|
backgroundColor: "var(--gray-700)",
|
|
maxHeight: 250,
|
|
overflowY: "auto",
|
|
overflowX: "hidden",
|
|
borderRadius: "4px",
|
|
border: "1px solid rgba(255, 255, 255, 0.3)",
|
|
boxShadow: "0px 2px 5px rgb(0 0 0 / 20%)",
|
|
zIndex: 999,
|
|
}}
|
|
>
|
|
{emojis.map((emoji) => (
|
|
<div
|
|
key={emoji}
|
|
role="button"
|
|
onClick={() => onSelectEmoji(emoji)}
|
|
style={{
|
|
borderBottom: "1px solid #606060",
|
|
padding: "4px",
|
|
cursor: "pointer",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "space-between",
|
|
}}
|
|
>
|
|
<img
|
|
src={`/e/${emoji}.webp`}
|
|
style={{
|
|
objectFit: "contain",
|
|
width: 30,
|
|
height: 30,
|
|
}}
|
|
/>
|
|
<span>{emoji}</span>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|