hamed/nobat724_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

change style menu home & responsive head and footer home & list doctors

Browse Source
This commit is contained in:
Ehsan
2024-08-11 06:46:35 +03:30
parent 0afe0a39b0
commit 697bde2f5d
13 changed files with 98 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/Logo.js
+1 -1
View File
@@ -4,7 +4,7 @@ import React from 'react'
function Logo({ isAbsolute }) {
return (
<Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0 z-10' : ''}>
<Link href='/' className={isAbsolute ? 'absolute right-[32px] top-0' : ''}>
<div className="flex items-center justify-start gap-[5px]">
<Image
className='w-[20px] h-[20px] sm:w-[23px] sm:h-[23px] md:w-[26px] md:h-[26px] lg:w-[30px] lg:h-[30px]'
components/doctors/listDoctors/index.js
+1 -1
View File
@@ -5,7 +5,7 @@ import Pagination from '@/app/component/Pagination';
function ListDoctors() {
return (
<div>
<ul className="grid grid-cols-3 mt-[64px] gap-[24px]">
<ul className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 mt-[64px] gap-[24px]">
{doctors.map(doctor => (
<ItemDoctor
key={doctor.id}
components/home/FrequentSearches.js
+2 -2
View File
@@ -3,7 +3,7 @@ import { Button } from "@mui/material"
function FrequentSearches() {
return (
<div className="flex mt-3 items-center justify-start lg:justify-center gap-4 w-full lg:w-fit">
<div className="flex mt-3 items-center justify-start lg:justify-center gap-[8px] sm:gap-[10px] md:gap-[13px] lg:gap-[16px] w-full lg:w-fit">
<p className="text-[#3B3B3B] text-[16px] font-normal text-nowrap">جستجوهای پر تکرار:</p>
<div className="overflow-auto hidden-scroll">
<ul className="flex items-center justify-start gap-[14px]">
@@ -12,7 +12,7 @@ function FrequentSearches() {
<Button
variant="contained"
color="secondary"
className="!py-2 !px-4 !rounded-[4px] !shadow-none !text-[14px] !font-normal !border !border-solid !border-[#D7D7D7]"
className="!py-2 !px-[12px] sm:!px-[14px] md:!px-[15px] lg:!px-[16px] !text-[12px] lg:!text-[14px] !rounded-[4px] !shadow-none !font-normal !border !border-solid !border-[#D7D7D7]"
>{item}</Button>
</li>
))}
components/home/index.js
+7 -2
View File
@@ -10,8 +10,13 @@ function HomePage() {
<div className="bg-banner-home !bg-center !bg-no-repeat !bg-cover">
<div className="padding-responsive min-h-screen pt-[120px] flex items-center justify-center flex-col gap-[64px]">
<div>
<p className="text-[#D15B56] text-center font-kalame text-[32px] font-bold">نوبت ۷۲۴</p>
<p className="text-[#525252] text-center mt-2.5 font-kalame text-[36px] font-bold flex items-center gap-3">
<p
className="text-[#D15B56] text-center font-kalame text-[20px] sm:text-[24px] md:text-[28px] lg:text-[32px] font-bold"
>نوبت ۷۲۴</p>
<p
className="text-[#525252] text-center mt-2.5 font-kalame text-[20px] sm:text-[25px] md:text-[31px] lg:text-[36px]
font-bold flex items-center gap-3"
>
<BText />
میتونی آنلاین نوبت بگیری!
<AText />
components/home/search/index.js
+5 -2
View File
@@ -36,13 +36,16 @@ function SearchBar() {
dir='rtl'
className={`!shadow-none !w-full lg:!w-[524px] bg-[#FAFAFA] !text-[14px] md:!text-[16px] !rounded-0 !font-normal !text-[#6C757D]`}
/>
<Button className="!hidden lg:!flex !rounded-[4px] !gap-2.5 !min-w-[114px]">
<Button className="!hidden lg:!flex !rounded-[4px] !h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !min-w-[114px]">
<div className="min-w-[20px] min-h-[20px]">
<Search />
</div>
<p>جستجو</p>
</Button>
<Button className="!flex lg:!hidden !rounded-[4px] !gap-2.5 !p-2.5 !w-[40px] !h-[40px]">
<Button
className="!flex lg:!hidden !rounded-[4px] !w-[40px] sm:!w-[42px] md:!w-[45px] lg:!w-[48px]
!h-[40px] sm:!h-[42px] md:!h-[45px] lg:!h-[48px] !gap-2.5 !p-2.5"
>
<SearchD />
</Button>
</ButtonGroup>
components/home/search/modal/index.js
+6 -4
View File
@@ -31,16 +31,18 @@ function ModalSearchCity() {
<>
{/* Button Modal */}
<Button
className="!border-none hover:!bg-transparent !min-w-[155px] !py-0 lg:!py-[9px]"
className="!border-none hover:!bg-transparent !py-[11.5px] !px-[7px] sm:!py-3 sm:!px-[9px] md:!px-[11px] lg:!px-[12px] min-w-fit !rounded-3"
onClick={handleOpen}
variant="contained"
color="secondary"
>
<div className="min-w-[20px] min-h-[20px]">
<div className="min-w-[20px] min-h-[20px] hidden md:flex">
<Location />
</div>
<p className="text-[#616161] text-[16px] font-medium mx-1">انتخاب شهر</p>
<ArrowBottomH />
<p className="text-[#616161] text-[16px] leading-[17px] sm:leading-[19px] md:leading-[22px] lg:leading-[24px] font-medium ml-1 md:mx-1">انتخاب شهر</p>
<div className="w-[16px] h-[16px] md:w-[18px] md:h-[18px] lg:w-[20px] lg:h-[20px] grid place-items-center">
<ArrowBottomH />
</div>
</Button>
{/* Content Modal */}
<Modal
components/layout/footer/LogoNamad.js
+26
View File
@@ -0,0 +1,26 @@
import Image from "next/image"
const Namads = [
'/assets/images/footer-etehadie.png',
'/assets/images/footer-r.png',
'/assets/images/footer-namad.png'
]
function LogoNamad() {
return (
<ul className="flex items-center gap-3">
{Namads.map(src => (
<li>
<Image
alt="logo"
width={48}
height={48}
src={src}
/>
</li>
))}
</ul>
)
}
export default LogoNamad
components/layout/Footer.js → components/layout/footer/index.js
+35 -42
View File
@@ -1,15 +1,16 @@
import { footerL, footerR } from "@/constans";
import Image from "next/image";
import Linkedin from "../icons/Linkedin";
import Telegram from "../icons/Telegram";
import Whatsapp from "../icons/Whatsapp";
import Instagram from "../icons/Instagram";
import Link from "next/link";
import LocationF from "../icons/LocationF";
import CalendarAddF from "../icons/CalendarAddF";
import StethoscopeF from "../icons/StethoscopeF";
import Logo from "@/app/component/Logo";
import { Button } from "@mui/material";
import Link from "next/link";
// Icons
import Linkedin from "../../icons/Linkedin";
import Telegram from "../../icons/Telegram";
import Whatsapp from "../../icons/Whatsapp";
import Instagram from "../../icons/Instagram";
import LocationF from "../../icons/LocationF";
import CalendarAddF from "../../icons/CalendarAddF";
import StethoscopeF from "../../icons/StethoscopeF";
import LogoNamad from "./LogoNamad";
const socialMedias = [
<Linkedin />,
@@ -24,63 +25,51 @@ const head = [
{ icon: <StethoscopeF />, text: 'دشبورد اختصاصی برای پزشکان' }
]
const Namads = [
'/assets/images/footer-etehadie.png',
'/assets/images/footer-r.png',
'/assets/images/footer-namad.png'
]
function Footer() {
return (
<div>
<div className="flex items-center justify-center gap-[100px]">
<div className="pb-[11px]">
<div className="flex items-center justify-evenly gap-[12px]">
{head.map((item, idx) => (
<div
key={idx}
className="flex items-center cursor-pointer justify-start gap-1 p-[6px] hover:bg-[#F7F7F7] hover:transition-all
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-transparent hover:bg-none hover:border-[#FDBD9F]"
className="flex flex-col lg:flex-row items-center cursor-pointer justify-start gap-1 p-[6px] hover:transition-all
transition-all duration-300 hover:duration-300 rounded-[8px] border-solid border border-[#EFEFEF] bg-[#F7F7F7] hover:bg-none hover:border-[#FDBD9F]"
>
{item.icon}
<p className="text-[#2F2F2F] text-[16px] font-medium">{item.text}</p>
<p className="text-[#2F2F2F] text-center text-[16px] font-medium">{item.text}</p>
</div>
))}
</div>
<span className="h-px bg-[#D7D7D7] mb-[40px] mt-[48px] w-full block"></span>
<div className="pb-[60px] flex items-start justify-between">
<div
className="pb-[16px] sm:pb-[18px] md:pb-[19px] lg:pb-[21px]
flex flex-col gap-[16px] lg:gap-0 lg:flex-row items-start justify-between"
>
{/* Right */}
<div className="flex gap-[30px] flex-col items-start">
<div className="w-full lg:w-fit flex gap-[12px] lg:gap-[30px] flex-col items-start">
{/* Icon */}
<Logo />
<p
className="text-[#616161] text-[14px] font-normal"
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br /> بستری آسان برای پزشکان و بیماران فراهم کرده<br /> است. </p>
<ul className="flex items-center gap-3">
{Namads.map(src => (
<li>
<Image
alt="logo"
width={48}
height={48}
src={src}
/>
</li>
))}
</ul>
className="w-full lg:w-fit text-[#616161] text-[14px] font-normal"
>724 یک وبسایت نوبت دهی آنلاین می باشد که<br className="hidden lg:flex" /> بستری آسان برای پزشکان و بیماران فراهم کرده<br className="hidden lg:flex" /> است. </p>
<div className="hidden lg:flex">
<LogoNamad />
</div>
</div>
{/* Center */}
<ul className="flex flex-col gap-3">
<ul className="w-full lg:w-fit flex flex-col gap-3">
{footerR.map((item, idx) => (
<li
key={idx}
className={`
relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
relative w-full after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0
${idx === 0 ? 'text-[#3B3B3B] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5' : 'text-[#616161] border-transparent font-normal'}
text-[16px] w-fit`}
>{item}</li>
))}
</ul>
<ul className="flex flex-col gap-3">
<ul className="w-full lg:w-fit flex flex-col gap-3">
{footerL.map((item, idx) => (
<li
key={idx}
@@ -93,11 +82,11 @@ function Footer() {
</ul>
{/* Left */}
<div className="flex flex-col justify-center gap-[50px]">
<div className="w-full lg:w-fit flex flex-row lg:flex-col items-center lg:items-start justify-center gap-[50px]">
<p className="text-[#3B3B3B] w-fit text-[16px] after:hover:w-full after:transition-all after:hover:bg-[#F17732] font-bold pb-1.5 relative after:absolute after:right-0 after:h-0.5 after:bottom-0 after:w-0">
همراه با ما باشید:
</p>
<ul className="flex items-center gap-[15px]">
<ul className="flex items-center gap-[8px] sm:gap-[11px] md:gap-[13px] lg:gap-[15px]">
{socialMedias.map((item, idx) => (
<li
key={idx}
@@ -113,7 +102,11 @@ function Footer() {
))}
</ul>
</div>
<div className="flex lg:hidden justify-center w-full mt-2">
<LogoNamad />
</div>
</div>
<p className="text-center text-[#7E7E7E] text-[12px] font-normal">کلیه حقوق وبسایت برای این شرکت می باشد.</p>
</div>
)
}
components/layout/header/Header.js → components/layout/header/index.js
+8 -4
View File
@@ -18,19 +18,23 @@ function Header({ name }) {
<div
className="bg-[#FAFAFA] rounded-lg shadow-[0px_1px_24.8px_0px_rgba(204,_204,_204,_0.18)] w-full mx-auto"
>
<div className="h-20 px-4 py-8 flex overflow-hidden justify-between items-center flex-nowrap">
<div className={`
h-20 px-4 py-8 flex transition-all duration-500 overflow-hidden justify-between items-center flex-nowrap
${isActive ? '!pr-0' : '!p-4'}
`}>
<div className="">
<BgGray
isActive={isActive}
setIsActive={setIsActive}
/>
<Col
name={name}
isActive={isActive}
setIsActive={setIsActive}
/>
<div className="relative flex flex-row-reverse gap-2">
<Logo />
<div className="flex lg:hidden">
<div className="flex lg:hidden z-20">
<ButtonMenu
isActive={isActive}
setIsActive={setIsActive}
@@ -39,7 +43,7 @@ function Header({ name }) {
</div>
</div>
</div>
<Row />
<Row name={name} />
<Link href='/signin'>
<Button
className="!hidden lg:!flex"
@@ -49,7 +53,7 @@ function Header({ name }) {
ورود | ثبت نام
</Button>
<Button
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 ${isActive ? '!bg-[#9D9D9D]' : '!bg-[#EFEFEF]'}`}
className={`!flex lg:!hidden !p-2 !rounded-full transition-all duration-500 !bg-[#EFEFEF]`}
variant="text"
color="primary"
>
components/layout/header/list/Row.js
+1 -1
View File
@@ -2,7 +2,7 @@ import { listNav } from "@/constans";
import { isActiveURL } from "@/helper";
import Link from "next/link";
function Row() {
function Row({ name }) {
return (
<ul className="hidden lg:flex items-center justify-center gap-[40px]">
{listNav.map(nav => (
components/layout/header/list/col/BgGray.js
+1 -1
View File
@@ -4,7 +4,7 @@ function BgGray({ isActive, setIsActive }) {
onClick={() => setIsActive(false)}
className={`
${isActive ? 'bg-[#232323] opacity-40 flex' : 'bg-transparent opacity-40 hidden'}
absolute cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
absolute z-[5] cursor-pointer transition-all duration-500 left-0 top-[-12px] sm:top-[-21px] md:top-[-30px] lg:top-[-40px] w-screen h-screen
`}
></div>
)
components/layout/header/list/col/index.js
+3 -3
View File
@@ -3,7 +3,7 @@ import { Button } from "@mui/material";
import Link from "next/link";
import { isActiveURL } from "@/helper";
function Col({ isActive, setIsActive }) {
function Col({ isActive, setIsActive, name }) {
return (
<div className="flex lg:hidden">
{/* <Button variant="text" className="!p-0.5">
@@ -12,10 +12,10 @@ function Col({ isActive, setIsActive }) {
<div className={`
fixed pb-[31px] pt-[64px] pl-[24px] padding-responsive top-[-12px] sm:top-[-21px]
md:top-[-30px] lg:top-[-40px] w-[85%] h-screen bg-[#FAFAFA] transition-all duration-500
md:top-[-30px] lg:top-[-40px] w-[85%] z-10 h-screen bg-[#FAFAFA] transition-all duration-500
${isActive ? 'right-0' : '-right-[85%]'}
`}>
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px] mr-[16px]">
<ul className="flex flex-col items-start justify-center gap-[30px] mt-[78px]">
{listNav.map(nav => (
<li
key={nav.id}
components/layout/index.js
+2 -2
View File
@@ -1,5 +1,5 @@
import Footer from './Footer';
import Header from './header/Header';
import Footer from './footer';
import Header from './header';
function Layout({ children, title, name }) {
return (