sandrodachandClaude Opus 5.5
6fb98d4002
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 2m33s
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
42 lines
1.5 KiB
TypeScript
42 lines
1.5 KiB
TypeScript
import React, { useRef, useState } from 'react';
|
|
import { SmilePlus } from 'lucide-react';
|
|
import { EmojiPickerModal } from '../features/workspace/EmojiPickerModal';
|
|
|
|
interface EmojiIconButtonProps {
|
|
value: string;
|
|
// "" = no icon (removed in the picker)
|
|
onChange: (emoji: string) => void;
|
|
}
|
|
|
|
// Icon field of the create dialogs (note, task list, list): the emoji as a button that opens the same
|
|
// picker as the icon of an open note, removing included (Doku/ui-patterns.md).
|
|
export const EmojiIconButton: React.FC<EmojiIconButtonProps> = ({ value, onChange }) => {
|
|
const buttonRef = useRef<HTMLButtonElement>(null);
|
|
const [anchor, setAnchor] = useState<DOMRect | null>(null);
|
|
return (
|
|
<>
|
|
<button
|
|
ref={buttonRef}
|
|
type="button"
|
|
onClick={() => setAnchor((cur) => (cur ? null : buttonRef.current?.getBoundingClientRect() ?? null))}
|
|
title={value ? 'Icon ändern' : 'Icon wählen'}
|
|
aria-label={value ? 'Icon ändern' : 'Icon wählen'}
|
|
className="w-12 sm:w-10 h-11 sm:h-8 flex-shrink-0 flex items-center justify-center input-field text-lg sm:text-base leading-none cursor-pointer hover:border-strong"
|
|
>
|
|
{value || <SmilePlus className="w-4 h-4 text-faint" strokeWidth={1.75} />}
|
|
</button>
|
|
{anchor && (
|
|
<EmojiPickerModal
|
|
currentIcon={value}
|
|
anchor={anchor}
|
|
onSelectEmoji={(emoji) => {
|
|
onChange(emoji);
|
|
setAnchor(null);
|
|
}}
|
|
onClose={() => setAnchor(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
};
|