57 lines
1.8 KiB
TypeScript
57 lines
1.8 KiB
TypeScript
import { useAppTranslation } from '@features/localization/renderer';
|
|
import { Ban, Paperclip } from 'lucide-react';
|
|
|
|
interface DropZoneOverlayProps {
|
|
active: boolean;
|
|
/** Show a "rejected" variant when files can't be sent to this recipient. */
|
|
rejected?: boolean;
|
|
/** Custom rejection message. Defaults to generic restriction text. */
|
|
rejectionReason?: string;
|
|
}
|
|
|
|
export const DropZoneOverlay = ({
|
|
active,
|
|
rejected,
|
|
rejectionReason,
|
|
}: DropZoneOverlayProps): React.JSX.Element | null => {
|
|
const { t } = useAppTranslation('team');
|
|
|
|
if (!active) return null;
|
|
|
|
if (rejected) {
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed backdrop-blur-[1px]"
|
|
style={{
|
|
borderColor: '#ef4444',
|
|
backgroundColor: 'color-mix(in srgb, #ef4444 10%, transparent)',
|
|
}}
|
|
>
|
|
<div className="flex flex-col items-center gap-1.5 text-red-400">
|
|
<Ban size={24} />
|
|
<span className="text-xs font-medium">
|
|
{rejectionReason ?? 'Files can only be sent to the team lead'}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
className="pointer-events-none absolute inset-0 z-10 flex items-center justify-center rounded-md border-2 border-dashed backdrop-blur-[1px]"
|
|
style={{
|
|
borderColor: 'var(--color-accent, #6366f1)',
|
|
backgroundColor: 'color-mix(in srgb, var(--color-accent, #6366f1) 10%, transparent)',
|
|
}}
|
|
>
|
|
<div
|
|
className="flex flex-col items-center gap-1.5"
|
|
style={{ color: 'var(--color-accent, #6366f1)' }}
|
|
>
|
|
<Paperclip size={24} />
|
|
<span className="text-xs font-medium">{t('taskAttachments.dropFilesHere')}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|