File size: 1,555 Bytes
f0743f4 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 | import React from 'react';
import { cn } from '~/utils';
interface ConvoLinkProps {
isActiveConvo: boolean;
title: string | null;
onRename: () => void;
isSmallScreen: boolean;
localize: (key: any, options?: any) => string;
children: React.ReactNode;
}
const ConvoLink: React.FC<ConvoLinkProps> = ({
isActiveConvo,
title,
onRename,
isSmallScreen,
localize,
children,
}) => {
return (
<div
className={cn(
'flex grow items-center gap-2 overflow-hidden rounded-lg px-2',
isActiveConvo ? 'bg-surface-active-alt' : '',
)}
title={title ?? undefined}
aria-current={isActiveConvo ? 'page' : undefined}
style={{ width: '100%' }}
>
{children}
<div
className="relative flex-1 grow overflow-hidden whitespace-nowrap"
style={{ textOverflow: 'clip' }}
onDoubleClick={(e) => {
if (isSmallScreen) {
return;
}
e.preventDefault();
e.stopPropagation();
onRename();
}}
aria-label={title || localize('com_ui_untitled')}
>
{title || localize('com_ui_untitled')}
</div>
<div
className={cn(
'absolute bottom-0 right-0 top-0 w-20 rounded-r-lg bg-gradient-to-l',
isActiveConvo
? 'from-surface-active-alt'
: 'from-surface-primary-alt from-0% to-transparent group-hover:from-surface-active-alt group-hover:from-40%',
)}
aria-hidden="true"
/>
</div>
);
};
export default ConvoLink;
|