0b37c5e692
Website (14 monoliths split): - compliance/page.tsx (1,519 → 9), docs/audit (1,262 → 20) - quality (1,231 → 16), alerts (1,203 → 10), docs (1,202 → 11) - i18n.ts (1,173 → 8 language files) - unity-bridge (1,094 → 12), backlog (1,087 → 6) - training (1,066 → 8), rag (1,063 → 8) - Deleted index_original.ts (4,899 LOC dead backup) Studio-v2 (5 monoliths split): - meet/page.tsx (1,481 → 9), messages (1,166 → 9) - AlertsB2BContext.tsx (1,165 → 5 modules) - alerts-b2b/page.tsx (1,019 → 6), korrektur/archiv (1,001 → 6) All existing imports preserved. Zero new TypeScript errors. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
82 lines
2.7 KiB
TypeScript
82 lines
2.7 KiB
TypeScript
'use client'
|
|
|
|
import { useState } from 'react'
|
|
import { emojiCategories } from '@/lib/MessagesContext'
|
|
|
|
interface EmojiPickerProps {
|
|
onSelect: (emoji: string) => void
|
|
onClose: () => void
|
|
isDark: boolean
|
|
}
|
|
|
|
export function EmojiPicker({ onSelect, onClose, isDark }: EmojiPickerProps) {
|
|
const [activeCategory, setActiveCategory] = useState('Häufig')
|
|
|
|
return (
|
|
<div className={`absolute bottom-full left-0 mb-2 w-80 rounded-2xl border shadow-2xl overflow-hidden z-50 ${
|
|
isDark
|
|
? 'bg-slate-900 border-white/20'
|
|
: 'bg-white border-slate-200'
|
|
}`}>
|
|
{/* Header */}
|
|
<div className={`flex items-center justify-between p-3 border-b ${
|
|
isDark ? 'border-white/10' : 'border-slate-100'
|
|
}`}>
|
|
<span className={`text-sm font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
|
Emoji
|
|
</span>
|
|
<button
|
|
onClick={onClose}
|
|
className={`p-1 rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-slate-100 text-slate-400'
|
|
}`}
|
|
>
|
|
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
|
|
{/* Category Tabs */}
|
|
<div className={`flex overflow-x-auto border-b scrollbar-hide ${
|
|
isDark ? 'border-white/10' : 'border-slate-100'
|
|
}`}>
|
|
{Object.keys(emojiCategories).map(cat => (
|
|
<button
|
|
key={cat}
|
|
onClick={() => setActiveCategory(cat)}
|
|
className={`px-3 py-2 text-xs font-medium whitespace-nowrap transition-colors ${
|
|
activeCategory === cat
|
|
? isDark
|
|
? 'text-green-400 border-b-2 border-green-400'
|
|
: 'text-green-600 border-b-2 border-green-600'
|
|
: isDark
|
|
? 'text-white/60 hover:text-white'
|
|
: 'text-slate-500 hover:text-slate-900'
|
|
}`}
|
|
>
|
|
{cat}
|
|
</button>
|
|
))}
|
|
</div>
|
|
|
|
{/* Emoji Grid */}
|
|
<div className="p-3 max-h-48 overflow-y-auto">
|
|
<div className="grid grid-cols-8 gap-1">
|
|
{emojiCategories[activeCategory as keyof typeof emojiCategories].map((emoji, i) => (
|
|
<button
|
|
key={i}
|
|
onClick={() => onSelect(emoji)}
|
|
className={`w-8 h-8 flex items-center justify-center text-xl rounded-lg transition-colors ${
|
|
isDark ? 'hover:bg-white/10' : 'hover:bg-slate-100'
|
|
}`}
|
|
>
|
|
{emoji}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|