94 lines
3.1 KiB
TypeScript
94 lines
3.1 KiB
TypeScript
import { ClassicFileReader } from '@standardnotes/filepicker'
|
|
import { NoteImportType } from '@standardnotes/ui-services'
|
|
import { useCallback } from 'react'
|
|
import Button from '../Button/Button'
|
|
import Icon from '../Icon/Icon'
|
|
import { ImportModalAction } from './Types'
|
|
|
|
type Props = {
|
|
dispatch: React.Dispatch<ImportModalAction>
|
|
}
|
|
|
|
const ImportModalInitialPage = ({ dispatch }: Props) => {
|
|
const selectFiles = useCallback(
|
|
async (service?: NoteImportType) => {
|
|
const files = await ClassicFileReader.selectFiles()
|
|
|
|
dispatch({
|
|
type: 'setFiles',
|
|
files,
|
|
service,
|
|
})
|
|
},
|
|
[dispatch],
|
|
)
|
|
|
|
return (
|
|
<>
|
|
<button
|
|
onClick={() => selectFiles()}
|
|
className="flex min-h-[30vh] w-full flex-col items-center justify-center gap-2 rounded border-2 border-dashed border-info p-2 hover:border-4"
|
|
onDragStart={(e) => e.preventDefault()}
|
|
onDragOver={(e) => e.preventDefault()}
|
|
onDrop={(e) => {
|
|
e.preventDefault()
|
|
const files = Array.from(e.dataTransfer.files)
|
|
dispatch({
|
|
type: 'setFiles',
|
|
files,
|
|
})
|
|
}}
|
|
>
|
|
<div className="text-lg font-semibold">Drag and drop files to auto-detect and import</div>
|
|
<div className="text-sm">Or click to open file picker</div>
|
|
</button>
|
|
<div className="relative mt-6 mb-6 w-full">
|
|
<hr className="w-full border-border" />
|
|
<div className="absolute left-1/2 top-1/2 -translate-y-1/2 -translate-x-1/2 bg-default p-1">
|
|
or import from:
|
|
</div>
|
|
</div>
|
|
<div className="flex flex-wrap items-center justify-center gap-4">
|
|
<Button
|
|
className="flex items-center bg-[#14cc45] !py-2 text-[#000]"
|
|
primary
|
|
onClick={() => selectFiles('evernote')}
|
|
>
|
|
<Icon type="evernote" className="mr-2" />
|
|
Evernote
|
|
</Button>
|
|
<Button
|
|
className="flex items-center bg-[#fbbd00] !py-2 text-[#000]"
|
|
primary
|
|
onClick={() => selectFiles('google-keep')}
|
|
>
|
|
<Icon type="gkeep" className="mr-2" />
|
|
Google Keep
|
|
</Button>
|
|
<Button className="flex items-center bg-[#3360cc] !py-2" primary onClick={() => selectFiles('simplenote')}>
|
|
<Icon type="simplenote" className="mr-2" />
|
|
Simplenote
|
|
</Button>
|
|
<Button className="flex items-center bg-[#0d47a1] !py-2" primary onClick={() => selectFiles('aegis')}>
|
|
<Icon type="aegis" className="mr-2" />
|
|
Aegis Authenticator
|
|
</Button>
|
|
<Button className="flex items-center bg-info !py-2" onClick={() => selectFiles('plaintext')} primary>
|
|
<Icon type="plain-text" className="mr-2" />
|
|
Plaintext
|
|
</Button>
|
|
<Button
|
|
className="flex items-center bg-accessory-tint-4 !py-2"
|
|
primary
|
|
onClick={() => selectFiles('plaintext')}
|
|
>
|
|
<Icon type="markdown" className="mr-2" />
|
|
Markdown
|
|
</Button>
|
|
</div>
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default ImportModalInitialPage
|