89 lines
2.2 KiB
TypeScript
89 lines
2.2 KiB
TypeScript
'use client'
|
|
import { LayoutNavbarNew, WARNA } from "@/module/_global";
|
|
import { Box, Button, Center, SimpleGrid, Text } from "@mantine/core";
|
|
import { useRouter } from "next/navigation";
|
|
import React, { useState } from "react";
|
|
import { BsFiletypeCsv } from "react-icons/bs";
|
|
|
|
const dataFile = [
|
|
{
|
|
id: 1,
|
|
name: "Semua_Proyek.csv",
|
|
},
|
|
{
|
|
id: 2,
|
|
name: "Proyek_Dinas.csv",
|
|
},
|
|
{
|
|
id: 3,
|
|
name: "Proyek_Lpd.csv",
|
|
},
|
|
{
|
|
id: 4,
|
|
name: "Proyek_Lembaga1.csv",
|
|
},
|
|
{
|
|
id: 5,
|
|
name: "Proyek_Lembaga2.csv",
|
|
},
|
|
{
|
|
id: 6,
|
|
name: "Proyek_Lembaga3.csv",
|
|
},
|
|
];
|
|
|
|
|
|
export default function FileSave({ kategori }: { kategori: string }) {
|
|
const router = useRouter()
|
|
const [selectedFiles, setSelectedFiles] = useState<Record<number, boolean>>({});
|
|
|
|
const handleFileClick = (index: number) => {
|
|
setSelectedFiles((prevSelectedFiles) => ({
|
|
...prevSelectedFiles,
|
|
[index]: !prevSelectedFiles[index],
|
|
}));
|
|
};
|
|
|
|
return (
|
|
<Box>
|
|
<LayoutNavbarNew back="" title="File Tersimpan" menu />
|
|
<Box p={20}>
|
|
<SimpleGrid
|
|
cols={{ base: 2, sm: 2, lg: 2 }}
|
|
spacing={{ base: 20, sm: "xl" }}
|
|
verticalSpacing={{ base: "md", sm: "xl" }}
|
|
>
|
|
{dataFile.map((file, index) => {
|
|
const isSelected = selectedFiles[index];
|
|
return (
|
|
<Box key={index} mb={20}>
|
|
<Box
|
|
bg={"#DCEED8"}
|
|
style={{
|
|
border: `${isSelected ? "2px solid #FFC107" : "1px solid #D6D8F6"}`,
|
|
borderRadius: 10,
|
|
}}
|
|
py={30}
|
|
onClick={() => handleFileClick(index)}
|
|
>
|
|
<Center>
|
|
<BsFiletypeCsv size={80} />
|
|
</Center>
|
|
</Box>
|
|
<Text mt={10} ta="center">
|
|
{file.name}
|
|
</Text>
|
|
</Box>
|
|
);
|
|
})}
|
|
</SimpleGrid>
|
|
<Box mt="xl">
|
|
<Button color="white" bg={WARNA.biruTua} size="lg" radius={30} fullWidth onClick={() => router.push(`/${kategori}/create?anggota=yes&files=yes&button=yes`)}>
|
|
Simpan
|
|
</Button>
|
|
</Box>
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|