Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web.anteneh amare.assessment #74

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Web.anteneh amare.assessment #74

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
1a93274
feat(aait web).assessment
ante-neh Sep 5, 2023
ca8a6fd
feat(aait.web.anteneh-amare):assessment
ante-neh Sep 5, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions web/app/details/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import Details from "@/components/details/Details"

const page = () => {
return (
<Details/>
)
}

export default page
18 changes: 12 additions & 6 deletions web/app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,11 @@
import NavBar from '@/components/layout/NavBar'
import './globals.css'
import type { Metadata } from 'next'
import { Inter } from 'next/font/google'

const inter = Inter({ subsets: ['latin'] })
import Footer from '@/components/layout/Footer'

export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
title: 'Hakim Hub',
description: 'Hakim Hub assessment',
}

export default function RootLayout({
Expand All @@ -16,7 +15,14 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body className="max-h-screen">
<NavBar/>
{children}
<Footer/>
</body>
</html>
)
}



123 changes: 13 additions & 110 deletions web/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,113 +1,16 @@
import Image from 'next/image'

export default function Home() {
'use client'
import React from 'react'
import Home from '@/components/homePage/Home'
import { store } from "@/store/page";
import {Provider} from 'react-redux'
const page = () => {
return (
<main className="flex min-h-screen flex-col items-center justify-between p-24">
<div className="z-10 max-w-5xl w-full items-center justify-between font-mono text-sm lg:flex">
<p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
Get started by editing&nbsp;
<code className="font-mono font-bold">app/page.tsx</code>
</p>
<div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:h-auto lg:w-auto lg:bg-none">
<a
className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
By{' '}
<Image
src="/vercel.svg"
alt="Vercel Logo"
className="dark:invert"
width={100}
height={24}
priority
/>
</a>
</div>
</div>

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 before:lg:h-[360px] z-[-1]">
<Image
className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
src="/next.svg"
alt="Next.js Logo"
width={180}
height={37}
priority
/>
</div>

<div className="mb-32 grid text-center lg:max-w-5xl lg:w-full lg:mb-0 lg:grid-cols-4 lg:text-left">
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Docs{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Find in-depth information about Next.js features and API.
</p>
</a>

<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Learn{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Learn about Next.js in an interactive course with&nbsp;quizzes!
</p>
</a>

<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Templates{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Explore the Next.js 13 playground.
</p>
</a>

<a
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
target="_blank"
rel="noopener noreferrer"
>
<h2 className={`mb-3 text-2xl font-semibold`}>
Deploy{' '}
<span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-&gt;
</span>
</h2>
<p className={`m-0 max-w-[30ch] text-sm opacity-50`}>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
</main>
<div className='min-h-screen bg-white'>
<Provider store={store}>
<Home/>
</Provider>
</div>
)
}

export default page
17 changes: 17 additions & 0 deletions web/app/search/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
'use client'
import React from 'react'
import SearchPage from '@/components/search/SearchPage'
import { Provider } from 'react-redux'
import { store } from '@/store/page'

const page = () => {
return (
<div>
<Provider store={store}>
<SearchPage/>
</Provider>
</div>
)
}

export default page
76 changes: 76 additions & 0 deletions web/components/details/Details.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
import Image from "next/image"
import { useParams } from "next/navigation"
import { useGetDoctorProfileQuery } from "@/store/apiSlice"

const Details = () => {
const id = useParams()
const{data:doctors, isSuccess} = useGetDoctorProfileQuery(id)

return (
{
doctors?.data.map((doctor:any)=>{
<div className="flex flex-col max-h-screen">
<div className="w-[1268px] h-[288px] pt-8 flex flex-col">
<Image src = "/images/manik.svg" width={1268} height= {288} alt=""/>
<Image src={doctor.photo} width={227} height={227} alt="" className="rounded-full -pb-[50%]"/>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
<h3 className="font-poppins font-normal text-3xl">Dr Fasil Tefera</h3>
<p className="font-poppins font-light">Internal Medicine</p>
</div>
<div className="flex flex-col">
<p className="font-poppins font-normal text-2xl">Addis Ababa University</p>
<p className="font-poppins font-normal text-2xl text-center">Washington Medical Center</p>
</div>

</div>

<div className="flex flex-col">
<h3 className="font-poppins font-bold text-xl">About</h3>
<p className="font-poppins font-light">{doctor.summery}</p>
</div>
<div className="flex flex-col">
<h3 className="font-poppins font-bold text-xl">Education</h3>
<div>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
<p className="font-poppins font-medium text-xl ">Addis Ababa University</p>
<p className="font-poppins font-normal">B.Sc Medicine</p>
</div>
<div>
<p className="font-poppins font-light text-xl text-justify">2003 - 2007</p>
</div>
</div>
<div className="flex flex-row justify-between">
<div className="flex flex-col">
<p className="font-poppins font-medium text-xl ">Harvard University</p>
<p className="font-poppins font-normal">M.Sc Internal Medicine</p>
</div>
<div>
<p className="font-poppins font-light text-xl text-justify">2003 - 2007</p>
</div>
</div>

</div>
</div>

<div className="ml-2 mr-auto">
<h3>Contact Info</h3>
<div>
<p><Image src="/images/phone.svg" width={18} height={14} alt=""/><span className="font-poppins font-bold text-xl">Phone Number:</span></p>
<p className="font-poppins font-normal text-xl">+25111763498</p>
</div>
<div>
<p><Image src="/images/email" width={18} height={14} alt=""/><span>Email:</span></p>
<p>faakldfjdsak</p>
</div>
</div>

</div>
})
}
)
}

export default Details
43 changes: 43 additions & 0 deletions web/components/homePage/Home.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
'use client'
import Image from "next/image"
import SearchBar from "./SearchBar"
import { useGetAllDoctorsQuery } from "@/store/apiSlice"
import { useRouter } from "next/navigation"
import Link from 'next/link'

const Home = () => {
const{data:doctors, isSuccess, isLoading, isError} = useGetAllDoctorsQuery()
const router = useRouter()
return (
<div className="flex flex-col items-center gap-12 text-black">
<SearchBar/>
<div className="grid grid-cols-4 gap-4 pb-4">
{
doctors?.data.map((doctor)=>{
return(
<div key={doctor._id} className="flex flex-col items-center gap-2 bg-white rounded-md shadow-lg p-8">
<Image src={doctor.photo} className="rounded-full" border-blue-500 height={98} width={90} alt="`${doctor.fullName}`"/>
<p className="font-poppins font-normal text-xl text-black">{doctor.fullName}</p>
<div className="text-white text-center bg-sub-primary rounded-md w-32">
{doctor.speciality.map((special)=>{
return <p key={special._id}>{special.name}</p>
})}
</div>
<div>
{doctor.institutionID_list.map((item)=>{
return <p>{item.institutionName}</p>
})}
</div>
<button onClick={()=>router.push(`/details/${doctor._id}`)}>
Detail
</button>
</div>)
})
}
</div>

</div>
)
}

export default Home
32 changes: 32 additions & 0 deletions web/components/homePage/SearchBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
'use client'
import Image from "next/image"
import { useRouter } from "next/navigation"
import { useState } from "react"

const SearchBar = () => {
const[searchQuery, setSearchQuery] = useState("")
const router = useRouter()

const onSearch=(event:React.FormEvent)=>{
event.preventDefault()
const encodedSearchQuery = encodeURI(searchQuery)
router.push(`/search/?q=${encodedSearchQuery}`)

}

return (
<div>
<form onSubmit={onSearch} className="pt-4">
<input
value={searchQuery}
onChange={(event)=>{setSearchQuery(event.target.value)}}
placeholder="Name"
className="w-[1006px] h-12 roundex-xl rounded-custom-radius border-gray-400 border-2 p-4"
/>
</form>

</div>
)
}

export default SearchBar
45 changes: 45 additions & 0 deletions web/components/layout/Footer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@
import Image from "next/image"
const Footer = () => {
return (
<div className="flex flex-col bg-sub-primary max-w-screen px-32 gap-4 justify-center pt-8 bg-h-[323px]">
<div className="flex flex-row justify-between ">
<div>
<p className="font-bold text-3xl font-poppins">HakimHub</p>
</div>
<div className="flex flex-row gap-8">
<div className="flex flex-col">
<p className="font-poppins font-bold text-base">Get Connected</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>For Physicians</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>For Hospitals</p>
</div>
<div className="flex flex-col">
<p className="font-poppins font-bold text-base">Actions</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>Find a doctor</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>Find a hospital</p>
</div>
<div className="flex flex-col">
<p className="font-poppins font-bold text-base">Company</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>About Us</p>
<p className="flex fle-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>Career</p>
<p className="flex flex-row gap-1 items-center"><span><Image src="/images/coolicon.svg" width={7} height={8} alt="right arrow"/></span>Join our team</p>
</div>
</div>
</div>
<hr className='h-0 border-1 border-solid border-white-500 max-w-screen top-150'/>
<div className="flex flex-row justify-between">
<div className="flex flex-row justfy-between">
<p className="font-poppins font-semibold text-xl p-2">Privacy Policy</p>
<p className="font-poppins font-semibold text-xl p-2">Terms of Use</p>
</div>
<div className="flex flex-row gap-12">
<Image src="/images/face-book.svg" width={21} height={17} alt="face book icon"/>
<Image src="/images/linkedin.svg" width={21} height={17} alt="linkedin icon"/>
<Image src="/images/instagram.svg" width={21} height={17} alt="instagram icon"/>
<Image src="/images/twitter.svg" width={21} height={17} alt="twitter icon"/>
</div>
</div>
</div>
)
}

export default Footer
Loading