37 lines
1.2 KiB
TypeScript
37 lines
1.2 KiB
TypeScript
'use client';
|
||
|
||
import { Pin } from 'lucide-react';
|
||
import { cn } from '@/lib/utils';
|
||
|
||
interface ChatPinnedMessageBannerProps {
|
||
senderName: string;
|
||
preview: string;
|
||
className?: string;
|
||
onClick: () => void;
|
||
}
|
||
|
||
export function ChatPinnedMessageBanner({ senderName, preview, className, onClick }: ChatPinnedMessageBannerProps) {
|
||
return (
|
||
<button
|
||
type="button"
|
||
className={cn(
|
||
'flex w-full items-center gap-3 border-b border-[#dce3ec] bg-white/95 px-4 py-2 text-left shadow-[0_8px_20px_rgba(31,36,48,0.06)] backdrop-blur transition hover:bg-[#f7f9fc]',
|
||
className
|
||
)}
|
||
onClick={onClick}
|
||
>
|
||
<span className="h-10 w-1 shrink-0 rounded-full bg-[#3390ec]" aria-hidden />
|
||
<span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-[#3390ec]/10 text-[#3390ec]">
|
||
<Pin className="h-4 w-4" />
|
||
</span>
|
||
<span className="min-w-0 flex-1">
|
||
<span className="block text-sm font-semibold text-[#3390ec]">Закреплённое сообщение</span>
|
||
<span className="block truncate text-sm text-[#1f2430]">
|
||
<span className="font-medium">{senderName}: </span>
|
||
{preview || 'Сообщение'}
|
||
</span>
|
||
</span>
|
||
</button>
|
||
);
|
||
}
|