Skip to content

Commit

Permalink
Enhanced header and added title
Browse files Browse the repository at this point in the history
  • Loading branch information
@yazdanhaider
yazdanhaider committed Oct 16, 2024
1 parent 9a368a3 commit e69e1c7
Show file tree
Hide file tree
Showing 5 changed files with 121 additions and 76 deletions.
10 changes: 5 additions & 5 deletions Frontend/src/components/Appointments.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,10 +78,10 @@ const Appointments = () => {
);

return (
<div className="bg-light min-h-screen p-8">
<h1 className="text-4xl font-bold text-primary mb-8">Appointment Management</h1>
<div className="bg-light min-h-screen p-4 sm:p-8">
<h1 className="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8">Appointment Management</h1>

<div className="mb-8 flex justify-between items-center">
<div className="mb-6 sm:mb-8 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
Expand All @@ -91,12 +91,12 @@ const Appointments = () => {
<FaCalendarPlus className="mr-2" />
{showForm ? 'Cancel' : 'New Appointment'}
</motion.button>
<div className="relative">
<div className="relative w-full sm:w-auto">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder="Search appointments..."
className="pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
className="w-full sm:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
Expand Down
27 changes: 12 additions & 15 deletions Frontend/src/components/Doctors.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,48 +13,45 @@ const Doctors = ({ doctors }) => {
);

const handleBookAppointment = (doctorId) => {
// Navigate to the appointments page with the selected doctor's ID
navigate(`/appointments?doctorId=${doctorId}`);
};

return (
<div className="bg-light min-h-screen p-8">
<h1 className="text-4xl font-bold text-primary mb-8">Our Doctors</h1>
<div className="bg-light min-h-screen p-4 sm:p-8">
<h1 className="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8">Our Doctors</h1>

<div className="mb-8 flex justify-end">
<div className="relative">
<div className="mb-6 sm:mb-8 flex justify-end">
<div className="relative w-full sm:w-auto">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder="Search doctors..."
className="pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
className="w-full sm:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
</div>
</div>

<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6">
{filteredDoctors.map((doctor, index) => (
<motion.div
key={doctor.id}
className={`bg-white p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl ${
index === 0 ? 'md:col-span-2 md:row-span-2' : ''
}`}
className="bg-white p-4 sm:p-6 rounded-lg shadow-lg transition-all duration-300 hover:shadow-xl"
whileHover={{ scale: 1.03 }}
>
<img src={doctor.image} alt={doctor.name} className="w-32 h-32 rounded-full mx-auto mb-4 object-cover" />
<h3 className="text-xl font-semibold text-primary text-center mb-2">{doctor.name}</h3>
<img src={doctor.image} alt={doctor.name} className="w-24 h-24 sm:w-32 sm:h-32 rounded-full mx-auto mb-4 object-cover" />
<h3 className="text-lg sm:text-xl font-semibold text-primary text-center mb-2">{doctor.name}</h3>
<p className="text-gray-600 text-center mb-4">{doctor.specialty}</p>
<div className="flex justify-between items-center text-sm text-gray-500 mb-4">
<span>Patients: {doctor.patients}</span>
<span>Experience: {doctor.experience} years</span>
</div>
<div className="flex justify-center space-x-4">
<div className="flex flex-col sm:flex-row justify-center space-y-2 sm:space-y-0 sm:space-x-4">
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="bg-accent text-primary px-4 py-2 rounded-full font-bold flex items-center"
className="bg-accent text-primary px-4 py-2 rounded-full font-bold flex items-center justify-center"
onClick={() => navigate(`/doctor/${doctor.id}`)}
>
<FaEye className="mr-2" />
Expand All @@ -63,7 +60,7 @@ const Doctors = ({ doctors }) => {
<motion.button
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.9 }}
className="bg-primary text-accent px-4 py-2 rounded-full font-bold flex items-center"
className="bg-primary text-accent px-4 py-2 rounded-full font-bold flex items-center justify-center"
onClick={() => handleBookAppointment(doctor.id)}
>
<FaCalendarPlus className="mr-2" />
Expand Down
132 changes: 90 additions & 42 deletions Frontend/src/components/Header.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,66 +1,114 @@
import { useState } from "react";
import { Link } from "react-router-dom";
import { useMediaQuery } from "../hooks/useMediaQuery";
import { FaBars, FaTimes } from 'react-icons/fa';
import { useState, useEffect } from "react";
import { Link, useLocation } from "react-router-dom";
import { motion, AnimatePresence } from 'framer-motion';
import { FaUser, FaSignInAlt, FaBars, FaTimes } from 'react-icons/fa';
import Logo from '../assets/logo.svg';

const Header = () => {
const isTablet = useMediaQuery("only screen and (max-width: 768px)");
const [isMenuOpen, setIsMenuOpen] = useState(false);
const [activeItem, setActiveItem] = useState('/');
const location = useLocation();

const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
useEffect(() => {
setActiveItem(location.pathname);
}, [location]);

const navItems = [
{ title: 'Home', path: '/' },
{ title: 'Appointments', path: '/appointments' },
{ title: 'Patients', path: '/patients' },
{ title: 'Doctors', path: '/doctors' },
{ title: 'Admin', path: '/admin' },
{ title: 'About', path: '/about-us' },
{ title: 'Contact', path: '/contact-us' },
];

return (
<header className="bg-primary text-light p-4 sticky top-0 z-10 shadow-lg transition duration-300">
<nav className="container mx-auto flex justify-between items-center">
<Link to="/" className="flex items-center text-2xl font-bold text-accent hover:text-light transition duration-300">
<img src={Logo} alt="Health Nest Logo" className="h-8 w-auto mr-2" />
Health Nest
</Link>
{isTablet ? (
<>
<button onClick={toggleMenu} className="text-light focus:outline-none">
{isMenuOpen ? <FaTimes size={24} /> : <FaBars size={24} />}
</button>
{isMenuOpen && (
<div className="absolute top-16 left-0 w-full bg-primary p-4 shadow-lg">
{navItems.map((item, index) => (
<Link
key={index}
to={item.path}
className="block py-2 text-light hover:text-accent transition duration-300"
onClick={toggleMenu}
>
{item.title}
</Link>
))}
</div>
)}
</>
) : (
<div className="flex space-x-6">
{navItems.map((item, index) => (
<header className="bg-gradient-to-r from-primary to-secondary py-4 px-6">
<div className="container mx-auto">
<div className="flex justify-between items-center">
<Link to="/" className="flex items-center space-x-2">
<img src={Logo} alt="Health Nest Logo" className="h-12 w-auto" />
<span className="text-3xl font-bold text-accent">Health Nest</span>
</Link>

<nav className="hidden md:flex space-x-2">
{navItems.map((item) => (
<Link
key={index}
key={item.path}
to={item.path}
className="text-light hover:text-accent transition duration-300"
className={`relative px-4 py-2 text-xl font-medium text-light hover:text-accent transition-colors duration-300 ${
activeItem === item.path ? 'text-accent' : ''
}`}
>
{item.title}
{activeItem === item.path && (
<motion.div
className="absolute bottom-0 left-0 right-0 h-0.5 bg-accent"
layoutId="underline"
initial={false}
transition={{ type: "spring", stiffness: 300, damping: 30 }}
/>
)}
</Link>
))}
</nav>

<div className="hidden md:flex items-center space-x-4">
<Link to="/signup" className="bg-accent text-primary px-5 py-2 rounded-full hover:bg-light transition duration-300 text-lg font-medium">
<FaUser className="inline-block mr-2" />Sign Up
</Link>
<Link to="/login" className="bg-light text-primary px-5 py-2 rounded-full hover:bg-accent transition duration-300 text-lg font-medium">
<FaSignInAlt className="inline-block mr-2" />Log In
</Link>
</div>
)}
</nav>

<button
className="md:hidden text-light focus:outline-none"
onClick={() => setIsMenuOpen(!isMenuOpen)}
>
{isMenuOpen ? <FaTimes size={28} /> : <FaBars size={28} />}
</button>
</div>

<AnimatePresence>
{isMenuOpen && (
<motion.div
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
exit={{ opacity: 0, y: -20 }}
transition={{ duration: 0.3 }}
className="md:hidden mt-4"
>
{navItems.map((item) => (
<Link
key={item.path}
to={item.path}
className={`block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300 ${
activeItem === item.path ? 'text-accent' : ''
}`}
onClick={() => setIsMenuOpen(false)}
>
{item.title}
</Link>
))}
<Link
to="/signup"
className="block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300"
onClick={() => setIsMenuOpen(false)}
>
<FaUser className="inline-block mr-2" />Sign Up
</Link>
<Link
to="/login"
className="block py-2 px-4 text-lg font-medium text-light hover:text-accent transition duration-300"
onClick={() => setIsMenuOpen(false)}
>
<FaSignInAlt className="inline-block mr-2" />Log In
</Link>
</motion.div>
)}
</AnimatePresence>
</div>
</header>
);
};
Expand Down
18 changes: 9 additions & 9 deletions Frontend/src/components/Home.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,18 +15,18 @@ const Home = () => {

return (
<div className="bg-light min-h-screen">
<section className="hero bg-primary text-light py-20 px-4 rounded-3xl mx-4 mt-4">
<section className="hero bg-primary text-light py-12 sm:py-20 px-4 rounded-3xl mx-2 sm:mx-4 mt-4">
<div className="container mx-auto text-center">
<motion.h1
className="text-4xl md:text-6xl font-bold mb-4"
className="text-3xl sm:text-4xl md:text-5xl lg:text-6xl font-bold mb-4"
initial={{ opacity: 0, y: -20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5 }}
>
Welcome to Health Nest
</motion.h1>
<motion.p
className="text-xl mb-8"
className="text-lg sm:text-xl mb-8"
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: 0.2 }}
Expand All @@ -45,10 +45,10 @@ const Home = () => {
</div>
</section>

<section className="features py-20">
<section className="features py-12 sm:py-20">
<div className="container mx-auto px-4">
<h2 className="text-3xl font-bold text-center mb-12 text-primary">Our Features</h2>
<div className="grid grid-cols-1 md:grid-cols-3 gap-8">
<h2 className="text-2xl sm:text-3xl font-bold text-center mb-8 sm:mb-12 text-primary">Our Features</h2>
<div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 sm:gap-8">
{features.map((feature, index) => (
<motion.div
key={index}
Expand All @@ -57,9 +57,9 @@ const Home = () => {
animate={{ opacity: 1, y: 0 }}
transition={{ duration: 0.5, delay: index * 0.1 }}
>
<feature.icon className="text-5xl text-accent mb-4 mx-auto" />
<h3 className="text-xl font-semibold mb-2 text-primary">{feature.title}</h3>
<p className="text-gray-600">{feature.description}</p>
<feature.icon className="text-4xl sm:text-5xl text-accent mb-4 mx-auto" />
<h3 className="text-lg sm:text-xl font-semibold mb-2 text-primary">{feature.title}</h3>
<p className="text-gray-600 text-sm sm:text-base">{feature.description}</p>
</motion.div>
))}
</div>
Expand Down
10 changes: 5 additions & 5 deletions Frontend/src/components/Patients.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -31,10 +31,10 @@ const Patients = () => {
);

return (
<div className="bg-light min-h-screen p-8">
<h1 className="text-4xl font-bold text-primary mb-8">Patient Management</h1>
<div className="bg-light min-h-screen p-4 sm:p-8">
<h1 className="text-3xl sm:text-4xl font-bold text-primary mb-6 sm:mb-8">Patient Management</h1>

<div className="mb-8 flex justify-between items-center">
<div className="mb-6 sm:mb-8 flex flex-col sm:flex-row justify-between items-center space-y-4 sm:space-y-0">
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
Expand All @@ -44,12 +44,12 @@ const Patients = () => {
<FaUserPlus className="mr-2" />
{showForm ? 'Cancel' : 'Add New Patient'}
</motion.button>
<div className="relative">
<div className="relative w-full sm:w-auto">
<FaSearch className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" />
<input
type="text"
placeholder="Search patients..."
className="pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
className="w-full sm:w-64 pl-10 pr-4 py-2 border border-gray-300 rounded-full focus:outline-none focus:ring-2 focus:ring-accent"
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
/>
Expand Down

0 comments on commit e69e1c7

Please sign in to comment.