116 lines
3.7 KiB
TypeScript
116 lines
3.7 KiB
TypeScript
'use client'
|
|
import { LayoutNavbarNew, TEMA, WARNA } from '@/module/_global';
|
|
import LayoutModal from '@/module/_global/layout/layout_modal';
|
|
import { useHookstate } from '@hookstate/core';
|
|
import { Box, Button, Group, Paper, rem, Text, TextInput } from '@mantine/core';
|
|
import { Dropzone, DropzoneProps, IMAGE_MIME_TYPE } from '@mantine/dropzone';
|
|
import { IconPhoto, IconUpload, IconX } from '@tabler/icons-react';
|
|
import { useParams, useRouter } from 'next/navigation';
|
|
import { useState } from 'react';
|
|
|
|
|
|
function EditBanner(props: Partial<DropzoneProps> ) {
|
|
const tema = useHookstate(TEMA)
|
|
const [title, setTitle] = useState("")
|
|
const [openModal, setOpenModal] = useState(false)
|
|
const [touched, setTouched] = useState({
|
|
title: false,
|
|
});
|
|
|
|
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back='/banner' title='Edit Banner' menu={<></>} />
|
|
<Box p={20}>
|
|
<Box>
|
|
<Paper withBorder radius={20}>
|
|
<Dropzone
|
|
onDrop={(files) => console.log('accepted files', files)}
|
|
onReject={(files) => console.log('rejected files', files)}
|
|
maxSize={5 * 1024 ** 2}
|
|
accept={IMAGE_MIME_TYPE}
|
|
{...props}
|
|
>
|
|
<Group justify="center" gap="xl" mih={220} style={{ pointerEvents: 'none' }}>
|
|
<Dropzone.Accept>
|
|
<IconUpload
|
|
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-blue-6)' }}
|
|
stroke={1.5}
|
|
/>
|
|
</Dropzone.Accept>
|
|
<Dropzone.Reject>
|
|
<IconX
|
|
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-red-6)' }}
|
|
stroke={1.5}
|
|
/>
|
|
</Dropzone.Reject>
|
|
<Dropzone.Idle>
|
|
<IconPhoto
|
|
style={{ width: rem(52), height: rem(52), color: 'var(--mantine-color-dimmed)' }}
|
|
stroke={1.5}
|
|
/>
|
|
</Dropzone.Idle>
|
|
|
|
<Box>
|
|
<Text size="xl" inline>
|
|
Upload File
|
|
</Text>
|
|
<Text size="sm" c="dimmed" inline mt={7}>
|
|
File Tidak Boleh Melebihi 500mb
|
|
</Text>
|
|
</Box>
|
|
</Group>
|
|
</Dropzone>
|
|
</Paper>
|
|
<Box>
|
|
<TextInput
|
|
mt={10}
|
|
label="Judul Banner"
|
|
placeholder='Banner'
|
|
styles={{
|
|
input: {
|
|
border: `1px solid ${"#D6D8F6"}`,
|
|
borderRadius: 10,
|
|
},
|
|
}}
|
|
required
|
|
size='md'
|
|
value={title}
|
|
onChange={(e) => {
|
|
setTitle(e.currentTarget.value)
|
|
setTouched({...touched, title: false})
|
|
}}
|
|
|
|
/>
|
|
</Box>
|
|
<Box pos={"fixed"} bottom={0} p={rem(20)} w={"100%"} style={{
|
|
maxWidth: rem(510),
|
|
zIndex: 999,
|
|
backgroundColor: `${tema.get().bgUtama}`
|
|
}}>
|
|
<Button
|
|
size='lg'
|
|
color='white'
|
|
bg={WARNA.biruTua}
|
|
radius={30}
|
|
fullWidth
|
|
>
|
|
Simpan
|
|
</Button>
|
|
|
|
<LayoutModal opened={openModal} onClose={() => setOpenModal(false)}
|
|
description="Apakah Anda yakin ingin mengedit banner ini?"
|
|
onYes={(val) => {
|
|
|
|
setOpenModal(false)
|
|
}}
|
|
/>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
export default EditBanner;
|