27 lines
1.1 KiB
TypeScript
27 lines
1.1 KiB
TypeScript
'use client';
|
||
|
||
import { Pencil, X } from 'lucide-react';
|
||
import { Button } from '@/components/ui/button';
|
||
|
||
interface ChatMessageEditBannerProps {
|
||
preview?: string;
|
||
onCancel: () => void;
|
||
}
|
||
|
||
export function ChatMessageEditBanner({ preview, onCancel }: ChatMessageEditBannerProps) {
|
||
return (
|
||
<div className="mb-2 flex items-center gap-3 rounded-xl border border-[#3390ec]/20 bg-[#eef4ff] px-3 py-2 animate-in fade-in slide-in-from-bottom-1 duration-200">
|
||
<div className="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#3390ec]/15 text-[#3390ec]">
|
||
<Pencil className="h-4 w-4" />
|
||
</div>
|
||
<div className="min-w-0 flex-1">
|
||
<p className="text-sm font-medium text-[#3390ec]">Редактирование сообщения</p>
|
||
{preview ? <p className="truncate text-xs text-[#667085]">{preview}</p> : null}
|
||
</div>
|
||
<Button type="button" variant="ghost" size="icon" className="h-8 w-8 shrink-0 rounded-lg" aria-label="Отменить редактирование" onClick={onCancel}>
|
||
<X className="h-4 w-4" />
|
||
</Button>
|
||
</div>
|
||
);
|
||
}
|