53 lines
1.6 KiB
TypeScript
53 lines
1.6 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import type { MessageBlock } from '@/store/commStore';
|
||
|
|
|
||
|
|
interface ContactCardBlockProps {
|
||
|
|
block: MessageBlock;
|
||
|
|
}
|
||
|
|
|
||
|
|
const ContactCardBlock: React.FC<ContactCardBlockProps> = ({ block }) => {
|
||
|
|
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">Kontakt anzeigen</p>
|
||
|
|
</div>
|
||
|
|
<svg
|
||
|
|
className="w-4 h-4 text-secondary-400 flex-shrink-0"
|
||
|
|
fill="none"
|
||
|
|
viewBox="0 0 24 24"
|
||
|
|
stroke="currentColor"
|
||
|
|
aria-hidden="true"
|
||
|
|
>
|
||
|
|
<path
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
strokeWidth={2}
|
||
|
|
d="M9 5l7 7-7 7"
|
||
|
|
/>
|
||
|
|
</svg>
|
||
|
|
</a>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ContactCardBlock;
|