This repository has been archived on 2024-12-07. You can view files and clone it, but cannot push or open issues or pull requests.
helse-sprik/next-frontend/components/BildeOpplastning.tsx
Markus Johansen 177d6c7cd8 🏗️ Migrerer fra Next.js til Vite react
Co-authored-by: Øydis Kind Refsum <oydis.kind.refsum@nav.no>
Co-authored-by: Christian Bulow Skovborg <christian.bulow.skovborg@nav.no>
Co-authored-by: Amalie Mansåker <amalie.erdal.mansaker@nav.no>
Co-authored-by: Sindre Kjelsrud <sindre.kjelsrud@nav.no>
2023-07-19 14:53:13 +02:00

33 lines
No EOL
1.1 KiB
TypeScript

import { FileImageIcon, UploadIcon } from "@navikt/aksel-icons"
import { Button } from "@navikt/ds-react"
/**
* Inkluderer en knapp for opplastning i finder/explorer.
* Inkluderer et felt for drag and drop opplastning av bilder
* @returns `Drag and drop` komponent for filopplastning av skjermbilder
*/
const BildeOpplastning = () => {
return(
<div className="flex gap-2 flex-col">
<div className="
h-48 p-5 bg-bg-subtle hover:bg-surface-selected border-2 border-blue-500
rounded-lg border-dashed flex flex-col items-center justify-center text-center gap-2
">
<FileImageIcon
fontSize="3.5rem"
className="text-blue-500"
/>
<p className="text-surface-neutral">Dra og slipp skjermbilder her!</p>
</div>
<Button
variant="secondary"
icon={<UploadIcon />}
>
Last opp skjermbilder
</Button>
</div>
)
}
export default BildeOpplastning