63 lines
1.9 KiB
TypeScript
63 lines
1.9 KiB
TypeScript
|
import React from 'react';
|
||
|
|
import type { MessageBlock } from '@/store/commStore';
|
||
|
|
|
||
|
|
interface ActionCardBlockProps {
|
||
|
|
block: MessageBlock;
|
||
|
|
}
|
||
|
|
|
||
|
|
interface ActionItem {
|
||
|
|
label: string;
|
||
|
|
action: string;
|
||
|
|
type?: 'primary' | 'secondary';
|
||
|
|
}
|
||
|
|
|
||
|
|
const ActionCardBlock: React.FC<ActionCardBlockProps> = ({ block }) => {
|
||
|
|
const { title, body, actions } = block.block_data;
|
||
|
|
|
||
|
|
const cardTitle: string = title || '';
|
||
|
|
const cardBody: string = body || '';
|
||
|
|
const actionList: ActionItem[] = Array.isArray(actions) ? actions : [];
|
||
|
|
|
||
|
|
const handleActionClick = (action: ActionItem) => {
|
||
|
|
if (action.action === 'dismiss') {
|
||
|
|
// Frontend handles dismiss — no-op here, parent component can wire up
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
// Treat as URL
|
||
|
|
window.open(action.action, '_blank', 'noopener,noreferrer');
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="border border-secondary-200 rounded-lg p-4 shadow-sm bg-white space-y-2">
|
||
|
|
{cardTitle && (
|
||
|
|
<h4 className="text-sm font-semibold text-secondary-800">{cardTitle}</h4>
|
||
|
|
)}
|
||
|
|
{cardBody && (
|
||
|
|
<p className="text-sm text-secondary-600">{cardBody}</p>
|
||
|
|
)}
|
||
|
|
{actionList.length > 0 && (
|
||
|
|
<div className="flex flex-wrap gap-2 pt-1">
|
||
|
|
{actionList.map((action, idx) => {
|
||
|
|
const isPrimary = action.type !== 'secondary';
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
key={idx}
|
||
|
|
onClick={() => handleActionClick(action)}
|
||
|
|
className={
|
||
|
|
isPrimary
|
||
|
|
? 'px-3 py-1.5 text-sm rounded-lg bg-primary-600 text-white hover:bg-primary-700 transition-colors'
|
||
|
|
: 'px-3 py-1.5 text-sm rounded-lg bg-secondary-100 text-secondary-700 hover:bg-secondary-200 transition-colors'
|
||
|
|
}
|
||
|
|
>
|
||
|
|
{action.label || 'Aktion'}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ActionCardBlock;
|