144 lines
4.1 KiB
TypeScript
144 lines
4.1 KiB
TypeScript
import {
|
|
DialogBody,
|
|
DialogCloseTrigger,
|
|
DialogContent,
|
|
DialogFooter,
|
|
DialogHeader,
|
|
DialogRoot,
|
|
DialogTitle,
|
|
DialogTrigger,
|
|
} from "../../../components/ui/dialog";
|
|
import {
|
|
Box,
|
|
Field,
|
|
IconButton,
|
|
Input,
|
|
Stack,
|
|
Text,
|
|
Textarea,
|
|
} from "@chakra-ui/react";
|
|
import { Button } from "../../../components/ui/button";
|
|
import { FiUpload } from "react-icons/fi";
|
|
import { useState } from "react";
|
|
import { FaRegEdit } from "react-icons/fa";
|
|
import Edit from "../../../components/ActionIcons/Edit";
|
|
|
|
function EditTemplateModel() {
|
|
const [images, setImages] = useState<string[]>([]);
|
|
|
|
const handleImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
|
if (event.target.files) {
|
|
const selectedFiles = Array.from(event.target.files);
|
|
|
|
const newImages = selectedFiles.map((file) => {
|
|
return URL.createObjectURL(file); // Convert to preview URL
|
|
});
|
|
|
|
setImages((prevImages) => [...prevImages, ...newImages]); // Append new images
|
|
}
|
|
};
|
|
|
|
return (
|
|
<DialogRoot placement="center">
|
|
<DialogTrigger asChild>
|
|
<Edit />
|
|
</DialogTrigger>
|
|
|
|
<DialogContent
|
|
bg={"#fff"}
|
|
// w={{ lg: "60%", md: "230px" }}
|
|
w={{ base: "90%", md: "400px" }}
|
|
height={"auto"}
|
|
overflowX="hidden"
|
|
p={3} // Reduced padding
|
|
bgSize={"md"}
|
|
>
|
|
<DialogHeader bg="white">
|
|
<DialogTitle alignSelf="center" color="black" fontSize="14px">
|
|
Add
|
|
</DialogTitle>
|
|
</DialogHeader>
|
|
|
|
<DialogBody bg="white">
|
|
<Stack py={3}>
|
|
<Field.Root>
|
|
<Field.Label color="black" pt={1} fontSize="12px">
|
|
Template Name
|
|
</Field.Label>
|
|
<Input
|
|
placeholder=""
|
|
bgColor="#EEEEEE"
|
|
color="black"
|
|
border="none"
|
|
pl={1}
|
|
fontSize="12px"
|
|
height="30px"
|
|
/>
|
|
|
|
<Field.Label color="black" pt={1} fontSize="12px">
|
|
Images
|
|
</Field.Label>
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="space-between"
|
|
px={3}
|
|
bgColor="#EEEEEE"
|
|
border="none"
|
|
width="100%"
|
|
height="50px"
|
|
cursor="pointer"
|
|
position="relative"
|
|
>
|
|
<Input
|
|
type="file"
|
|
accept="image/*"
|
|
opacity={0}
|
|
position="absolute"
|
|
bgColor="#EEEEEE"
|
|
border="none"
|
|
pl={1}
|
|
width="100%"
|
|
height="100%"
|
|
cursor="pointer"
|
|
onChange={handleImageChange}
|
|
/>
|
|
<Box display="flex" gap={2} overflow="hidden">
|
|
{images.length > 0 ? (
|
|
images.map((img, index) => (
|
|
<img
|
|
key={index}
|
|
src={img}
|
|
alt={`Uploaded ${index}`}
|
|
style={{
|
|
maxHeight: "40px",
|
|
maxWidth: "70px",
|
|
objectFit: "contain",
|
|
}}
|
|
/>
|
|
))
|
|
) : (
|
|
<Box width="70px" height="40px" /> // Placeholder to maintain layout
|
|
)}
|
|
</Box>
|
|
<FiUpload color="#000" />
|
|
</Box>
|
|
|
|
{/* <Input placeholder="" bgColor="#EEEEEE" color="black" border="none" pl={1} fontSize="12px" height="30px" /> */}
|
|
</Field.Root>
|
|
</Stack>
|
|
</DialogBody>
|
|
<DialogFooter display="flex" justifyContent="center" pt={"2"}>
|
|
<Button w="100%" bg="#02A0A0" color={"#fff"}>
|
|
Save
|
|
</Button>
|
|
</DialogFooter>
|
|
|
|
<DialogCloseTrigger color="black" />
|
|
</DialogContent>
|
|
</DialogRoot>
|
|
);
|
|
}
|
|
|
|
export default EditTemplateModel;
|