byGalax
24 lines
831 B
TypeScript
24 lines
831 B
TypeScript
import { PinIcon } from './icons';
|
|
|
|
interface Props {
|
|
count: number;
|
|
onClick: () => void;
|
|
}
|
|
|
|
// Compact chip rendered in the conv header that opens the pinned panel.
|
|
// Renders nothing when count is 0 so a fresh conv shows no clutter.
|
|
export function PinnedMessagesPill({ count, onClick }: Props) {
|
|
if (count === 0) return null;
|
|
return (
|
|
<button
|
|
type="button"
|
|
onClick={onClick}
|
|
className="inline-flex h-7 cursor-pointer items-center gap-1.5 rounded-full border border-line bg-surface-3 px-2.5 text-xs font-medium text-fg-muted transition hover:bg-surface-2 hover:text-fg focus:outline-none focus-visible:ring-2 focus-visible:ring-accent/40"
|
|
title="Angepinnte Nachrichten anzeigen"
|
|
>
|
|
<PinIcon className="h-3 w-3 text-accent" />
|
|
<span>{count} angepinnt</span>
|
|
</button>
|
|
);
|
|
}
|