Web assessment

Web/web_assessment/components/Hospital/HospitalCard.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+import {Hospital} from "./../../types/hospital"
+
+type HospitalCardProps = {
+  hospital: Hospital;
+};
+
+const HospitalCard: React.FC<HospitalCardProps> = ({ hospital }) => {
+  return (
+    <Link href={`/profile/${hospital._id}`}>
+      <div className="flex">
+        <Image
+          src={hospital.coverPhoto}
+          alt="Image"
+          width={300}
+          height={50}
+          className="object-cover object-center rounded-md w-1/3 bg-gray-100"
+        />
+
+        <div className="w-1/3 bg-gray-100 p-4">
+          <div className="mb-4">
+            <p className="text-gray-600">
+              {hospital.address.summary}, {hospital.address.region}
+            </p>
+            <h2 className="text-xl font-bold mb-2">{hospital.institutionName}</h2>
+            <p className="text-gray-600">
+              {hospital.location.coordinates}, {hospital.location.type}
+            </p>
+          </div>
+          <div className="flex-wrap">
+            <p className="text-gray-600">Phone: {hospital.phoneNumbers}</p>
+            <p className="text-gray-600">Email: {hospital.emails}</p>
+          </div>
+        </div>
+
+        <div className="bg-gray-100 flex justify-end w-1/3">
+          <div
+            className={`bg-${hospital.status === 'Open' ? 'green' : 'red'}-500 rounded-full mx-2 h-1/6`}
+          >
+            {hospital.status}
+          </div>
+        </div>
+      </div>
+    </Link>
+  );
+};
+
+export default HospitalCard;

Web/web_assessment/components/Hospital/HospitalDetailWithOutState.tsx

@@ -0,0 +1,80 @@
+import Image from 'next/image'
+import blackLion from './../../public/img/blackLion.png'
+import { FaPhone } from 'react-icons/fa';
+const HospitalDetailWithOutState = () => {
+  return (
+    <div>
+     <Image src={blackLion} alt="Image" width={1200} height={600} className="object-cover object-center rounded-e-md" />
+
+      <h1 className="text-xl font-bold my-3">Black Lion Hospital</h1>
+      <div className="flex">
+        <p className="bg-green-500 rounded-full mx-2 h-1/3">Open Now</p>
+        <p className="bg-blue-500 rounded-full h-1/2">Available 24 hours</p>
+      </div>
+      <p className='my-3 text-sm font-light'>The Hospital was built by Emperor Haile Selassie I in 1969 with the help of the German Evangelical Church. It aimed to serve the poor.
+          The Hospital was built by Emperor Haile Selassie I in 1969 with the help of the German Evangelical Church. It aimed to serve the poor.
+          The Hospital was built by Emperor Haile Selassie I in 1969 with the help of the German Evangelical Church. It aimed to serve the poor.
+      </p>
+      <h1 className="text-lg font-bold my-3">Services</h1>
+      <ul className="flex-col flex-wrap list-disc list-inside text-lg">
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Ambulatory Surgical Facility</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Urgent Care clinic</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Orthopedic Rehabilitation Center</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Hospice Homes</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Ambulatory Surgical Facility</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Urgent Care clinic</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Orthopedic Rehabilitation Center</span>
+      </li>
+      <li className="relative">
+        <span className="absolute left-0 top-1/2 transform -translate-y-1/2 h-2 w-2 bg-purple-600 rounded-full"></span>
+        <span className="ml-4 text-black">Hospice Homes</span>
+      </li>
+    </ul>
+      <div className='border-2 rounded-md my-5'>
+      <h1 className="text-lg font-bold my-3 mx-5">Contact Details</h1>
+      <div className='my-10 mx-10'>
+        <div className='flex flex-wrap gap-5'>
+        <FaPhone />
+        <p className='text-purple-600 text-xl'>Main Office</p>
+          </div>
+
+        <p>+345678</p>
+        <p>+345678</p>
+      </div>
+      <div className='my-10 mx-10'>
+      <div  className='flex flex-wrap gap-5'>
+      <FaPhone />
+      <p className='text-purple-600 text-xl'>
+        Laboratory Office</p>
+        </div>
+
+        <p>+345678</p>
+        <p>+345678</p>
+      </div>
+      </div>
+
+    </div>
+  )
+}
+
+export default HospitalDetailWithOutState

Web/web_assessment/components/common/Footer.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { BsFacebook, BsInstagram, BsTwitter, BsLinkedin } from 'react-icons/bs'
+import { IoIosArrowForward } from 'react-icons/io'
+
+
+const Footer = () => {
+  return (
+    <div className='flex flex-col h-44 bg-primary divide-y-2 divide-slate-50 w-full mx-5 rounded-md'>
+      <div className='flex justify-between'>
+        <div className='font-bold text-white text-4xl'>HakimHub</div>
+        <div className='flex gap-5'>
+          <div className='space-y-3'>
+            <div className='text-white font-bold'>Get Connected</div>
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>For physicians</div>
+            </div>
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>For Hospitals</div>
+            </div>          
+          </div>
+          <div className='space-y-3'>
+            <div className='text-white font-bold'>Actions</div>
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>For a Doctor</div>
+            </div>
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>For a Hospital</div>
+            </div>          
+          </div>
+          <div className='space-y-3'>
+            <div className='text-white font-bold'>Company</div>
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>About Us</div>
+            </div>            
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>Career</div>
+            </div>   
+            <div className='flex items-center text-white'>
+              <IoIosArrowForward color='white' />
+              <div className='text-white'>Join Our Team</div>
+            </div>       
+          </div>
+        </div>
+      </div>
+      <div className='flex justify-between px-3'>
+        <div className='flex py-2 gap-10'>
+          <p className='text-white'>Privacy Policy</p>
+          <p className='text-white'>Terms of Use</p>
+        </div>
+        <div className='flex  py-2 gap-5'>
+          <BsFacebook color='white' />
+          <BsLinkedin color='white' />
+          <BsInstagram color='white' />
+          <BsTwitter color='white' />
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default Footer

Web/web_assessment/components/common/Header.tsx

@@ -0,0 +1,51 @@
+import React from "react";
+import Image from 'next/image';
+import Link from 'next/link';
+
+
+const Header = () => {
+  return (
+    <header className="flex justify-between items-center py-6 px-36">
+      <div className="">
+        <Image
+          src="/img/logo.png"
+          alt="logo"
+          width={160}
+          height={40}
+          layout="fixed"
+        />
+      </div>
+      <div className="flex items-center gap-2 mx-60">
+        <ul className="flex space-x-4">
+          <li>
+            <Link href="/">
+              <h1 className="font-bold">Home</h1>
+            </Link>
+          </li>
+          <li>
+            <Link href="/hospitals">
+              <h1 className="font-bold">Hospitals</h1>
+            </Link>
+          </li>
+          <li>
+            <Link href="/doctors">
+              <h1 className="font-bold">Doctors</h1>
+            </Link>
+          </li>
+        </ul>
+      </div>
+      <div>
+      <div className="flex">
+        <div className="h-10 w-10 rounded-full border-2 bg-gray-600 mx-5">
+          <p className="text-center my-1 text-white">K</p>
+        </div>
+        <button className="bg-white text-black py-2 px-4 rounded-full border border-gray-300 hover:bg-gray-200 focus:outline-none focus:bg-gray-200">
+        Logout
+      </button>
+    </div>
+    </div>
+    </header>
+  );
+};
+
+export default Header;

Web/web_assessment/components/common/Layout.tsx

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react'
+import Footer from './Footer'
+import Header from './Header'
+
+interface LayoutProps {
+    children : ReactNode
+}
+
+const Layout = ({children}:LayoutProps) => {
+  return (
+    <div className='flex flex-col min-h-screen'>
+      <Header />
+      <div className='flex-grow px-36'>
+        {children}
+      </div>
+      <Footer />
+    </div>
+  )
+}
+
+export default Layout

Web/web_assessment/components/common/LoadingSpinner.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const LoadingSpinner = () => {
+  return (
+    <div className="flex justify-center items-center h-screen">
+      <div className="w-16 h-16 border-t-4 border-b-4 border-gray-400 rounded-full animate-spin" />
+    </div>
+  )
+}

Web/web_assessment/components/common/Pagination.tsx

@@ -0,0 +1,40 @@
+import React, { useState } from "react"
+
+interface PaginationProps {
+  numberOfPages: number
+}
+
+export const Pagination: React.FC<PaginationProps> = ({ numberOfPages }) => {
+  const [currentPage, setCurrentPage] = useState(1)
+
+  let paginationItems = []
+  for (let i = 1; i <= numberOfPages; i++) {
+    let paginationItem = <PaginationItem pageNumber={i} isCurrentPage={i == currentPage} onPageClick={setCurrentPage} key={i} />
+    paginationItems.push(paginationItem)
+  }
+
+  return (
+    <div className="flex bg-white px-4 py-12 flex-1 justify-center">
+      <nav className="flex gap-3 text-xs font-medium">
+        {paginationItems}
+      </nav>
+    </div>
+  )
+}
+
+interface PaginationItemProps {
+  pageNumber: number
+  isCurrentPage: boolean
+  onPageClick: React.Dispatch<React.SetStateAction<number>>
+}
+
+const PaginationItem: React.FC<PaginationItemProps> = ({ pageNumber, isCurrentPage, onPageClick }) => {
+  return (
+    <button
+      className={`${"rounded h-8 w-8 border-primary font-normal " + (isCurrentPage ? "bg-primary text-onPrimary" : "bg-gray-200 text-primary")}`}
+      onClick={() => { onPageClick(pageNumber) }}
+    >
+      {pageNumber}
+    </button>
+  )
+}

Web/web_assessment/next.config.js

@@ -1,6 +1,9 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   reactStrictMode: true,
+  images: {
+    domains: ['res.cloudinary.com', 'picsum.photos']
+  },
 }
 
 module.exports = nextConfig