diff --git a/src/renderer/src/NoFileLoaded.tsx b/src/renderer/src/NoFileLoaded.tsx index 40ae1ac4..5d19f58f 100644 --- a/src/renderer/src/NoFileLoaded.tsx +++ b/src/renderer/src/NoFileLoaded.tsx @@ -1,4 +1,5 @@ -import { Fragment, memo, useMemo } from 'react'; +import { Fragment, memo, useMemo, useState } from 'react'; +import { motion, MotionStyle } from 'framer-motion'; import { useTranslation, Trans } from 'react-i18next'; @@ -18,6 +19,24 @@ function Keys({ keys }: { keys: string }) { )); } +const dropzoneStyle: MotionStyle = { + position: 'absolute', + left: 0, + right: 0, + top: 0, + bottom: 0, + color: 'var(--gray-12)', + margin: '2em', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + whiteSpace: 'nowrap', + borderWidth: '.7em', + borderStyle: 'dashed', + borderColor: 'var(--gray-3)', +}; + function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode, keyBindingByAction }: { mifiLink: unknown, currentCutSeg: StateSegment | undefined, @@ -27,13 +46,17 @@ function NoFileLoaded({ mifiLink, currentCutSeg, onClick, darkMode, keyBindingBy }) { const { t } = useTranslation(); const { simpleMode } = useUserSettings(); + const [dragging, setDragging] = useState(false); const currentCutSegOrDefault = useMemo(() => currentCutSeg ?? { segColorIndex: 0 }, [currentCutSeg]); return ( -