From 28e40488b2b7b79938d4c45ddc3e4af32bdd0fc9 Mon Sep 17 00:00:00 2001
From: Devagn Maniya <99108074+devagn611@users.noreply.github.com>
Date: Thu, 17 Oct 2024 09:49:06 +0530
Subject: [PATCH] new_ui_change

---
 client/package-lock.json                     |  15 ++
 client/package.json                          |   1 +
 client/src/components/Dashboard/MyProfile.js | 196 ++++++++-------
 client/src/components/UI/AboutCard.js        | 111 +++++++++
 client/src/pages/UserProfile.js              | 237 +++++++++----------
 5 files changed, 353 insertions(+), 207 deletions(-)
 create mode 100644 client/src/components/UI/AboutCard.js

diff --git a/client/package-lock.json b/client/package-lock.json
index bfacabe..5e663e6 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -19,6 +19,7 @@
         "express": "^4.18.3",
         "html-to-text": "^9.0.5",
         "jodit-react": "^4.0.15",
+        "lucide-react": "^0.453.0",
         "react": "^18.2.0",
         "react-chartjs-2": "^5.2.0",
         "react-dom": "^18.2.0",
@@ -13513,6 +13514,14 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
@@ -29563,6 +29572,12 @@
         "yallist": "^3.0.2"
       }
     },
+    "lucide-react": {
+      "version": "0.453.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.453.0.tgz",
+      "integrity": "sha512-kL+RGZCcJi9BvJtzg2kshO192Ddy9hv3ij+cPrVPWSRzgCWCVazoQJxOjAwgK53NomL07HB7GPHW120FimjNhQ==",
+      "requires": {}
+    },
     "lz-string": {
       "version": "1.5.0",
       "resolved": "https://registry.npmjs.org/lz-string/-/lz-string-1.5.0.tgz",
diff --git a/client/package.json b/client/package.json
index 500d978..2c472bd 100644
--- a/client/package.json
+++ b/client/package.json
@@ -23,6 +23,7 @@
     "express": "^4.18.3",
     "html-to-text": "^9.0.5",
     "jodit-react": "^4.0.15",
+    "lucide-react": "^0.453.0",
     "react": "^18.2.0",
     "react-chartjs-2": "^5.2.0",
     "react-dom": "^18.2.0",
diff --git a/client/src/components/Dashboard/MyProfile.js b/client/src/components/Dashboard/MyProfile.js
index 9e314eb..461fdbb 100644
--- a/client/src/components/Dashboard/MyProfile.js
+++ b/client/src/components/Dashboard/MyProfile.js
@@ -7,6 +7,8 @@ import { ACCOUNT_TYPE } from "../../utils/constant";
 import { formattedDate } from "../../utils/formattedDate";
 import { fetchUserDetails } from "../../services/operations/settingsAPI";
 import { setLoading, setUserDetails } from "../../slices/profileSlice";
+import { MapPin, Clock, Award, Briefcase, Plus } from 'lucide-react';
+import AboutCard from "../../components/UI/AboutCard"
 import React from "react";
 export default function MyProfile() {
   // const { user, userDetails, loading, error } = useSelector((state) => ({
@@ -78,104 +80,130 @@ export default function MyProfile() {
   console.log("userDetails", userDetails);
 
   return (
-    <div className="">
-      <h1 className="mb-10 text-3xl font-medium text-black py-5  px-5">
-        My Profile
-      </h1>
-      <div className="flex items-center justify-between rounded-md border-[1px]  p-8 px-12">
-        <div className="flex items-center gap-x-4">
+    <div className="max-w-4xl mx-auto p-6">
+    {/* Header Section */}
+    <div className="bg-white rounded-lg shadow-sm mb-6">
+      <div className="p-6">
+        <div className="flex justify-between items-center mb-4">
+          <h1 className="text-3xl font-medium text-black">My Profile</h1>
+          <IconBtn
+            text="Edit Profile"
+            onclick={() => navigate("/dashboard/settings")}
+          >
+            <RiEditBoxLine />
+          </IconBtn>
+        </div>
+        
+        <div className="flex items-start gap-6">
           <img
             src={user?.additionalDetails?.profileImg}
             alt={`profile-${user?.firstName}`}
-            className="aspect-square w-[78px] rounded-full object-cover"
+            className="w-24 h-24 rounded-full object-cover"
           />
-          <div className="space-y-1">
-            <p className="text-lg font-semibold text-slate-800">
-              {user?.firstName + " " + user?.lastName}
-            </p>
-            <p className="text-sm text-slate-800">{user?.email}</p>
+          
+          <div className="flex-1">
+            <div className="space-y-2">
+              <p className="text-lg font-semibold text-slate-800">
+                {user?.firstName + " " + user?.lastName}
+              </p>
+              <p className="text-sm text-slate-800">{user?.email}</p>
+            </div>
+
+            <div className="flex gap-6 mt-4">
+              <div className="flex items-center gap-2">
+                <h2 className="font-medium">Follower</h2>
+                <p>{user?.followers?.length || 0}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <h2 className="font-medium">Following</h2>
+                <p>{user?.following?.length || 0}</p>
+              </div>
+              <div className="flex items-center gap-2">
+                <p>{user?.blogs?.length || 0}</p>
+                <h2 className="font-medium">Blogs</h2>
+              </div>
+            </div>
           </div>
-          <div className="flex flex-row gap-1 p-1">
-            <h2>Follower</h2>
-            <p>{user?.followers?.length}</p>
+        </div>
+      </div>
+
+      {/* Stats Section */}
+      <div className="flex justify-around border-t border-gray-200 p-4">
+        <div className="flex items-center gap-2">
+          <Clock className="w-5 h-5 text-gray-400" />
+          <div>
+            <div className="font-medium">3+ Years</div>
+            <div className="text-sm text-gray-500">Experience</div>
           </div>
-          <div className="flex flex-row gap-1 p-1">
-            {" "}
-            <h2> Following</h2>
-            <p>{user?.following?.length}</p>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Award className="w-5 h-5 text-gray-400" />
+          <div>
+            <div className="font-medium">5 Certificates</div>
+            <div className="text-sm text-gray-500">Achieved</div>
           </div>
-          <div className="flex flex-row gap-1 p-1">
-            <p>{user?.blogs?.length}</p>
-            <h2>Blogs</h2>
+        </div>
+        
+        <div className="flex items-center gap-2">
+          <Briefcase className="w-5 h-5 text-gray-400" />
+          <div>
+            <div className="font-medium">2 Internship</div>
+            <div className="text-sm text-gray-500">Completed</div>
           </div>
         </div>
       </div>
-      <div className="my-10 flex flex-col gap-y-10 rounded-md border-[1px] border-black-200 p-8 px-12">
-        <div className="flex w-full items-center justify-between">
-          <p className="text-lg font-semibold text-black">About</p>
+    </div>
 
-          <IconBtn
-            text="Edit"
-            onclick={() => {
-              navigate("/dashboard/settings");
-            }}
-          >
-            <RiEditBoxLine />
-          </IconBtn>
-        </div>
-        <p
-          className={`${
-            userDetails?.about ? "text-slate-600" : "text-slate-500"
-          } text-sm font-medium`}
+    {/* About Section */}
+    <AboutCard className="p-6 mb-6">
+      <div className="flex w-full items-center justify-between mb-4">
+        <p className="text-lg font-semibold text-black">About</p>
+        <IconBtn
+          text="Edit"
+          onclick={() => navigate("/dashboard/settings")}
         >
-          {userDetails?.about ?? "Write Something About Yourself"}
-        </p>
-        <div className="flex max-w-[500px] justify-between">
-          <div className="flex flex-col gap-y-5">
-            <div>
-              <p className="mb-2 text-sm text-slate-800">First Name</p>
-              <p className="text-sm font-medium text-slate-600">
-                {user?.firstName}
-              </p>
-            </div>
-            <div>
-              <p className="mb-2 text-sm text-slate-800">Email</p>
-              <p className="text-sm font-medium text-slate-600">
-                {user?.username}
-              </p>
-            </div>
-            <div>
-              <p className="mb-2 text-sm text-slate-800">Gender</p>
-              <p className="text-sm font-medium text-slate-600">
-                {userDetails?.gender ?? "Add Gender"}
-              </p>
-            </div>
-          </div>
-          <div className="flex flex-col gap-y-5">
-            <div>
-              <p className="mb-2 text-sm text-slate-800">Last Name</p>
-              <p className="text-sm font-medium text-slate-600">
-                {user?.lastName}
-              </p>
-            </div>
-            <div>
-              <p className="mb-2 text-sm text-slate-800">Phone Number</p>
-              <p className="text-sm font-medium text-slate-600">
-                {userDetails?.contactNo ?? "Add Contact Number"}
-              </p>
-            </div>
+          <RiEditBoxLine />
+        </IconBtn>
+      </div>
+      
+      <p className={`${userDetails?.about ? "text-slate-600" : "text-slate-500"} text-sm font-medium mb-6`}>
+        {userDetails?.about ?? "Write Something About Yourself"}
+      </p>
 
-            <div>
-              <p className="mb-2 text-sm font-semibold text-slate-800">
-                Date Of Birth
-              </p>
-              <p className="text-sm font-medium text-slate-600">
-                {formattedDate(userDetails?.DOB) ?? "Add Date Of Birth"}
-              </p>
-            </div>
-          </div>
+      <div className="grid grid-cols-2 gap-x-8 gap-y-4 max-w-[500px]">
+        <div>
+          <p className="mb-2 text-sm text-slate-800">First Name</p>
+          <p className="text-sm font-medium text-slate-600">{user?.firstName}</p>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-slate-800">Last Name</p>
+          <p className="text-sm font-medium text-slate-600">{user?.lastName}</p>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-slate-800">Email</p>
+          <p className="text-sm font-medium text-slate-600">{user?.username}</p>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-slate-800">Phone Number</p>
+          <p className="text-sm font-medium text-slate-600">
+            {userDetails?.contactNo ?? "Add Contact Number"}
+          </p>
+        </div>
+        <div>
+          <p className="mb-2 text-sm text-slate-800">Gender</p>
+          <p className="text-sm font-medium text-slate-600">
+            {userDetails?.gender ?? "Add Gender"}
+          </p>
+        </div>
+        <div>
+          <p className="mb-2 text-sm font-semibold text-slate-800">Date Of Birth</p>
+          <p className="text-sm font-medium text-slate-600">
+            {formattedDate(userDetails?.DOB) ?? "Add Date Of Birth"}
+          </p>
         </div>
       </div>
-    </div>
+    </AboutCard>
+  </div>
   );
 }
diff --git a/client/src/components/UI/AboutCard.js b/client/src/components/UI/AboutCard.js
new file mode 100644
index 0000000..69483a6
--- /dev/null
+++ b/client/src/components/UI/AboutCard.js
@@ -0,0 +1,111 @@
+import React from 'react';
+
+const Card = ({ 
+  children, 
+  className = "", 
+  title, 
+  subtitle,
+  icon,
+  rightElement,
+  dateRange,
+  location
+}) => {
+  return (
+    <div className={`bg-white rounded-lg border border-gray-200 shadow-sm ${className}`}>
+      {/* Card Header - Only rendered if title exists */}
+      {(title || rightElement) && (
+        <div className="flex justify-between items-center p-6 border-b border-gray-100">
+          <div className="flex items-center gap-4">
+            {/* Icon/Image Container */}
+            {icon && (
+              <div className="w-12 h-12 rounded-lg bg-pink-500 flex items-center justify-center">
+                {icon}
+              </div>
+            )}
+            
+            {/* Title Section */}
+            <div>
+              {title && <h3 className="text-lg font-semibold text-gray-900">{title}</h3>}
+              {subtitle && <p className="text-sm text-gray-500">{subtitle}</p>}
+            </div>
+          </div>
+
+          {/* Right Element (e.g., date, buttons) */}
+          {rightElement && (
+            <div className="text-right">
+              {dateRange && (
+                <div className="flex items-center gap-2 text-gray-500 text-sm">
+                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12 8v4l3 3" strokeLinecap="round" strokeLinejoin="round"/>
+                    <circle cx="12" cy="12" r="9"/>
+                  </svg>
+                  {dateRange}
+                </div>
+              )}
+              {location && (
+                <div className="flex items-center gap-2 text-gray-500 text-sm mt-1">
+                  <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                    <path d="M12 21s-8-4.5-8-11.8A8 8 0 0 1 12 2a8 8 0 0 1 8 7.2c0 7.3-8 11.8-8 11.8z" strokeLinecap="round" strokeLinejoin="round"/>
+                    <circle cx="12" cy="10" r="3"/>
+                  </svg>
+                  {location}
+                </div>
+              )}
+              {rightElement}
+            </div>
+          )}
+        </div>
+      )}
+
+      {/* Card Content */}
+      <div className="p-6">
+        {children}
+      </div>
+    </div>
+  );
+};
+
+// Usage Examples
+const ExampleUsage = () => {
+  return (
+    <div className="space-y-6">
+      {/* Basic Card */}
+      <Card>
+        <p>Simple card with just content</p>
+      </Card>
+
+      {/* Job Experience Card */}
+      <Card
+        title="Graphic Designer"
+        subtitle="Dribbble Inc"
+        icon={<div className="w-6 h-6 bg-white rounded-full" />}
+        dateRange="Feb 2016 - Dec 2017"
+        location="New York, USA"
+      >
+        <p className="text-gray-600">
+          There are many variations of passages of Lorem Ipsum available...
+        </p>
+      </Card>
+
+      {/* Profile Info Card */}
+      <Card
+        title="About"
+        rightElement={
+          <button className="flex items-center gap-2 text-blue-500">
+            <svg className="w-4 h-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+              <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" strokeLinecap="round" strokeLinejoin="round"/>
+              <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" strokeLinecap="round" strokeLinejoin="round"/>
+            </svg>
+            Edit
+          </button>
+        }
+      >
+        <p className="text-gray-600">
+          Profile content goes here...
+        </p>
+      </Card>
+    </div>
+  );
+};
+
+export default Card;
\ No newline at end of file
diff --git a/client/src/pages/UserProfile.js b/client/src/pages/UserProfile.js
index e3c6161..731ac90 100644
--- a/client/src/pages/UserProfile.js
+++ b/client/src/pages/UserProfile.js
@@ -22,6 +22,7 @@ import {
   removeModeratorAPI,
 } from "../services/operations/blogAPI";
 import { setUserDetails } from "../slices/profileSlice";
+import AboutCard from "../components/UI/AboutCard";
 function UserProfile() {
   const { username } = useParams();
   const { token } = useSelector((state) => state.auth);
@@ -123,140 +124,130 @@ function UserProfile() {
   console.log("user inside userprofile", user);
   console.log("userDetails which user login", userDetails);
   return (
-    <div>
-      <div>
-        <div className="container">
-          <div className="profile">
-            <div className="profile-image">
-              <img src={user?.additionalDetails?.profileImg} alt="" />
-            </div>
-            <div className="profile-user-settings p-2">
-              <h1 className="profile-user-name mb-2 text-sm font-serif ">
-                {user?.username}
-              </h1>
-              {isFollowing ? (
-                <button
-                  className="btn profile-edit-btn"
-                  onClick={unfollowhandler}
-                >
-                  Unfollow
-                  <FaUserMinus aria-hidden="true" />
-                </button>
-              ) : (
-                <button
-                  className="btn profile-edit-btn"
-                  onClick={followHandler}
-                >
-                  Follow
-                  <FaUserPlus aria-hidden="true" />
-                </button>
-              )}
-              <FaUserPlus aria-hidden="true" />
-              {userDetails?.data?.role === ACCOUNT_TYPE.ADMIN && (
-                <div>
-                  {/* Button for moderator */}
-                  {user?.isModerator ? (
-                    <button
-                      onClick={() => {
-                        removeModerator(user?.username);
-                      }} // Pass username as argument
-                      className="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
-                    >
-                      Remove Moderator
-                    </button>
-                  ) : (
-                    <button
-                      onClick={() => {
-                        addModerator(user?.username);
-                      }}
-                      className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
-                    >
-                      Add Moderator
-                    </button>
-                  )}
-                </div>
-              )}
-            </div>
+    <div className="max-w-6xl mx-auto px-4 py-8">
+    {/* Profile Header Card */}
+    <AboutCard className="mb-8">
+      <div className="p-6">
+        <div className="flex flex-col md:flex-row gap-8">
+          {/* Profile Image */}
+          <div className="flex-shrink-0">
+            <img 
+              src={user?.additionalDetails?.profileImg} 
+              alt={user?.username}
+              className="w-32 h-32 rounded-full object-cover border-2 border-gray-200"
+            />
+          </div>
 
-            <div className="profile-stats">
-              <ul>
-                <li>
-                  <span className="profile-stat-count">
-                    {user?.blogs?.length}
-                  </span>{" "}
-                  posts
-                </li>
+          {/* Profile Info */}
+          <div className="flex-grow">
+            <div className="flex justify-between items-start mb-4">
+              <div>
+                <h1 className="text-2xl font-semibold mb-1">{user?.username}</h1>
+                <p className="text-gray-600 uppercase">
+                  {user?.firstName} {user?.lastName}
+                </p>
+              </div>
 
-                <li>
-                  <span className="profile-stat-count">
-                    {user?.followers.length}
-                  </span>{" "}
-                  followers
-                </li>
-                <li>
-                  <span className="profile-stat-count">
-                    {user?.following?.length}
-                  </span>{" "}
-                  following
-                </li>
-              </ul>
+              {/* Action Buttons */}
+              <div className="flex gap-3">
+                {isFollowing ? (
+                  <button
+                    onClick={unfollowhandler}
+                    className="flex items-center gap-2 px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg transition"
+                  >
+                    <FaUserMinus />
+                    Unfollow
+                  </button>
+                ) : (
+                  <button
+                    onClick={followHandler}
+                    className="flex items-center gap-2 px-4 py-2 bg-blue-500 text-white hover:bg-blue-600 rounded-lg transition"
+                  >
+                    <FaUserPlus />
+                    Follow
+                  </button>
+                )}
+
+                {/* Admin Controls */}
+                {userDetails?.data?.role === ACCOUNT_TYPE.ADMIN && (
+                  <button
+                    onClick={() => user?.isModerator ? removeModerator(user?.username) : addModerator(user?.username)}
+                    className={`px-4 py-2 rounded-lg transition ${
+                      user?.isModerator 
+                        ? 'bg-red-500 hover:bg-red-600 text-white'
+                        : 'bg-blue-500 hover:bg-blue-600 text-white'
+                    }`}
+                  >
+                    {user?.isModerator ? 'Remove Moderator' : 'Add Moderator'}
+                  </button>
+                )}
+              </div>
             </div>
-            <div className="profile-bio">
-              <p>
-                <span className="profile-real-name uppercase">
-                  {user.firstName} {user.lastName}
-                </span>
-                {/* <li> */}
-                <span className="profile-stat-count flex flex-row gap-2">
-                  <FaCoins />
-                  {user?.contributions} contributions
-                </span>{" "}
-                {/* </li> */}
-                <span className="profile-stat-count flex flex-row gap-2">
-                  {user?.additionalDetails?.about}
-                </span>
-              </p>
+
+            {/* Stats */}
+            <div className="flex gap-8 mb-4">
+              <div className="text-center">
+                <span className="block text-xl font-bold">{user?.blogs?.length}</span>
+                <span className="text-gray-600">posts</span>
+              </div>
+              <div className="text-center">
+                <span className="block text-xl font-bold">{user?.followers?.length}</span>
+                <span className="text-gray-600">followers</span>
+              </div>
+              <div className="text-center">
+                <span className="block text-xl font-bold">{user?.following?.length}</span>
+                <span className="text-gray-600">following</span>
+              </div>
+            </div>
+
+            {/* Bio & Contributions */}
+            <div className="space-y-2">
+              <div className="flex items-center gap-2 text-gray-600">
+                <FaCoins className="text-yellow-500" />
+                <span>{user?.contributions} contributions</span>
+              </div>
+              <p className="text-gray-600">{user?.additionalDetails?.about}</p>
             </div>
           </div>
         </div>
       </div>
-      <div>
-        <div className=" container">
-          <div className="gallery">
-            {/* Render gallery items */}
-            {user?.blogs.map((item) => (
-              <Link to={`/blog/getBlogs/${item._id}`} key={item._id}>
-                <div className="gallery-item" tabIndex="0">
-                  <img src={item.coverImg} className="gallery-image" alt="" />
-                  <div className="gallery-item-info flex flex-col">
-                    <li className="gallery-item-likes mt-1">
-                      <span className="visually-hidden ">Likes:</span>
-                      <i className="fas fa-heart" aria-hidden="true"></i>{" "}
-                      {item?.title}
-                    </li>
-                    <ul>
-                      <li className="gallery-item-likes">
-                        <span className="visually-hidden font-extrabold text-black">
-                          Likes:
-                        </span>
-                        <FaHeart aria-hidden="true" /> {item?.upvotes.length}
-                      </li>
+    </AboutCard>
 
-                      <li className="gallery-item-comments">
-                        <span className="visually-hidden">Comments:</span>
-                        <FaComment aria-hidden="true" />
-                        {item?.comments.length}
-                      </li>
-                    </ul>
+    {/* Blog Gallery */}
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+      {user?.blogs.map((blog) => (
+        <Link 
+          to={`/blog/getBlogs/${blog._id}`} 
+          key={blog._id}
+          className="group"
+        >
+          <AboutCard className="overflow-hidden h-full hover:shadow-lg transition-shadow">
+            <div className="relative aspect-video">
+              <img 
+                src={blog.coverImg} 
+                alt={blog.title}
+                className="w-full h-full object-cover"
+              />
+              {/* Overlay */}
+              <div className="absolute inset-0 bg-black bg-opacity-50 opacity-0 group-hover:opacity-100 transition-opacity flex flex-col justify-end p-4 text-white">
+                <h3 className="font-semibold mb-2">{blog.title}</h3>
+                <div className="flex items-center gap-4">
+                  <div className="flex items-center gap-1">
+                    <FaHeart />
+                    <span>{blog.upvotes.length}</span>
+                  </div>
+                  <div className="flex items-center gap-1">
+                    <FaComment />
+                    <span>{blog.comments.length}</span>
                   </div>
                 </div>
-              </Link>
-            ))}
-          </div>
-          {/* <div className="loader"></div> */}
-        </div>
-      </div>
+              </div>
+            </div>
+          </AboutCard>
+        </Link>
+      ))}
     </div>
+  </div>
   );
 }