From c5a4699450063441124e5f81ba6bb36b4f10466a Mon Sep 17 00:00:00 2001
From: Aditya Yadav <adityabarotha007@gmail.com>
Date: Tue, 15 Oct 2024 22:27:29 +0530
Subject: [PATCH] Created a doctors Profile Page

---
 Frontend/src/App.jsx                      | 18 +++++++++++++
 Frontend/src/components/DoctorProfile.jsx | 32 +++++++++++++++++++++++
 Frontend/src/components/Doctors.jsx       | 20 +++++++-------
 3 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 Frontend/src/components/DoctorProfile.jsx

diff --git a/Frontend/src/App.jsx b/Frontend/src/App.jsx
index 059a4db..9e82c38 100644
--- a/Frontend/src/App.jsx
+++ b/Frontend/src/App.jsx
@@ -7,8 +7,18 @@ import Patients from './components/Patients';
 import Doctors from './components/Doctors';
 import Admin from './components/Admin';
 import Footer from './components/Footer';
+import DoctorProfile from './components/DoctorProfile'
 
 function App() {
+
+  const doctor = {
+    name: "Dr. Smith",
+    specialization: "Cardiologist",
+    experience: 15,
+    degrees: ["MBBS", "MD Cardiology", "PhD in Cardiovascular Medicine"],
+    bio: "Dr. Smith is a renowned cardiologist with over 15 years of experience. He specializes in diagnosing and treating heart-related ailments and has been recognized for his contributions to the field of cardiovascular medicine.",
+    image: "https://imgs.search.brave.com/M0rIpTEVNJIFqzat4f5ZKBrLIZ69zwSoLsL3LhSeVQg/rs:fit:500:0:0:0/g:ce/aHR0cHM6Ly9pbWcu/ZnJlZXBpay5jb20v/cHJlbWl1bS1waG90/by9tYWxlLWRvY3Rv/ci1jYXJ0b29uLWlt/YWdlLWlzb2xhdGVk/LXdoaXRlXzc3Njg5/NC0xMTY1MzMuanBn/P3NpemU9NjI2JmV4/dD1qcGc", // Replace with actual image URL
+  };
   return (
     <Router>
       <div className="bg-gray-100 min-h-screen font-sans">
@@ -17,6 +27,14 @@ function App() {
           <Routes>
             <Route path="/" element={<Home />} />
             <Route path="/appointments" element={<Appointments />} />
+            <Route path="/profile" element={<DoctorProfile
+                          name={doctor.name}
+                          specialization={doctor.specialization}
+                          experience={doctor.experience}
+                          degrees={doctor.degrees}
+                          bio={doctor.bio}
+                          image={doctor.image}
+            />} />
             <Route path="/patients" element={<Patients />} />
             <Route path="/doctors" element={<Doctors />} />
             <Route path="/admin" element={<Admin />} />
diff --git a/Frontend/src/components/DoctorProfile.jsx b/Frontend/src/components/DoctorProfile.jsx
new file mode 100644
index 0000000..5d69749
--- /dev/null
+++ b/Frontend/src/components/DoctorProfile.jsx
@@ -0,0 +1,32 @@
+import React from "react";
+
+const DoctorProfile = ({ name, specialization, experience, degrees, bio, image }) => {
+  return (
+    <div className="flex flex-col items-center bg-gray-50 py-8 px-6 rounded-lg shadow-md max-w-md mx-auto mt-10">
+      
+      {/* Doctor's Image */}
+      <img
+        className="w-40 h-40 object-cover rounded-full mb-4"
+        src={image}
+        alt={`Dr. ${name}`}
+      />
+      {/* Doctor's Name */}
+      <h1 className="text-3xl font-semibold text-gray-800 mb-2">Dr. {name}</h1>
+      {/* Doctor's Specialization */}
+      <p className="text-xl text-gray-600 mb-4">{specialization}</p>
+      {/* Experience */}
+      <p className="text-lg text-gray-500 mb-2">Experience: {experience} years</p>
+      {/* Degrees */}
+      <h2 className="text-lg font-semibold text-gray-700 mb-2">Degrees:</h2>
+      <ul className="list-disc list-inside mb-4 text-gray-600">
+        {degrees.map((degree, index) => (
+          <li key={index}>{degree}</li>
+        ))}
+      </ul>
+      {/* Bio */}
+      <p className="text-gray-600 mb-4 text-center">{bio}</p>
+    </div>
+  );
+};
+
+export default DoctorProfile;
diff --git a/Frontend/src/components/Doctors.jsx b/Frontend/src/components/Doctors.jsx
index 2b92a27..7420fda 100644
--- a/Frontend/src/components/Doctors.jsx
+++ b/Frontend/src/components/Doctors.jsx
@@ -1,14 +1,16 @@
 import React, { useState } from 'react';
+import {  useNavigate } from 'react-router-dom';
 
 const Doctors = () => {
-    const [doctors, setDoctors] = useState([
-        { id: 1, name: "Dr. Smith", specialty: "Cardiology", patients: 0 },
-        { id: 2, name: "Dr. Johnson", specialty: "Pediatrics", patients: 0 },
-        { id: 3, name: "Dr. Williams", specialty: "Orthopedics", patients: 0 },
-        { id: 4, name: "Dr. Brown", specialty: "Neurology", patients: 0 },
-        { id: 5, name: "Dr. Taylor", specialty: "Dermatology", patients: 0 },
-        { id: 6, name: "Dr. Wilson", specialty: "General Medicine", patients: 0 },
-    ]);
+    const navigate = useNavigate();
+        const [doctors, setDoctors] = useState([
+            { id: 1, name: "Dr. Smith", specialty: "Cardiology", patients: 0 },
+            { id: 2, name: "Dr. Johnson", specialty: "Pediatrics", patients: 0 },
+            { id: 3, name: "Dr. Williams", specialty: "Orthopedics", patients: 0 },
+            { id: 4, name: "Dr. Brown", specialty: "Neurology", patients: 0 },
+            { id: 5, name: "Dr. Taylor", specialty: "Dermatology", patients: 0 },
+            { id: 6, name: "Dr. Wilson", specialty: "General Medicine", patients: 0 },
+        ]);
 
     return (
         <section className="bg-gray-100 p-6 rounded-lg shadow-lg max-w-6xl mx-auto mt-10">
@@ -20,7 +22,7 @@ const Doctors = () => {
                         <p className="text-gray-600">Specialty: {doctor.specialty}</p>
                         <p className="text-gray-600">Patients: {doctor.patients}</p>
                         <button
-                            onClick={() => alert(`More about ${doctor.name}`)}
+                            onClick={() => navigate('/profile')}
                             className="mt-4 w-full bg-green-600 text-white p-2 rounded-lg hover:bg-green-500 transition duration-200"
                         >
                             View Details