Stirling-PDF/frontend/src/components/fileManager/DragOverlay.tsx

import React from 'react';
import { Stack, Text, useMantineTheme, alpha } from '@mantine/core';
import UploadFileIcon from '@mui/icons-material/UploadFile';
import { useTranslation } from 'react-i18next';

interface DragOverlayProps {
  isVisible: boolean;
}

const DragOverlay: React.FC<DragOverlayProps> = ({ isVisible }) => {
  const { t } = useTranslation();
  const theme = useMantineTheme();

  if (!isVisible) return null;

  return (
    <div
      style={{
        position: 'absolute',
        top: 0,
        left: 0,
        right: 0,
        bottom: 0,
        backgroundColor: alpha(theme.colors.blue[6], 0.1),
        border: `0.125rem dashed ${theme.colors.blue[6]}`,
        borderRadius: '1.875rem',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        zIndex: 1000,
        pointerEvents: 'none'
      }}
    >
      <Stack align="center" gap="md">
        <UploadFileIcon style={{ fontSize: '4rem', color: theme.colors.blue[6] }} />
        <Text size="xl" fw={500} c="blue.6">
          {t('fileManager.dropFilesHere', 'Drop files here to upload')}
        </Text>
      </Stack>
    </div>
  );
};

export default DragOverlay;