ui enhance
This commit is contained in:
meena committed
1 parent
d35bd08f5f
commit
05f30375d7
34 files changed
+1365
-406
No files matched your search
@@ -89,14 +89,14 @@ const HoroscopeGenerator = () => {
|
||||
<div className="min-h-screen bg-white">
|
||||
<div className="max-w-[1400px] mx-auto p-4">
|
||||
{/* Header */}
|
||||
<div className="text-center py-4 border-b">
|
||||
<h1 className="text-lg font-semibold text-gray-800">
|
||||
<div className="text-center py-4 ">
|
||||
<h1 className="text-[24px] font-semibold text-gray-800">
|
||||
Astrology / Horoscope
|
||||
</h1>
|
||||
</div>
|
||||
|
||||
{/* Date Input Section */}
|
||||
<div className="py-6 border-b">
|
||||
<div className="py-6 w-full max-w-[400px] mx-auto">
|
||||
<label className="block text-sm font-medium text-gray-700 mb-2">
|
||||
Birth Date
|
||||
</label>
|
||||
@@ -105,12 +105,12 @@ const HoroscopeGenerator = () => {
|
||||
type="date"
|
||||
value={dob}
|
||||
onChange={(e) => setDob(e.target.value)}
|
||||
className="w-full px-4 py-3 bg-gray-50 border border-gray-200 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
||||
className="w-full px-4 py-3 bg-gray-100 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 text-gray-800"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-4'>
|
||||
<div className='grid grid-cols-1 md:grid-cols-2 gap-6 w-full max-w-[950px] mx-auto'>
|
||||
|
||||
<div>
|
||||
|
||||
@@ -205,11 +205,11 @@ const HoroscopeGenerator = () => {
|
||||
|
||||
|
||||
{/* Working Hours Button */}
|
||||
<div className="pb-6">
|
||||
<div className="pb-6 flex justify-center w-full my-5">
|
||||
<button
|
||||
onClick={handleGenerate}
|
||||
disabled={!dob}
|
||||
className="w-full bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
|
||||
className="w-[fit-content] px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-gray-300 disabled:cursor-not-allowed text-white py-4 rounded-lg font-semibold text-base transition-colors shadow-md"
|
||||
>
|
||||
Working Hours
|
||||
</button>
|
||||
@@ -217,7 +217,7 @@ const HoroscopeGenerator = () => {
|
||||
|
||||
{/* Result Display */}
|
||||
{showHoroscope && userZodiacIndex >= 0 && (
|
||||
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg">
|
||||
<div className="mb-6 p-4 bg-blue-50 border-2 border-blue-200 rounded-lg w-full max-w-[300px] mx-auto">
|
||||
<div className="text-center">
|
||||
<div className="text-4xl mb-2">{zodiacSigns[userZodiacIndex].emoji}</div>
|
||||
<div className="text-lg font-bold text-gray-800">
|
||||
|
||||
+525
-95
@@ -1,11 +1,48 @@
|
||||
import * as React from "react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { Crown, Bookmark } from "lucide-react";
|
||||
import Box from "@mui/material/Box";
|
||||
import Tab from "@mui/material/Tab";
|
||||
import TabContext from "@mui/lab/TabContext";
|
||||
import TabList from "@mui/lab/TabList";
|
||||
import TabPanel from "@mui/lab/TabPanel";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import ChatBubbleOutlineIcon from '@mui/icons-material/ChatBubbleOutline';
|
||||
import MessageIcon from '@mui/icons-material/Message';
|
||||
import PhoneIcon from '@mui/icons-material/Phone';
|
||||
import { Button, Fab } from "@mui/material";
|
||||
import VisibilityIcon from '@mui/icons-material/Visibility';
|
||||
import GridViewIcon from '@mui/icons-material/GridView';
|
||||
|
||||
import BookmarkAddOutlinedIcon from "@mui/icons-material/BookmarkAddOutlined";
|
||||
import ShareOutlinedIcon from "@mui/icons-material/ShareOutlined";
|
||||
import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import BlockIcon from "@mui/icons-material/Block";
|
||||
import DeleteOutlineIcon from '@mui/icons-material/DeleteOutline';
|
||||
import { Modal, } from "@mui/material";
|
||||
import {
|
||||
Dialog,
|
||||
DialogActions,
|
||||
DialogContent,
|
||||
DialogContentText,
|
||||
DialogTitle
|
||||
} from "@mui/material";
|
||||
|
||||
import ArrowBackIosNewIcon from "@mui/icons-material/ArrowBackIosNew";
|
||||
import ReportModal from "../components/common/ReportModal";
|
||||
import ShareModal from "../components/common/ShareModal";
|
||||
import toast from "react-hot-toast";
|
||||
|
||||
import bride1 from "../assets/images/bride1.jpg";
|
||||
import bride2 from "../assets/images/bride2.jpg";
|
||||
import bride3 from "../assets/images/bride3.jpg";
|
||||
import bride4 from "../assets/images/bride4.jpg";
|
||||
|
||||
import groom1 from "../assets/images/groom1.jpg";
|
||||
import groom2 from "../assets/images/groom2.jpg";
|
||||
import groom3 from "../assets/images/groom3.jpg";
|
||||
import groom4 from "../assets/images/groom4.jpg";
|
||||
|
||||
|
||||
|
||||
// Icons as inline SVG components
|
||||
const CakeIcon = () => (
|
||||
@@ -39,32 +76,234 @@ const LocationIcon = () => (
|
||||
);
|
||||
|
||||
// Profile Card Component
|
||||
function ProfileCard({ profile,activeTab }) {
|
||||
function ProfileCard({ profile,activeTab ,handleDelete}) {
|
||||
const [isLiked, setIsLiked] = useState(false);
|
||||
const navigate = useNavigate();
|
||||
const [openMenu, setOpenMenu] = useState(false);
|
||||
const menuRef = useRef(null);
|
||||
const [openReport, setOpenReport] = useState(false);
|
||||
const [openShare, setOpenShare] = useState(false);
|
||||
const [openBlockConfirm, setOpenBlockConfirm] = useState(false);
|
||||
const baseUrl = window.location.origin;
|
||||
|
||||
const profileUrl = `${baseUrl}/profile-details/${profile.id}`;
|
||||
|
||||
|
||||
useEffect(() => {
|
||||
function handleClickOutside(event) {
|
||||
if (menuRef.current && !menuRef.current.contains(event.target)) {
|
||||
setOpenMenu(false);
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener("mousedown", handleClickOutside);
|
||||
return () => {
|
||||
document.removeEventListener("mousedown", handleClickOutside);
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
// NEW: Handle block confirmation
|
||||
const handleBlockConfirm = () => {
|
||||
setOpenBlockConfirm(false);
|
||||
setOpenMenu(false);
|
||||
toast.success("Profile blocked successfully!", { duration: 2000 });
|
||||
// Add your block API call here
|
||||
};
|
||||
|
||||
const renderMenu = () => {
|
||||
if (activeTab === "1") {
|
||||
return (
|
||||
<>
|
||||
<button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BookmarkAddOutlinedIcon className="w-4 h-4" />
|
||||
Shortlisted
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenReport(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ErrorOutlineIcon className="w-4 h-4" />
|
||||
Report
|
||||
</button>
|
||||
|
||||
<button onClick={() => {
|
||||
setOpenMenu(false);
|
||||
setOpenBlockConfirm(true);
|
||||
}} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BlockIcon className="w-4 h-4" />
|
||||
Block Profile
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (activeTab === "2") {
|
||||
return (
|
||||
<>
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share Profile
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDelete(profile.id)}
|
||||
className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<DeleteOutlineIcon className="w-4 h-4" />
|
||||
Delete
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
if (activeTab === "3") {
|
||||
return (
|
||||
<>
|
||||
<button className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BookmarkAddOutlinedIcon className="w-4 h-4" />
|
||||
Shortlisted
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenShare(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ShareOutlinedIcon className="w-4 h-4" />
|
||||
Share
|
||||
</button>
|
||||
|
||||
<button onClick={() => setOpenReport(true)} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<ErrorOutlineIcon className="w-4 h-4" />
|
||||
Report
|
||||
</button>
|
||||
|
||||
<button onClick={() => {
|
||||
setOpenMenu(false);
|
||||
setOpenBlockConfirm(true);
|
||||
}} className="flex items-center gap-2 w-full px-3 py-2 text-sm hover:bg-gray-100 rounded-lg transition">
|
||||
<BlockIcon className="w-4 h-4" />
|
||||
Block Profile
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
return null;
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className="w-full rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
|
||||
<>
|
||||
<ReportModal open={openReport} onClose={() => setOpenReport(false)} />
|
||||
<ShareModal
|
||||
open={openShare}
|
||||
onClose={() => setOpenShare(false)}
|
||||
url={profileUrl}
|
||||
/>
|
||||
|
||||
|
||||
{/* NEW: Block Confirmation Dialog */}
|
||||
<Dialog
|
||||
open={openBlockConfirm}
|
||||
onClose={() => setOpenBlockConfirm(false)}
|
||||
maxWidth="xs"
|
||||
fullWidth
|
||||
>
|
||||
<DialogTitle sx={{ fontWeight: 600, color: '#A70710' }}>
|
||||
<BlockIcon sx={{ fontSize: 24, mr: 1, verticalAlign: 'middle' }} />
|
||||
Block Profile
|
||||
</DialogTitle>
|
||||
<DialogContent>
|
||||
<DialogContentText sx={{ color: 'grey.700', lineHeight: 1.6 }}>
|
||||
Are you sure you want to block {profile.name}? This action cannot be undone and they will no longer be able to contact you.
|
||||
</DialogContentText>
|
||||
</DialogContent>
|
||||
<DialogActions sx={{ p: 2, pt: 0 }}>
|
||||
<Button
|
||||
onClick={() => setOpenBlockConfirm(false)}
|
||||
sx={{
|
||||
textTransform: 'none',
|
||||
borderRadius: '20px',
|
||||
color: 'grey.600'
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
onClick={handleBlockConfirm}
|
||||
variant="contained"
|
||||
sx={{
|
||||
backgroundColor: '#A70710',
|
||||
textTransform: 'none',
|
||||
borderRadius: '20px',
|
||||
fontWeight: 600,
|
||||
'&:hover': {
|
||||
backgroundColor: '#8e060d'
|
||||
}
|
||||
}}
|
||||
startIcon={<BlockIcon />}
|
||||
>
|
||||
Block
|
||||
</Button>
|
||||
</DialogActions>
|
||||
</Dialog>
|
||||
|
||||
|
||||
|
||||
<div
|
||||
onClick={() => navigate(`/profile-details/${profile.id}`)}
|
||||
className="w-full rounded-[10px] shadow-xl overflow-hidden border border-green-200">
|
||||
{/* Profile Image Section */}
|
||||
<div className="relative">
|
||||
{/* Premium Badge */}
|
||||
{profile.isPremium && (
|
||||
<div className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg">
|
||||
<div className="absolute top-4 left-4 z-10 bg-[#DF1D46] rounded-full p-2 shadow-lg">
|
||||
<Crown className="w-5 h-5 text-white" />
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Shortlist Button */}
|
||||
<button className="absolute top-4 right-4 z-10 bg-white rounded-full px-4 py-2 shadow-lg flex items-center space-x-2 hover:bg-gray-50 transition-colors">
|
||||
<Bookmark className="w-4 h-4" />
|
||||
<span className="text-[12px] font-medium">Shortlist</span>
|
||||
</button>
|
||||
{/* Shortlist / Options Button */}
|
||||
|
||||
|
||||
{activeTab !== "4" && (
|
||||
<div className="absolute top-4 right-4 z-20" ref={menuRef}>
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setOpenMenu(!openMenu);
|
||||
}}
|
||||
className="bg-white rounded-full w-8 h-8 flex items-center justify-center shadow-lg hover:bg-gray-50 transition"
|
||||
>
|
||||
<GridViewIcon className="w-4 h-4" />
|
||||
</button>
|
||||
|
||||
{/* Dropdown Menu */}
|
||||
{openMenu && (
|
||||
<div
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
className="absolute right-0 mt-1 w-40 bg-white rounded-xl shadow-[0_4px_20px_rgba(0,0,0,0.1)] border p-0 space-y-1"
|
||||
>
|
||||
|
||||
{renderMenu()}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
alt="Profile"
|
||||
className="w-full h-80 object-cover"
|
||||
className="w-full h-full object-cover"
|
||||
/>
|
||||
|
||||
</div>
|
||||
{/* White Gradient Overlay */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
@@ -75,7 +314,7 @@ function ProfileCard({ profile,activeTab }) {
|
||||
></div>
|
||||
|
||||
{/* Profile Info Overlay */}
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 text-gray-900">
|
||||
<div className="absolute bottom-0 left-0 right-0 p-6 pb-1 text-gray-900">
|
||||
<h1 className="text-[18px] text-green-900 font-bold mb-2">
|
||||
{profile.name}
|
||||
</h1>
|
||||
@@ -87,74 +326,142 @@ function ProfileCard({ profile,activeTab }) {
|
||||
|
||||
{/* Profile Details */}
|
||||
<div className="px-4 pt-2 pb-4 flex flex-col gap-2 bg-white">
|
||||
{(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.lastseen}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Age: {profile.age}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Height: {profile.height}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<GroupsIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.religion}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<SchoolIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
{profile.education}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center gap-2">
|
||||
<LocationIcon />
|
||||
<span className="text-[14px] font-semibold text-gray-900">
|
||||
<LocationIcon className="text-red-900" />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.location}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex gap-3 my-2 justify-between">
|
||||
|
||||
|
||||
{/* ❌ Cross button always visible */}
|
||||
<button className="w-[60px] h-[60px] bg-[#A70710] hover:bg-red-300 text-white font-semibold rounded-full shadow-md hover:shadow-lg transition-all duration-300 flex items-center justify-center transform hover:scale-90">
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
</button>
|
||||
{/* Action Buttons */}
|
||||
|
||||
{/* ❤️ Like Button → ONLY visible when tab = "2" (Sent Requests) */}
|
||||
{activeTab === "2" && (
|
||||
<button
|
||||
className="w-[60px] h-[60px] bg-[#034E08] hover:bg-green-600 text-white font-semibold rounded-full shadow-lg hover:shadow-xl transition-all duration-300 transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={() => setIsLiked(!isLiked)}
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5C2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3C19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444" />
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-7 h-7" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67 10.94 4.61a5.5 5.5 0 0 0-7.78 7.78L4.22 13.45 12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round" />
|
||||
</svg>
|
||||
)}
|
||||
</button>
|
||||
)}
|
||||
{(activeTab === "1" || activeTab === "2") && (
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
// your decline logic
|
||||
}}
|
||||
className="gap-1 px-2 w-[fit-content] bg-[#A70710] hover:bg-red-600 text-white
|
||||
font-600 text-[12px] py-2 rounded-[20px] shadow-md
|
||||
hover:shadow-lg transition-all duration-300
|
||||
flex items-center justify-center transform hover:scale-95">
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M18 6L6 18M6 6l12 12" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
Reject Request
|
||||
</button>
|
||||
|
||||
<button
|
||||
className="w-[fit-content] bg-[#034E08] hover:bg-green-700 text-white font-600 text-[12px]
|
||||
rounded-[20px] px-2 gap-2 py-1 shadow-lg hover:shadow-xl transition-all duration-300
|
||||
transform hover:scale-105 flex items-center justify-center"
|
||||
onClick={(e) =>{
|
||||
|
||||
</div>
|
||||
e.stopPropagation();
|
||||
setIsLiked(!isLiked);
|
||||
} }
|
||||
>
|
||||
{isLiked ? (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="currentColor">
|
||||
<path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" fill="#EF4444"/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
|
||||
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
</svg>
|
||||
)}
|
||||
|
||||
Accepted Request
|
||||
</button>
|
||||
</div>
|
||||
|
||||
)}
|
||||
|
||||
{activeTab === "3" && (
|
||||
|
||||
<>
|
||||
|
||||
<div className="flex gap-3 my-2 justify-between w-full px-[0px]">
|
||||
<div className="flex gap-2">
|
||||
|
||||
<Fab size="medium" color="primary" aria-label="add">
|
||||
<MessageIcon />
|
||||
</Fab>
|
||||
|
||||
<Fab size="medium" color="secondary" aria-label="add">
|
||||
<PhoneIcon />
|
||||
</Fab>
|
||||
|
||||
</div>
|
||||
|
||||
<Button variant="contained" color="#f5fbff" onClick={(e) =>{ e.stopPropagation();
|
||||
navigate(`/profile-details/${profile.id}`)}
|
||||
} sx={{color:"#000000", background:"#f5fbff",fontWeight:"600", borderRadius:"30px"}}>
|
||||
|
||||
View Details
|
||||
</Button>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
{activeTab === "4" && ( <>
|
||||
|
||||
<div className="flex items-center gap-1 flex-wrap">
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Received Interest 14 Nov 2025
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
Rejected 15 Nov 2025
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>)}
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
}
|
||||
|
||||
@@ -175,11 +482,11 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "PS2847593",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Brahmin",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MBA / Marketing Manager",
|
||||
location: "Mumbai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=600&h=800&fit=crop",
|
||||
bride1,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
@@ -188,11 +495,11 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "AR2847594",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Reddy",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "B.Tech / Software Engineer",
|
||||
location: "Hyderabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1438761681033-6461ffad8d80?w=600&h=800&fit=crop",
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
@@ -201,107 +508,222 @@ export default function InterestSendPage() {
|
||||
matrimonyId: "DP2847595",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Patel",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "CA / Chartered Accountant",
|
||||
location: "Ahmedabad",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1534528741775-53994a69daeb?w=600&h=800&fit=crop",
|
||||
bride3,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: "Divya Patel",
|
||||
matrimonyId: "DP2847595",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "CA / Chartered Accountant",
|
||||
location: "Ahmedabad",
|
||||
image:
|
||||
groom2,
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
sent: [
|
||||
{
|
||||
id: 4,
|
||||
id: 5,
|
||||
name: "Kavya Iyer",
|
||||
matrimonyId: "KI2847596",
|
||||
age: 22,
|
||||
height: "5.2",
|
||||
religion: "Hindu / Iyer",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "BCA / Data Analyst",
|
||||
location: "Chennai",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?w=600&h=800&fit=crop",
|
||||
bride4,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
id: 6,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
religion: "Hindu / Rajput",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1524504388940-b1c1722653e1?w=600&h=800&fit=crop",
|
||||
bride1,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
name: "Neha Singh",
|
||||
matrimonyId: "NS2847597",
|
||||
age: 26,
|
||||
height: "5.6",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "MD / Doctor",
|
||||
location: "Delhi",
|
||||
image:
|
||||
bride3,
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
accepted: [
|
||||
{
|
||||
id: 6,
|
||||
id: 9,
|
||||
name: "Shreya Nair",
|
||||
matrimonyId: "SN2847598",
|
||||
age: 24,
|
||||
height: "5.4",
|
||||
religion: "Hindu / Nair",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "B.Sc / Nurse",
|
||||
location: "Kochi",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1531123897727-8f129e1688ce?w=600&h=800&fit=crop",
|
||||
groom1,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
id: 10,
|
||||
name: "Meera Desai",
|
||||
matrimonyId: "MD2847599",
|
||||
age: 23,
|
||||
height: "5.3",
|
||||
religion: "Hindu / Desai",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "BBA / HR Manager",
|
||||
location: "Pune",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1517841905240-472988babdf9?w=600&h=800&fit=crop",
|
||||
groom2,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
id: 11,
|
||||
name: "Riya Kumar",
|
||||
matrimonyId: "RK2847600",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
religion: "Hindu / Kumar",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "M.Tech / Project Manager",
|
||||
location: "Bangalore",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1529626455594-4ff0802cfb7e?w=600&h=800&fit=crop",
|
||||
groom3,
|
||||
isPremium: true,
|
||||
},
|
||||
{
|
||||
id: 12,
|
||||
name: "Riya Kumar",
|
||||
matrimonyId: "RK2847600",
|
||||
age: 25,
|
||||
height: "5.5",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "M.Tech / Project Manager",
|
||||
location: "Bangalore",
|
||||
image:
|
||||
groom1,
|
||||
isPremium: true,
|
||||
},
|
||||
],
|
||||
rejected: [
|
||||
{
|
||||
id: 9,
|
||||
id: 13,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
religion: "Hindu / Joshi",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
"https://images.unsplash.com/photo-1487412720507-e7ab37603c6f?w=600&h=800&fit=crop",
|
||||
groom4,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 14,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
groom3,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 15,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
bride1,
|
||||
isPremium: false,
|
||||
},
|
||||
{
|
||||
id: 16,
|
||||
name: "Sanya Joshi",
|
||||
matrimonyId: "SJ2847601",
|
||||
age: 27,
|
||||
height: "5.7",
|
||||
lastseen: "Last seen 4 Nov 2025",
|
||||
education: "LLB / Lawyer",
|
||||
location: "Nagpur",
|
||||
image:
|
||||
bride2,
|
||||
isPremium: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
|
||||
// Step 1: Use state for profiles
|
||||
const [profiles, setProfiles] = useState({
|
||||
received: [...profilesData.received],
|
||||
sent: [...profilesData.sent],
|
||||
accepted: [...profilesData.accepted],
|
||||
rejected: [...profilesData.rejected],
|
||||
});
|
||||
|
||||
// Corrected handleDelete to update profiles state properly
|
||||
const handleDelete = (id) => {
|
||||
setProfiles((prev) => {
|
||||
const updated = { ...prev };
|
||||
Object.keys(updated).forEach((key) => {
|
||||
updated[key] = updated[key].filter((p) => p.id !== id);
|
||||
});
|
||||
return updated;
|
||||
});
|
||||
toast.success("Profile deleted successfully!", {
|
||||
duration: 2000,
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
return (
|
||||
<div className=" py-8 px-2">
|
||||
<div className="max-w-7xl mx-auto">
|
||||
<div className=" py-8 px-0">
|
||||
<div className="max-w-[1400px] mx-auto">
|
||||
{/* Header */}
|
||||
<div className="text-center mb-8">
|
||||
<h1 className="text-3xl md:text-4xl font-bold text-gray-800 mb-2">
|
||||
Interest Management
|
||||
Received Interest
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage your matrimony profile interests
|
||||
@@ -309,15 +731,20 @@ export default function InterestSendPage() {
|
||||
</div>
|
||||
|
||||
{/* MUI Tabs */}
|
||||
<Box sx={{ width: "100%", typography: "body1" }}>
|
||||
<Box sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}>
|
||||
<TabContext value={value}>
|
||||
<Box
|
||||
sx={{
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
margin: "0px auto",
|
||||
marginBottom:"40px",
|
||||
display:"flex",
|
||||
justifyContent:"center",
|
||||
background:"#f5fbff",
|
||||
borderRadius:"10px",
|
||||
padding:"20px 15px",
|
||||
}}
|
||||
>
|
||||
<TabList
|
||||
@@ -339,6 +766,8 @@ export default function InterestSendPage() {
|
||||
color: "white",
|
||||
margin: "0 6px",
|
||||
boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
|
||||
|
||||
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons:hover": {
|
||||
@@ -366,16 +795,17 @@ export default function InterestSendPage() {
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="Received Requests" value="1" />
|
||||
<Tab label="Sent Requests" value="2" />
|
||||
<Tab label="All " value="1" />
|
||||
<Tab label="Pending" value="2" />
|
||||
<Tab label="Accepted" value="3" />
|
||||
<Tab label="Rejected" value="4" />
|
||||
</TabList>
|
||||
</Box>
|
||||
|
||||
{/* Received Requests */}
|
||||
<TabPanel value="1" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
<TabPanel value="1" sx={{ padding: "10px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6
|
||||
w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.received.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
@@ -384,16 +814,16 @@ export default function InterestSendPage() {
|
||||
|
||||
{/* Sent Requests */}
|
||||
<TabPanel value="2" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.sent.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} handleDelete={handleDelete}/>
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Accepted */}
|
||||
<TabPanel value="3" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.accepted.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
@@ -402,7 +832,7 @@ export default function InterestSendPage() {
|
||||
|
||||
{/* Rejected */}
|
||||
<TabPanel value="4" sx={{ padding: "24px 0" }}>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 w-[100%] max-w-[1200px] mx-auto">
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 lg:grid-cols-4 gap-6 w-[100%] max-w-[1400px] mx-auto">
|
||||
{profilesData.rejected.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
|
||||
@@ -1,13 +1,16 @@
|
||||
import { useParams } from "react-router-dom";
|
||||
import MatrimonyProfile from "../components/profiledetail/MatrimonyProfile"
|
||||
import PartnerPreferences from "../components/profiledetail/PartnerPreferences"
|
||||
import MatchingList from "../components/profiledashboard/MatchingList";
|
||||
|
||||
const ProfileDetailPage = () => {
|
||||
const { id } = useParams();
|
||||
return (
|
||||
<>
|
||||
<div className="w-[100%] max-w-[1400px] mx-auto my-10">
|
||||
<MatrimonyProfile/>
|
||||
<PartnerPreferences/>
|
||||
|
||||
<MatchingList/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
|
||||
Reference in new issue
Block a user