Agent Zero
43 lines
1.5 KiB
TypeScript
43 lines
1.5 KiB
TypeScript
import React from 'react';
|
|
import type { MessageBlock } from '@/store/commStore';
|
|
import { ChevronRight } from 'lucide-react';
|
|
import { useTranslation } from 'react-i18next';
|
|
|
|
interface ContactCardBlockProps {
|
|
block: MessageBlock;
|
|
}
|
|
|
|
const ContactCardBlock: React.FC<ContactCardBlockProps> = ({ block }) => {
|
|
const { t } = useTranslation();
|
|
const { contact_id, name } = block.block_data;
|
|
|
|
const contactName: string = name || 'Unbekannter Kontakt';
|
|
const contactId: string = contact_id || '';
|
|
const linkHref = contactId ? `/contacts/${contactId}` : '#';
|
|
|
|
// Generate initials for avatar placeholder
|
|
const initials = contactName
|
|
.split(' ')
|
|
.map((part) => part.charAt(0).toUpperCase())
|
|
.slice(0, 2)
|
|
.join('');
|
|
|
|
return (
|
|
<a
|
|
href={linkHref}
|
|
className="flex items-center gap-3 p-3 rounded-lg border border-secondary-200 bg-white shadow-sm hover:shadow-md hover:border-primary-300 transition-all"
|
|
>
|
|
<div className="flex-shrink-0 w-10 h-10 rounded-full bg-primary-100 text-primary-700 flex items-center justify-center text-sm font-semibold">
|
|
{initials || '?'}
|
|
</div>
|
|
<div className="flex-1 min-w-0">
|
|
<p className="text-sm font-medium text-secondary-700 truncate">{contactName}</p>
|
|
<p className="text-xs text-secondary-400">{t('contactCardBlock.kontaktanzeigen')}</p>
|
|
</div>
|
|
<ChevronRight className="w-4 h-4 text-secondary-400 flex-shrink-0" aria-hidden="true" strokeWidth={2} />
|
|
</a>
|
|
);
|
|
};
|
|
|
|
export default ContactCardBlock;
|