ui changes
This commit is contained in:
parent
517a4e4dd2
commit
b40e2fd035
35
package-lock.json
generated
35
package-lock.json
generated
@ -90,6 +90,7 @@
|
||||
"integrity": "sha512-e7jT4DxYvIDLk1ZHmU/m/mB19rex9sv0c2ftBtjSBv+kVM/902eh0fINUzD7UwLLNR+jU585GxUJ8/EBfAM5fw==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/code-frame": "^7.27.1",
|
||||
"@babel/generator": "^7.28.5",
|
||||
@ -450,6 +451,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
|
||||
"integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -493,6 +495,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
|
||||
"integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.18.3",
|
||||
"@emotion/babel-plugin": "^11.13.5",
|
||||
@ -1377,6 +1380,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.5.tgz",
|
||||
"integrity": "sha512-8VVxFmp1GIm9PpmnQoCoYo0UWHoOrdA57tDL62vkpzEgvb/d71Wsbv4FRg7r1Gyx7PuSo0tflH34cdl/NvfHNQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/core-downloads-tracker": "^7.3.5",
|
||||
@ -1510,6 +1514,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.5.tgz",
|
||||
"integrity": "sha512-yPaf5+gY3v80HNkJcPi6WT+r9ebeM4eJzrREXPxMt7pNTV/1eahyODO4fbH3Qvd8irNxDFYn5RQ3idHW55rA6g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.28.4",
|
||||
"@mui/private-theming": "^7.3.5",
|
||||
@ -2376,7 +2381,8 @@
|
||||
}
|
||||
],
|
||||
"hasInstallScript": true,
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/@tsparticles/interaction-external-attract": {
|
||||
"version": "3.9.1",
|
||||
@ -2994,6 +3000,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-19.2.4.tgz",
|
||||
"integrity": "sha512-tBFxBp9Nfyy5rsmefN+WXc1JeW/j2BpBHFdLZbEVfs9wn3E3NRFxwV0pJg8M1qQAexFpvz73hJXFofV0ZAu92A==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"csstype": "^3.0.2"
|
||||
}
|
||||
@ -3043,6 +3050,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@types/three/-/three-0.181.0.tgz",
|
||||
"integrity": "sha512-MLF1ks8yRM2k71D7RprFpDb9DOX0p22DbdPqT/uAkc6AtQXjxWCVDjCy23G9t1o8HcQPk7woD2NIyiaWcWPYmA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@dimforge/rapier3d-compat": "~0.12.0",
|
||||
"@tweenjs/tween.js": "~23.1.3",
|
||||
@ -3315,6 +3323,7 @@
|
||||
"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
|
||||
"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"bin": {
|
||||
"acorn": "bin/acorn"
|
||||
},
|
||||
@ -3591,6 +3600,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"baseline-browser-mapping": "^2.8.25",
|
||||
"caniuse-lite": "^1.0.30001754",
|
||||
@ -4010,7 +4020,8 @@
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/d3-array": {
|
||||
"version": "3.2.4",
|
||||
@ -4138,6 +4149,7 @@
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-4.1.0.tgz",
|
||||
"integrity": "sha512-Ukq0owbQXxa/U3EGtsdVBkR1w7KOQ5gIBqdH2hkvknzZPYvBxb/aa6E8L7tmjFtkwZBu3UXBbjIgPo/Ez4xaNg==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@ -4252,7 +4264,8 @@
|
||||
"version": "8.6.0",
|
||||
"resolved": "https://registry.npmjs.org/embla-carousel/-/embla-carousel-8.6.0.tgz",
|
||||
"integrity": "sha512-SjWyZBHJPbqxHOzckOfo8lHisEaJWmwd23XppYFYVh10bU66/Pn5tkVkbkCMZVdbUE5eTCI2nD8OyIP4Z+uwkA==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/embla-carousel-react": {
|
||||
"version": "8.6.0",
|
||||
@ -4429,6 +4442,7 @@
|
||||
"integrity": "sha512-BhHmn2yNOFA9H9JmmIVKJmd288g9hrVRDkdoIgRCRuSySRUHH7r/DI6aAXW9T1WwUuY3DFgrcaqB+deURBLR5g==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@eslint-community/eslint-utils": "^4.8.0",
|
||||
"@eslint-community/regexpp": "^4.12.1",
|
||||
@ -6060,6 +6074,7 @@
|
||||
"resolved": "https://registry.npmjs.org/@react-three/fiber/-/fiber-8.18.0.tgz",
|
||||
"integrity": "sha512-FYZZqD0UUHUswKz3LQl2Z7H24AhD14XGTsIRw3SJaXUxyfVMi+1yiZGmqTcPt/CkPpdU7rrxqcyQ1zJE5DjvIQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@babel/runtime": "^7.17.8",
|
||||
"@types/react-reconciler": "^0.26.7",
|
||||
@ -6142,6 +6157,7 @@
|
||||
"resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz",
|
||||
"integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/kossnocorp"
|
||||
@ -6737,6 +6753,7 @@
|
||||
"resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.3.tgz",
|
||||
"integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=12"
|
||||
},
|
||||
@ -6845,6 +6862,7 @@
|
||||
}
|
||||
],
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"nanoid": "^3.3.11",
|
||||
"picocolors": "^1.1.1",
|
||||
@ -7097,6 +7115,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react/-/react-19.2.0.tgz",
|
||||
"integrity": "sha512-tmbWg6W31tQLeB5cdIBOicJDJRR2KzXsV7uSK9iNfLWQ5bIZfxuPEHp7M8wiHyHnn0DD1i7w3Zmin0FtkrwoCQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
@ -7106,6 +7125,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.0.tgz",
|
||||
"integrity": "sha512-UlbRu4cAiGaIewkPyiRGJk0imDN2T3JjieT6spoL2UeSf5od4n5LB/mQ4ejmxhCFT1tYe8IvaFulzynWovsEFQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"scheduler": "^0.27.0"
|
||||
},
|
||||
@ -7203,6 +7223,7 @@
|
||||
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-9.2.0.tgz",
|
||||
"integrity": "sha512-ROY9fvHhwOD9ySfrF0wmvu//bKCQ6AeZZq1nJNtbDC+kk5DuSuNX/n6YWYF/SYy7bSba4D4FSz8DJeKY/S/r+g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@types/use-sync-external-store": "^0.0.6",
|
||||
"use-sync-external-store": "^1.4.0"
|
||||
@ -7429,7 +7450,8 @@
|
||||
"version": "5.0.1",
|
||||
"resolved": "https://registry.npmjs.org/redux/-/redux-5.0.1.tgz",
|
||||
"integrity": "sha512-M9/ELqF6fy8FwmkpnF0S3YKOqMyoWJ4+CS5Efg2ct3oY9daQvd/Pc71FpGZsVsbl3Cpb+IIcjBDUnnyBdQbq4w==",
|
||||
"license": "MIT"
|
||||
"license": "MIT",
|
||||
"peer": true
|
||||
},
|
||||
"node_modules/redux-thunk": {
|
||||
"version": "3.1.0",
|
||||
@ -7659,6 +7681,7 @@
|
||||
"resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
|
||||
"integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"fast-deep-equal": "^3.1.3",
|
||||
"fast-uri": "^3.0.1",
|
||||
@ -7858,6 +7881,7 @@
|
||||
"resolved": "https://registry.npmjs.org/styled-components/-/styled-components-6.1.19.tgz",
|
||||
"integrity": "sha512-1v/e3Dl1BknC37cXMhwGomhO8AkYmN41CqyX9xhUDxry1ns3BFQy2lLDRQXJRdVVWB9OHemv/53xaStimvWyuA==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@emotion/is-prop-valid": "1.2.2",
|
||||
"@emotion/unitless": "0.8.1",
|
||||
@ -8400,6 +8424,7 @@
|
||||
"resolved": "https://registry.npmjs.org/vite/-/vite-7.2.2.tgz",
|
||||
"integrity": "sha512-BxAKBWmIbrDgrokdGZH1IgkIk/5mMHDreLDmCJ0qpyJaAteP8NvMhkwr/ZCQNqNH97bw/dANTE9PDzqwJghfMQ==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"esbuild": "^0.25.0",
|
||||
"fdir": "^6.5.0",
|
||||
@ -8552,6 +8577,7 @@
|
||||
"resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.10.0.tgz",
|
||||
"integrity": "sha512-NLhDfH/h4O6UOy+0LSso42xvYypClINuMNBVVzX4vX98TmTaTUxwRbXdhucbFMd2qLaCTcLq/PdYrvi8onw90w==",
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"dependencies": {
|
||||
"@discoveryjs/json-ext": "^0.5.0",
|
||||
"@webpack-cli/configtest": "^1.2.0",
|
||||
@ -8714,6 +8740,7 @@
|
||||
"integrity": "sha512-JInaHOamG8pt5+Ey8kGmdcAcg3OL9reK8ltczgHTAwNhMys/6ThXHityHxVV2p3fkw/c+MAvBHFVYHFZDmjMCQ==",
|
||||
"dev": true,
|
||||
"license": "MIT",
|
||||
"peer": true,
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/colinhacks"
|
||||
}
|
||||
|
||||
@ -24,3 +24,9 @@ button{
|
||||
inset: 0;
|
||||
background: rgba(255, 255, 255, 0.7); /* white overlay */
|
||||
}
|
||||
.profile-img-box {
|
||||
background-image: url("./assets/images/frame1.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: cover;
|
||||
}
|
||||
BIN
src/assets/images/frame1.jpg
Normal file
BIN
src/assets/images/frame1.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 MiB |
@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard } from "lucide-react";
|
||||
import { Crown, Bookmark, CurrencyIcon, Currency, Wallet, Receipt, Sparkles, MoonStar, IdCard, RockingChair, LocateFixed, School, WorkflowIcon } from "lucide-react";
|
||||
import CakeIcon from "@mui/icons-material/Cake";
|
||||
import GroupsIcon from "@mui/icons-material/Groups";
|
||||
import SchoolIcon from "@mui/icons-material/School";
|
||||
@ -40,7 +40,7 @@ function ProfileCard({ profile }) {
|
||||
initial={{ scale: 0 }}
|
||||
animate={{ scale: 1 }}
|
||||
transition={{ delay: 0.2, type: "spring" }}
|
||||
className="absolute top-4 left-4 z-10 bg-orange-500 rounded-full p-2 shadow-lg"
|
||||
className="absolute top-4 left-4 z-10 bg-red-900 rounded-full p-2 shadow-lg"
|
||||
>
|
||||
<Crown className="w-5 h-5 text-white" />
|
||||
</motion.div>
|
||||
@ -254,6 +254,34 @@ export default function MatchesInterface() {
|
||||
description: "Matches you have viewed",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "newly-joined",
|
||||
icon: <RockingChair className="w-6 h-6" />,
|
||||
title: "Newly Joined",
|
||||
description: "Matches who Joined within the last 30 days",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "location",
|
||||
icon: <LocateFixed className="w-6 h-6" />,
|
||||
title: "Location matches",
|
||||
description: "Matches near your location",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "education",
|
||||
icon: <School className="w-6 h-6" />,
|
||||
title: "Education matches",
|
||||
description: "Matches near your education match",
|
||||
category: "Based on activity",
|
||||
},
|
||||
{
|
||||
id: "job",
|
||||
icon: <WorkflowIcon className="w-6 h-6" />,
|
||||
title: "Job matches",
|
||||
description: "Matches near your job",
|
||||
category: "Based on activity",
|
||||
},
|
||||
];
|
||||
|
||||
const profiles = [
|
||||
|
||||
@ -18,8 +18,10 @@ import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
import "swiper/css/pagination";
|
||||
import "swiper/css/thumbs";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
|
||||
const MatrimonyProfile = () => {
|
||||
const navigate = useNavigate();
|
||||
const [isModalOpen, setIsModalOpen] = useState(false);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [thumbsSwiper, setThumbsSwiper] = useState(null);
|
||||
@ -206,8 +208,13 @@ const MatrimonyProfile = () => {
|
||||
|
||||
{/* Action Buttons */}
|
||||
<div className="flex justify-start gap-3">
|
||||
<button className="w-[fit-content] border-2 border-gray-300 text-gray-700 py-2 px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
|
||||
<button
|
||||
// onClick={()=>{
|
||||
// navigate("/chat")
|
||||
// }}
|
||||
className="w-[fit-content] border-2 border-gray-300 text-gray-700 py-2 px-6 rounded-full hover:bg-gray-50 transition-colors flex items-center justify-center gap-2 text-sm">
|
||||
<X className="w-5 h-5" /> Don't Show
|
||||
{/* Message */}
|
||||
</button>
|
||||
{/* <button className="w-[fit-content] border-2 border-orange-500 text-[#034E08] py-2 px-6 rounded-full hover:bg-orange-50 transition-colors flex items-center justify-center gap-2 text-sm">
|
||||
<SkipForward className="w-5 h-5" /> Skip
|
||||
@ -438,7 +445,8 @@ const MatrimonyProfile = () => {
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Date Of Birth</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<span className="ml-3 text-gray-900"> 23-12-1991</span>
|
||||
{/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -452,12 +460,13 @@ const MatrimonyProfile = () => {
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Star</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<span className="ml-3 text-gray-900">Piscus</span>
|
||||
{/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -471,12 +480,13 @@ const MatrimonyProfile = () => {
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Rassi</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<span className="ml-3 text-gray-900"> Revathy</span>
|
||||
{/* <button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
<svg
|
||||
className="w-3 h-3"
|
||||
fill="currentColor"
|
||||
@ -490,9 +500,9 @@ const MatrimonyProfile = () => {
|
||||
/>
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</button> */}
|
||||
</div>
|
||||
<div className="flex items-center">
|
||||
{/* <div className="flex items-center">
|
||||
<span className="text-gray-600 w-40">Horoscope</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
<button className="ml-3 text-[#034E08] hover:text-orange-700 flex items-center gap-1 text-xs font-medium">
|
||||
@ -510,7 +520,7 @@ const MatrimonyProfile = () => {
|
||||
</svg>
|
||||
Upgrade to view
|
||||
</button>
|
||||
</div>
|
||||
</div> */}
|
||||
<div className="flex">
|
||||
<span className="text-gray-600 w-40">Employment</span>
|
||||
<span className="text-gray-400">:</span>
|
||||
|
||||
@ -525,7 +525,7 @@ const FilterForm = () => {
|
||||
</Select>
|
||||
</FormControl>
|
||||
|
||||
<FormControl fullWidth>
|
||||
{/* <FormControl fullWidth>
|
||||
<InputLabel>Smoking Habits</InputLabel>
|
||||
<Select
|
||||
value={filters.smokingHabits}
|
||||
@ -559,7 +559,7 @@ const FilterForm = () => {
|
||||
<MenuItem value="Non-Drinker">Non-Drinker</MenuItem>
|
||||
<MenuItem value="Social Drinker">Social Drinker</MenuItem>
|
||||
</Select>
|
||||
</FormControl>
|
||||
</FormControl> */}
|
||||
</div>
|
||||
</AccordionDetails>
|
||||
</Accordion>
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Search, MoreVertical, Send, Phone, Video, Check, CheckCheck, ArrowLeft, Star, Share2, Flag, Ban, Trash2 } from 'lucide-react';
|
||||
import ReportModal from '../components/common/ReportModal';
|
||||
|
||||
const ChatUI = () => {
|
||||
const [selectedChat, setSelectedChat] = useState(null);
|
||||
@ -8,6 +9,7 @@ const ChatUI = () => {
|
||||
const [showCallHistory, setShowCallHistory] = useState(false);
|
||||
const [showMenu, setShowMenu] = useState(false);
|
||||
const [showChatMenu, setShowChatMenu] = useState(false);
|
||||
const [openReport, setOpenReport] = useState(false);
|
||||
|
||||
const contacts = [
|
||||
{
|
||||
@ -263,6 +265,12 @@ const ChatUI = () => {
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
<>
|
||||
|
||||
|
||||
<ReportModal open={openReport} onClose={() => setOpenReport(false)} />
|
||||
|
||||
<div className="w-full max-w-[1400px] mx-auto flex h-screen gap-[20px] bg-gray-50">
|
||||
{/* Sidebar - Chat List */}
|
||||
<div className={`w-full md:w-96 bg-white border border-1 border-gray-200 rounded-[10px] flex flex-col ${
|
||||
@ -450,9 +458,9 @@ const ChatUI = () => {
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<button className="p-2 hover:bg-gray-100 rounded">
|
||||
{/* <button className="p-2 hover:bg-gray-100 rounded">
|
||||
<Phone className="w-5 h-5 text-blue-600" />
|
||||
</button>
|
||||
</button> */}
|
||||
<div className="relative">
|
||||
<button
|
||||
onClick={() => setShowChatMenu(!showChatMenu)}
|
||||
@ -471,7 +479,7 @@ const ChatUI = () => {
|
||||
<Share2 className="w-4 h-4" />
|
||||
<span className="text-sm">Share</span>
|
||||
</button>
|
||||
<button className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
|
||||
<button onClick={() => setOpenReport(true)} className="w-full px-4 py-3 text-left hover:bg-gray-50 flex items-center gap-3 border-b border-gray-100">
|
||||
<Flag className="w-4 h-4" />
|
||||
<span className="text-sm">Report</span>
|
||||
</button>
|
||||
@ -571,6 +579,8 @@ const ChatUI = () => {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
|
||||
);
|
||||
};
|
||||
|
||||
|
||||
@ -41,8 +41,8 @@ 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";
|
||||
|
||||
|
||||
import frame from "../assets/images/frame1.jpg"
|
||||
import "../styles/addon.css"
|
||||
|
||||
// Icons as inline SVG components
|
||||
const CakeIcon = () => (
|
||||
@ -296,7 +296,18 @@ const renderMenu = () => {
|
||||
|
||||
|
||||
|
||||
<div classname=" bg-gray-200 overflow-hidden w-full max-w-sm h-[300px]" style={{height:"300px"}}>
|
||||
<div
|
||||
classname="profile-img-box overflow-hidden w-full max-w-sm h-[300px]"
|
||||
style={{height:"300px",
|
||||
backgroundImage:`url(${frame})`,
|
||||
backgroundRepeat:"no-repeat",
|
||||
backgroundPosition:"center",
|
||||
backgroundSize:"cover",
|
||||
|
||||
|
||||
|
||||
|
||||
}}>
|
||||
|
||||
<img
|
||||
src={profile.image}
|
||||
@ -306,7 +317,7 @@ const renderMenu = () => {
|
||||
</div>
|
||||
{/* White Gradient Overlay */}
|
||||
<div
|
||||
className="absolute bottom-0 left-0 right-0 h-35 pointer-events-none"
|
||||
className="absolute bottom-0 left-0 right-0 h-25 pointer-events-none"
|
||||
style={{
|
||||
background:
|
||||
"linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 40%, rgb(255, 255, 255) 100%)",
|
||||
@ -319,7 +330,7 @@ const renderMenu = () => {
|
||||
{profile.name}
|
||||
</h1>
|
||||
<p className="text-[14px] text-gray-700 leading-relaxed">
|
||||
Matrimony ID: {profile.matrimonyId}
|
||||
ID: {profile.matrimonyId}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
@ -329,7 +340,7 @@ const renderMenu = () => {
|
||||
{(activeTab === "1" || activeTab === "2" || activeTab === "3") && (
|
||||
<>
|
||||
<div className="flex items-center gap-2">
|
||||
<VisibilityIcon />
|
||||
<VisibilityIcon sx={{color:"#787777ff", fontSize:"18px"}} />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.lastseen}
|
||||
</span>
|
||||
@ -340,13 +351,13 @@ const renderMenu = () => {
|
||||
|
||||
<div className="flex items-center gap-4">
|
||||
<div className="flex items-center gap-2">
|
||||
<CakeIcon />
|
||||
<CakeIcon sx={{color:"#787777ff", fontSize:"18px"}} />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.age} yr
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<AccessibilityIcon />
|
||||
<AccessibilityIcon sx={{color:"#787777ff", fontSize:"18px"}} />
|
||||
<span className="text-[14px] text-gray-900">
|
||||
{profile.height} cm
|
||||
</span>
|
||||
@ -490,6 +501,19 @@ View Details
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
{`
|
||||
.profile-img-box {
|
||||
background-image: url("../assets/images/frame1.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
padding: 20px;
|
||||
}
|
||||
`}
|
||||
</style>
|
||||
|
||||
|
||||
</>
|
||||
|
||||
);
|
||||
@ -497,12 +521,14 @@ View Details
|
||||
|
||||
// Main Component
|
||||
export default function InterestSendPage() {
|
||||
const [value, setValue] = useState("1");
|
||||
const [value, setValue] = useState("2");
|
||||
|
||||
const handleChange = (event, newValue) => {
|
||||
setValue(newValue);
|
||||
};
|
||||
|
||||
const [intreasteactiveTab, setIntreasteactiveTab] = useState("receivedintreaste");
|
||||
|
||||
// Sample data for different categories
|
||||
const profilesData = {
|
||||
received: [
|
||||
@ -751,17 +777,42 @@ const [profiles, setProfiles] = useState({
|
||||
<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">
|
||||
|
||||
<div className="flex justify-center mb-8 items-center gap-4">
|
||||
<div className={`cursor-pointer text-center bg-green-50 p-4 rounded-[10px] mb-8 ${
|
||||
intreasteactiveTab === "receivedintreaste"
|
||||
? "border-1 border-green-600 text-green-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`}
|
||||
onClick={() => setIntreasteactiveTab("receivedintreaste")}>
|
||||
<h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
|
||||
Received Interest
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage your matrimony profile interests
|
||||
</p>
|
||||
</div>
|
||||
<div className={`cursor-pointer text-center mb-8 bg-green-50 p-4 rounded-[10px] ${
|
||||
intreasteactiveTab === "sendintreaste"
|
||||
? "border-1 border-green-600 text-green-600"
|
||||
: "text-gray-500 hover:text-gray-700"
|
||||
}`} onClick={() => setIntreasteactiveTab("sendintreaste")}>
|
||||
<h1 className="text-xl md:text-xl font-bold text-gray-800 mb-2">
|
||||
Send Interest
|
||||
</h1>
|
||||
<p className="text-gray-600">
|
||||
Manage your matrimony profile interests
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
{intreasteactiveTab === "receivedintreaste" && (
|
||||
|
||||
<>
|
||||
|
||||
{/* MUI Tabs */}
|
||||
<Box sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}>
|
||||
<Box
|
||||
sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
|
||||
>
|
||||
<TabContext value={value}>
|
||||
<Box
|
||||
sx={{
|
||||
@ -825,7 +876,7 @@ const [profiles, setProfiles] = useState({
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab label="All " value="1" />
|
||||
{/* <Tab label="All " value="1" /> */}
|
||||
<Tab label="Pending" value="2" />
|
||||
<Tab label="Accepted" value="3" />
|
||||
<Tab label="Rejected" value="4" />
|
||||
@ -870,6 +921,137 @@ const [profiles, setProfiles] = useState({
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
</Box>
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
|
||||
{intreasteactiveTab === "sendintreaste" && (
|
||||
|
||||
<>
|
||||
|
||||
{/* MUI Tabs */}
|
||||
<Box
|
||||
sx={{ width: "100%", maxWidth:"1400px", typography: "body1" }}
|
||||
>
|
||||
<TabContext value={value}>
|
||||
<Box
|
||||
sx={{
|
||||
|
||||
width: "100%",
|
||||
maxWidth: "800px",
|
||||
margin: "0px auto",
|
||||
marginBottom:"40px",
|
||||
display:"flex",
|
||||
justifyContent:"center",
|
||||
background:"#f5fbff",
|
||||
borderRadius:"10px",
|
||||
padding:"20px 15px",
|
||||
}}
|
||||
>
|
||||
<TabList
|
||||
onChange={handleChange}
|
||||
aria-label="interest management tabs"
|
||||
variant="scrollable"
|
||||
// scrollButtons="auto"
|
||||
scrollButtons="on"
|
||||
allowScrollButtonsMobile
|
||||
sx={{
|
||||
"& .MuiTabs-scrollButtons": {
|
||||
display: "flex !important", // force visible
|
||||
alignItems: "center",
|
||||
justifyContent: "center",
|
||||
width: "36px",
|
||||
height: "36px",
|
||||
borderRadius: "50%",
|
||||
backgroundColor: "#034E08",
|
||||
color: "white",
|
||||
margin: "0 6px",
|
||||
boxShadow: "0 2px 5px rgba(0,0,0,0.2)",
|
||||
|
||||
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons:hover": {
|
||||
backgroundColor: "#046b0b",
|
||||
},
|
||||
|
||||
"& .MuiTabs-scrollButtons.Mui-disabled": {
|
||||
opacity: 0.4,
|
||||
backgroundColor: "#9bcf9d",
|
||||
},
|
||||
|
||||
"& .MuiTab-root": {
|
||||
fontSize: { xs: "14px", sm: "16px" },
|
||||
fontWeight: 600,
|
||||
textTransform: "none",
|
||||
minWidth: { xs: 120, sm: 150 },
|
||||
color: "#666",
|
||||
},
|
||||
"& .Mui-selected": {
|
||||
color: "#034E08 !important",
|
||||
},
|
||||
"& .MuiTabs-indicator": {
|
||||
backgroundColor: "#034E08",
|
||||
height: 3,
|
||||
},
|
||||
}}
|
||||
>
|
||||
{/* <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: "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} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Sent Requests */}
|
||||
<TabPanel value="2" sx={{ padding: "24px 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.sent.map((profile) => (
|
||||
<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-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} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
|
||||
{/* Rejected */}
|
||||
<TabPanel value="4" sx={{ padding: "24px 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.rejected.map((profile) => (
|
||||
<ProfileCard key={profile.id} profile={profile} activeTab={value} />
|
||||
))}
|
||||
</div>
|
||||
</TabPanel>
|
||||
</TabContext>
|
||||
</Box>
|
||||
|
||||
|
||||
</>
|
||||
)}
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
7
src/styles/addon.css
Normal file
7
src/styles/addon.css
Normal file
@ -0,0 +1,7 @@
|
||||
.profile-img-box {
|
||||
background-image: url("/assets/images/frame1.jpg");
|
||||
background-repeat: no-repeat;
|
||||
background-position: center;
|
||||
background-size: contain;
|
||||
padding: 20px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user