fonctionnalités de la page Profile user

2026-05-14 01:31:54 +00:00 · 2023-03-27 23:41:10 +02:00
parent 2def92dc25
commit e3344c5103
9 changed files with 416 additions and 204 deletions
@@ -0,0 +1,94 @@
+import {
+  Button,
+  Flex,
+  Grid,
+  GridItem,
+  Image,
+  Input,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalOverlay,
+  useDisclosure,
+} from "@chakra-ui/react";
+import { RiEditBoxLine } from "react-icons/ri";
+
+export default function ModalModifyImages(props) {
+  const { isOpen, onOpen, onClose } = useDisclosure();
+  const { images, userData, setUserData } = props;
+  return (
+    <>
+      <Button
+        colorScheme={"purple"}
+        onClick={onOpen}
+        leftIcon={<RiEditBoxLine />}
+      >
+        Modifier les images
+      </Button>
+
+      <Modal
+        blockScrollOnMount={false}
+        size={"4xl"}
+        isOpen={isOpen}
+        onClose={onClose}
+        scrollBehavior={"inside"}
+      >
+        <ModalOverlay />
+        <ModalContent>
+          <ModalHeader>Modification des images</ModalHeader>
+          <ModalCloseButton />
+          <ModalBody>
+            <Grid templateColumns={`repeat(${images.length + 1}, 1fr)`} gap={5}>
+              {images.map((image, index) => (
+                <GridItem key={index}>
+                  <Flex direction={"column"} gap={"1rem"}>
+                    <Image src={image} />
+                    <Button
+                      id={"" + index}
+                      colorScheme={"red"}
+                      onClick={(e) => {
+                        images.splice(index, 1);
+                        setUserData({
+                          ...userData,
+                          images: [...images],
+                        });
+                      }}
+                    >
+                      Supprimer l'image
+                    </Button>
+                  </Flex>
+                </GridItem>
+              ))}
+              {images.length < 5 ? (
+                <GridItem width={"100%"}>
+                  <Input
+                    type={"file"}
+                    height={"100%"}
+                    accept={"image/png, image/jpeg, image/webp"}
+                    onChange={(e) => {
+                      setUserData({
+                        ...userData,
+                        images: [...images, e.target.files[0].name],
+                      });
+                    }}
+                  ></Input>
+                </GridItem>
+              ) : (
+                <></>
+              )}
+            </Grid>
+          </ModalBody>
+
+          <ModalFooter>
+            <Button colorScheme="purple" mr={3} onClick={onClose}>
+              Save
+            </Button>
+          </ModalFooter>
+        </ModalContent>
+      </Modal>
+    </>
+  );
+}