block,unblock,report, shortlisted changes in detail page

2026-04-29 13:11:07 +05:30
1 parent 30bea864e5
commit 11cc3c58b6
@@ -0,0 +1,72 @@
+import React, { useState, useEffect } from "react";
+import { IconButton, Dialog, DialogTitle, DialogContent, DialogActions, Box, Button, TextField } from "@mui/material";
+import { X } from "lucide-react";
+
+const ReportModel = ({ open, onClose, onSubmit, actionType }) => {
+    const [reason, setReason] = useState("");
+
+    useEffect(() => {
+        if (open) {
+            setReason("");
+        }
+    }, [open]);
+
+    const handleSubmit = () => {
+        onSubmit(reason);
+        onClose();
+    };
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            fullWidth
+            maxWidth="sm"
+        >
+            <DialogTitle sx={{ background: "#f5fbff" }}>
+                <Box display="flex" alignItems="center" justifyContent="space-between">
+                    <span className="capitalize" style={{ textTransform: 'capitalize' }}>
+                        {actionType === 'block' ? 'Block Profile' : 'Report Profile'}
+                    </span>
+                    <IconButton onClick={onClose} aria-label="close">
+                        <X size={20} />
+                    </IconButton>
+                </Box>
+            </DialogTitle>
+
+            <DialogContent dividers>
+                <Box mt={1}>
+                    <TextField
+                        fullWidth
+                        multiline
+                        rows={4}
+                        variant="outlined"
+                        placeholder={`Enter your reason for ${actionType === 'block' ? 'blocking' : 'reporting'} this profile...`}
+                        value={reason}
+                        onChange={(e) => setReason(e.target.value)}
+                    />
+                </Box>
+            </DialogContent>
+            <DialogActions sx={{ p: 2, background: "#f5fbff" }}>
+                <Button onClick={onClose} color="inherit">
+                    Cancel
+                </Button>
+                <Button
+                    onClick={handleSubmit}
+                    variant="contained"
+                    disabled={!reason.trim()}
+                    sx={{
+                        bgcolor: actionType === 'block' ? '#d32f2f' : '#034E08',
+                        '&:hover': {
+                            bgcolor: actionType === 'block' ? '#b71c1c' : '#023806',
+                        }
+                    }}
+                >
+                    {actionType === 'block' ? 'Block' : 'Submit Report'}
+                </Button>
+            </DialogActions>
+        </Dialog>
+    );
+};
+
+export default ReportModel;