Feature/faaliyat rozane cartable

2024-12-23 08:20:46 +00:00
parent f2ef4cd1db
commit 4b25071e41
75 changed files with 3722 additions and 236 deletions
--- a/src/core/components/UploadSystem.jsx
+++ b/src/core/components/UploadSystem.jsx
@@ -0,0 +1,94 @@
+import { Box, Button, Paper, Typography } from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import DeleteForeverIcon from "@mui/icons-material/DeleteForever";
+import { useRef } from "react";
+
+const UploadSystem = ({ selectedImage, handleUploadChange, imageSize, fileType, showAddIcon }) => {
+    const fileInputRef = useRef(null);
+
+    const handleClick = () => {
+        fileInputRef.current.click();
+    };
+
+    return (
+        <Box sx={{ width: "100%", my: 1 }}>
+            {showAddIcon ? (
+                <Box
+                    sx={{
+                        display: "flex",
+                        flexDirection: "column",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        border: "1px solid #b3b3b3",
+                        borderRadius: "10px",
+                        cursor: "pointer",
+                        padding: "5px",
+                        height: imageSize[1],
+                    }}
+                    onClick={handleClick}
+                >
+                    <AddIcon sx={{ fontSize: "2rem", color: "#a19d9d" }} />
+                    <Typography
+                        variant="subtitle2"
+                        sx={{
+                            fontWeight: 600,
+                            fontSize: "0.8rem",
+                            color: "#a19d9d",
+                            mt: 1,
+                        }}
+                        textAlign="center"
+                    >
+                        فرمت قابل قبول : png, jpg
+                        <br />
+                        حداکثر 3Mb
+                    </Typography>
+                </Box>
+            ) : (
+                <>
+                    {fileType && fileType.startsWith("image/") && (
+                        <Box
+                            width="100%"
+                            height={imageSize[1]}
+                            sx={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                cursor: "pointer",
+                                objectFit: "contain",
+                                border: "1px solid #b3b3b3",
+                                borderRadius: "10px",
+                                padding: "5px",
+                                overflow: "hidden",
+                            }}
+                            onClick={handleClick}
+                        >
+                            <Paper
+                                elevation={0}
+                                sx={{
+                                    width: "100%",
+                                    height: "100%",
+                                    display: "flex",
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    backgroundSize: "contain",
+                                    backgroundRepeat: "no-repeat",
+                                    backgroundPosition: "center",
+                                    backgroundImage: `url(${selectedImage})`,
+                                }}
+                            />
+                        </Box>
+                    )}
+                </>
+            )}
+            <input
+                type="file"
+                accept="image/*"
+                style={{ display: "none" }}
+                onChange={handleUploadChange}
+                ref={fileInputRef}
+            />
+        </Box>
+    );
+};
+export default UploadSystem;