first commit
This commit is contained in:
5
src/ui/components/Footer.tsx
Normal file
5
src/ui/components/Footer.tsx
Normal file
@@ -0,0 +1,5 @@
|
||||
import React from "react";
|
||||
|
||||
export default function Footer() {
|
||||
return <></>;
|
||||
}
|
||||
184
src/ui/components/InsurancesSlider.tsx
Normal file
184
src/ui/components/InsurancesSlider.tsx
Normal file
@@ -0,0 +1,184 @@
|
||||
"use client";
|
||||
import Image from "next/image";
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
import {Autoplay, Navigation} from "swiper/modules";
|
||||
import {Swiper, SwiperSlide} from "swiper/react";
|
||||
import "swiper/css";
|
||||
import "swiper/css/navigation";
|
||||
export default function InsurancesSlider() {
|
||||
return (
|
||||
<>
|
||||
<Swiper
|
||||
loop={true}
|
||||
rewind={true}
|
||||
autoplay={{
|
||||
delay: 2500,
|
||||
disableOnInteraction: false,
|
||||
}}
|
||||
navigation={false}
|
||||
slidesPerView={8}
|
||||
centeredSlides={true}
|
||||
centeredSlidesBounds={true}
|
||||
centerInsufficientSlides={true}
|
||||
spaceBetween={40}
|
||||
modules={[Navigation, Autoplay]}
|
||||
onSlideChange={() => console.log("slide change")}
|
||||
onSwiper={(swiper) => console.log(swiper)}
|
||||
className="h-[120px]"
|
||||
>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden ">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-ma.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-moallem.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-novin.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-pasargad.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-saman.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full !w-[120px] rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image
|
||||
loading="lazy"
|
||||
src={"/bimeh-tejarat-no.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
{/* <SwiperSlide className="h-full w-full rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full w-full rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full w-full rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full w-full rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide>
|
||||
<SwiperSlide className="h-full w-full rounded-xl overflow-hidden">
|
||||
<Link href={"/"} className="h-full w-full ">
|
||||
<div className="relative h-full w-full">
|
||||
<Image loading="lazy"
|
||||
src={"/bank-melat.png"}
|
||||
fill
|
||||
style={{color: "transparent", objectFit: "fill"}}
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</SwiperSlide> */}
|
||||
</Swiper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
66
src/ui/components/LanguagesChanger.tsx
Normal file
66
src/ui/components/LanguagesChanger.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
"use client";
|
||||
import {languages_types} from "@/types";
|
||||
import {usePathname, useRouter} from "next/navigation";
|
||||
import React from "react";
|
||||
|
||||
export default function LanguagesChanger({lang}: {lang: languages_types}) {
|
||||
const pathname = usePathname();
|
||||
const router = useRouter();
|
||||
const removeLangPrefix = (path: string) => {
|
||||
const regex = /^\/(fa|en|ar)(\/|$)/;
|
||||
return path.replace(regex, "/");
|
||||
};
|
||||
|
||||
const handleChangeLanguage = (lang: languages_types) => {
|
||||
const cleanPath = removeLangPrefix(pathname); // مسیر بدون prefix
|
||||
const newPath = `/${lang}${cleanPath}`;
|
||||
router.push(newPath);
|
||||
};
|
||||
return (
|
||||
<>
|
||||
<div className="text-white text-xs flex items-center justify-end gap-x-4 border-[1px] border-white px-4 py-1.5 rounded-full ">
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleChangeLanguage("en")}
|
||||
className="hover:text-secondary cursor-pointer"
|
||||
>
|
||||
EN
|
||||
</button>
|
||||
</span>
|
||||
<span> | </span>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleChangeLanguage("fa")}
|
||||
className="hover:text-secondary cursor-pointer"
|
||||
>
|
||||
FA
|
||||
</button>
|
||||
</span>
|
||||
<span> | </span>
|
||||
<span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => handleChangeLanguage("ar")}
|
||||
className="hover:text-secondary cursor-pointer"
|
||||
>
|
||||
AR
|
||||
</button>
|
||||
</span>
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 25 25"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M12.5 25C10.7917 25 9.17708 24.6719 7.65625 24.0156C6.13542 23.3594 4.80729 22.4635 3.67188 21.3281C2.53646 20.1927 1.64063 18.8646 0.984375 17.3438C0.328125 15.8229 0 14.2083 0 12.5C0 10.7708 0.328125 9.15104 0.984375 7.64063C1.64063 6.13021 2.53646 4.80729 3.67188 3.67188C4.80729 2.53646 6.13542 1.64063 7.65625 0.984375C9.17708 0.328125 10.7917 0 12.5 0C14.2292 0 15.849 0.328125 17.3594 0.984375C18.8698 1.64063 20.1927 2.53646 21.3281 3.67188C22.4635 4.80729 23.3594 6.13021 24.0156 7.64063C24.6719 9.15104 25 10.7708 25 12.5C25 14.2083 24.6719 15.8229 24.0156 17.3438C23.3594 18.8646 22.4635 20.1927 21.3281 21.3281C20.1927 22.4635 18.8698 23.3594 17.3594 24.0156C15.849 24.6719 14.2292 25 12.5 25ZM12.5 22.4375C13.0417 21.6875 13.5104 20.9063 13.9063 20.0938C14.3021 19.2813 14.625 18.4167 14.875 17.5H10.125C10.375 18.4167 10.6979 19.2813 11.0938 20.0938C11.4896 20.9063 11.9583 21.6875 12.5 22.4375ZM9.25 21.9375C8.875 21.25 8.54688 20.5365 8.26563 19.7969C7.98438 19.0573 7.75 18.2917 7.5625 17.5H3.875C4.47917 18.5417 5.23438 19.4479 6.14063 20.2188C7.04688 20.9896 8.08333 21.5625 9.25 21.9375ZM15.75 21.9375C16.9167 21.5625 17.9531 20.9896 18.8594 20.2188C19.7656 19.4479 20.5208 18.5417 21.125 17.5H17.4375C17.25 18.2917 17.0156 19.0573 16.7344 19.7969C16.4531 20.5365 16.125 21.25 15.75 21.9375ZM2.8125 15H7.0625C7 14.5833 6.95313 14.1719 6.92188 13.7656C6.89063 13.3594 6.875 12.9375 6.875 12.5C6.875 12.0625 6.89063 11.6406 6.92188 11.2344C6.95313 10.8281 7 10.4167 7.0625 10H2.8125C2.70833 10.4167 2.63021 10.8281 2.57813 11.2344C2.52604 11.6406 2.5 12.0625 2.5 12.5C2.5 12.9375 2.52604 13.3594 2.57813 13.7656C2.63021 14.1719 2.70833 14.5833 2.8125 15ZM9.5625 15H15.4375C15.5 14.5833 15.5469 14.1719 15.5781 13.7656C15.6094 13.3594 15.625 12.9375 15.625 12.5C15.625 12.0625 15.6094 11.6406 15.5781 11.2344C15.5469 10.8281 15.5 10.4167 15.4375 10H9.5625C9.5 10.4167 9.45313 10.8281 9.42188 11.2344C9.39063 11.6406 9.375 12.0625 9.375 12.5C9.375 12.9375 9.39063 13.3594 9.42188 13.7656C9.45313 14.1719 9.5 14.5833 9.5625 15ZM17.9375 15H22.1875C22.2917 14.5833 22.3698 14.1719 22.4219 13.7656C22.474 13.3594 22.5 12.9375 22.5 12.5C22.5 12.0625 22.474 11.6406 22.4219 11.2344C22.3698 10.8281 22.2917 10.4167 22.1875 10H17.9375C18 10.4167 18.0469 10.8281 18.0781 11.2344C18.1094 11.6406 18.125 12.0625 18.125 12.5C18.125 12.9375 18.1094 13.3594 18.0781 13.7656C18.0469 14.1719 18 14.5833 17.9375 15ZM17.4375 7.5H21.125C20.5208 6.45833 19.7656 5.55208 18.8594 4.78125C17.9531 4.01042 16.9167 3.4375 15.75 3.0625C16.125 3.75 16.4531 4.46354 16.7344 5.20313C17.0156 5.94271 17.25 6.70833 17.4375 7.5ZM10.125 7.5H14.875C14.625 6.58333 14.3021 5.71875 13.9063 4.90625C13.5104 4.09375 13.0417 3.3125 12.5 2.5625C11.9583 3.3125 11.4896 4.09375 11.0938 4.90625C10.6979 5.71875 10.375 6.58333 10.125 7.5ZM3.875 7.5H7.5625C7.75 6.70833 7.98438 5.94271 8.26563 5.20313C8.54688 4.46354 8.875 3.75 9.25 3.0625C8.08333 3.4375 7.04688 4.01042 6.14063 4.78125C5.23438 5.55208 4.47917 6.45833 3.875 7.5Z"
|
||||
fill="#E8EAED"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
28
src/ui/components/MobileToggler.tsx
Normal file
28
src/ui/components/MobileToggler.tsx
Normal file
@@ -0,0 +1,28 @@
|
||||
"use client";
|
||||
import React, {useState} from "react";
|
||||
|
||||
export default function MobileToggler() {
|
||||
const [, setOpen] = useState(false);
|
||||
return (
|
||||
<>
|
||||
<button onClick={(prev) => setOpen(!prev)}>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 15 15"
|
||||
height="40"
|
||||
width="40"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
}
|
||||
117
src/ui/components/global/Accordion.tsx
Normal file
117
src/ui/components/global/Accordion.tsx
Normal file
@@ -0,0 +1,117 @@
|
||||
"use client";
|
||||
|
||||
import {useState} from "react";
|
||||
import ChevronLeftSvg from "../icons/ChevronLeftSvg";
|
||||
import Image from "next/image";
|
||||
import { default_info } from "@/constants";
|
||||
|
||||
interface AccordionProps {
|
||||
title: string;
|
||||
description: string;
|
||||
thumbnail: string;
|
||||
services: string;
|
||||
notes?: string;
|
||||
price: string;
|
||||
defaultOpen?: number;
|
||||
index: number;
|
||||
}
|
||||
|
||||
export default function Accordion({
|
||||
title,
|
||||
index,
|
||||
description,
|
||||
services,
|
||||
notes = "",
|
||||
thumbnail,
|
||||
price,
|
||||
defaultOpen,
|
||||
}: AccordionProps) {
|
||||
const [openIndex, setOpenIndex] = useState<number | null>(
|
||||
defaultOpen ?? null
|
||||
);
|
||||
|
||||
const toggle = (index: number) => {
|
||||
setOpenIndex(openIndex === index ? null : index);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="w-full space-y-4 overflow-hidden">
|
||||
<div key={index} className="p-4 bg-secondary rounded-2xl ">
|
||||
<button
|
||||
className="flex w-full items-center justify-between text-right h-full cursor-pointer"
|
||||
onClick={() => toggle(index)}
|
||||
>
|
||||
<span className="text-lg font-semibold text-white">{title}</span>
|
||||
<span
|
||||
className={` text-white transition-all duration-300 ${
|
||||
openIndex === index ? "rotate-90" : "-rotate-90"
|
||||
}`}
|
||||
>
|
||||
<ChevronLeftSvg size="20" />
|
||||
</span>
|
||||
</button>
|
||||
|
||||
<div>
|
||||
{openIndex === index && (
|
||||
<div className="bg-white p-10 mt-10 space-y-10">
|
||||
{thumbnail && (
|
||||
<div className="h-[600px] w-[80%] mx-auto relative border-[1px] border-neutral-200 rounded-2xl overflow-hidden">
|
||||
<Image
|
||||
src={`/packages/${thumbnail}`}
|
||||
fill
|
||||
className="object-contain"
|
||||
alt=""
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
{description && (
|
||||
<div
|
||||
className="overflow-hidden text-gray-600 mt-2 leading-relaxed text-base"
|
||||
dangerouslySetInnerHTML={{__html: description}}
|
||||
/>
|
||||
)}
|
||||
{services && (
|
||||
<>
|
||||
<h4 className="font-bold text-lg">
|
||||
خدمات قابل ارائه به بيمار شامل:
|
||||
</h4>
|
||||
<div
|
||||
className="overflow-hidden text-gray-600 leading-relaxed text-base packages_subpackages_list"
|
||||
dangerouslySetInnerHTML={{__html: services}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{price && (
|
||||
<>
|
||||
<h4 className="font-bold text-lg">قیمت پکیج ها:</h4>
|
||||
<div
|
||||
className="overflow-hidden text-gray-600 leading-relaxed text-base packages_subpackages_list"
|
||||
dangerouslySetInnerHTML={{__html: price}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
{notes && (
|
||||
<>
|
||||
<h4 className="font-bold text-lg">نکات مهم :</h4>
|
||||
<div
|
||||
className="overflow-hidden text-gray-600 leading-relaxed text-base "
|
||||
dangerouslySetInnerHTML={{__html: notes}}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
<>
|
||||
<h4 className="font-bold text-lg">
|
||||
رزرو نوبت و مشاوره رايگان با پزشك و كارشناس IPD :
|
||||
</h4>
|
||||
<div className="overflow-hidden text-gray-600 leading-relaxed text-base ">
|
||||
<div>ایمیل : <a href={`mailto:${default_info.email}`}>{default_info.email}</a></div>
|
||||
<div>واتساپ : <a href={`https://wa.me/${+default_info.phone_number}`}></a></div>
|
||||
</div>
|
||||
</>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
10
src/ui/components/global/Button.tsx
Normal file
10
src/ui/components/global/Button.tsx
Normal file
@@ -0,0 +1,10 @@
|
||||
import React from "react";
|
||||
interface ButtonProps {
|
||||
label: string;
|
||||
onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
|
||||
}
|
||||
export default function Button({label,onClick}: ButtonProps) {
|
||||
return (
|
||||
<button onClick={onClick} className="font-medium text-white bg-blue-primary rounded-xl flex items-center gap-x-4 px-2 py-1">{label}</button>
|
||||
);
|
||||
}
|
||||
14
src/ui/components/global/CustomLink.tsx
Normal file
14
src/ui/components/global/CustomLink.tsx
Normal file
@@ -0,0 +1,14 @@
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
interface CustomLinkProps {
|
||||
href: string;
|
||||
label: string;
|
||||
className?: string;
|
||||
}
|
||||
export default function CustomLink({href, label, className}: CustomLinkProps) {
|
||||
return (
|
||||
<Link href={href} className={className }>
|
||||
{label}
|
||||
</Link>
|
||||
);
|
||||
}
|
||||
80
src/ui/components/global/CustomSelect.tsx
Normal file
80
src/ui/components/global/CustomSelect.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
import React, { useMemo } from "react";
|
||||
import Select from "react-select";
|
||||
|
||||
export interface Option {
|
||||
value: string;
|
||||
label: string;
|
||||
}
|
||||
|
||||
interface CustomSelectProps {
|
||||
options: Option[];
|
||||
value?: string;
|
||||
onChange?: (value: string) => void;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
isSearchable?: boolean;
|
||||
isDisabled?: boolean;
|
||||
isClearable?: boolean;
|
||||
rtl?: boolean;
|
||||
}
|
||||
|
||||
const CustomSelect: React.FC<CustomSelectProps> = ({
|
||||
options,
|
||||
value,
|
||||
onChange,
|
||||
placeholder = "انتخاب کنید...",
|
||||
className = "",
|
||||
isSearchable = true,
|
||||
isDisabled = false,
|
||||
isClearable = false,
|
||||
rtl = true
|
||||
}) => {
|
||||
const selectedOption = useMemo(
|
||||
() => options.find((opt) => opt.value === value) ?? null,
|
||||
[value, options]
|
||||
);
|
||||
|
||||
return (
|
||||
<Select
|
||||
instanceId="custom-select"
|
||||
options={options}
|
||||
value={selectedOption}
|
||||
onChange={(opt) => onChange?.((opt as Option)?.value ?? "")}
|
||||
placeholder={placeholder}
|
||||
isSearchable={isSearchable}
|
||||
isDisabled={isDisabled}
|
||||
isClearable={isClearable}
|
||||
className={className}
|
||||
classNamePrefix="cs"
|
||||
isRtl={rtl}
|
||||
styles={{
|
||||
control: (base, state) => ({
|
||||
...base,
|
||||
padding: "6px 4px",
|
||||
borderRadius: "0.75rem",
|
||||
borderColor: state.isFocused ? "#3b82f6" : "#d1d5db",
|
||||
boxShadow: state.isFocused ? "0 0 0 1px #3b82f6" : "none",
|
||||
"&:hover": { borderColor: "#3b82f6" },
|
||||
backgroundColor: "transparent",
|
||||
}),
|
||||
menu: (base) => ({
|
||||
...base,
|
||||
zIndex: 9999,
|
||||
borderRadius: "0.75rem",
|
||||
}),
|
||||
option: (base, state) => ({
|
||||
...base,
|
||||
backgroundColor: state.isSelected
|
||||
? "#3b82f6"
|
||||
: state.isFocused
|
||||
? "#e5e7eb"
|
||||
: "white",
|
||||
color: state.isSelected ? "white" : "#111",
|
||||
})
|
||||
}}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export default CustomSelect;
|
||||
80
src/ui/components/global/dropdown.tsx
Normal file
80
src/ui/components/global/dropdown.tsx
Normal file
@@ -0,0 +1,80 @@
|
||||
"use client";
|
||||
import React, { useState} from "react";
|
||||
import ChevronLeftSvg from "../icons/ChevronLeftSvg";
|
||||
import {usePathname, useRouter, useSearchParams} from "next/navigation";
|
||||
import {site_languages} from "@/constants";
|
||||
|
||||
interface DropdownProps {
|
||||
defaultValue?: {label: string; value: string};
|
||||
options: {label: string; value: string}[];
|
||||
}
|
||||
|
||||
export default function Dropdown({
|
||||
defaultValue,
|
||||
options,
|
||||
}: DropdownProps) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
const [selected, setSelected] = useState<{label: string; value: string}>(
|
||||
defaultValue ?? options[0]
|
||||
);
|
||||
const router = useRouter();
|
||||
const pathname = usePathname();
|
||||
const searchParams = useSearchParams();
|
||||
|
||||
const handleChange = (entry: string) => {
|
||||
const target = options.find((option) => option.label === entry) || {
|
||||
label: "",
|
||||
value: "",
|
||||
};
|
||||
setSelected(target);
|
||||
|
||||
const segments = pathname.split("/").filter(Boolean);
|
||||
if (
|
||||
segments.length > 0 &&
|
||||
site_languages.map((language) => language.label).includes(segments[0])
|
||||
) {
|
||||
segments.shift();
|
||||
}
|
||||
|
||||
const newPath = `/${target.value}/${segments.join("/")}`;
|
||||
const search = searchParams.toString();
|
||||
router.push(newPath + (search ? `?${search}` : ""));
|
||||
};
|
||||
return (
|
||||
<button
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setIsOpen((t) => !t);
|
||||
}}
|
||||
className={` ${
|
||||
isOpen ? "rounded-t-xl" : "rounded-xl"
|
||||
} flex items-center gap-x-3 p-3 relative font-medium`}
|
||||
>
|
||||
<span className="text-white">{selected.label}</span>
|
||||
<span
|
||||
className={`transition-all text-white ${
|
||||
isOpen ? "rotate-90" : "-rotate-90"
|
||||
}`}
|
||||
>
|
||||
<ChevronLeftSvg size="10" />
|
||||
</span>
|
||||
<div
|
||||
className={`absolute top-full bg-blue-primary rounded-b-xl text-[#e6e6e6] p-3 z-20 w-full right-0 ${
|
||||
isOpen ? "block" : "hidden"
|
||||
}`}
|
||||
>
|
||||
<ul className="space-y-4">
|
||||
{options?.map((option) => (
|
||||
<li
|
||||
key={option.value}
|
||||
onClick={(e) => handleChange(e.currentTarget.innerHTML)}
|
||||
className="hover:text-white hover:cursor-pointer"
|
||||
>
|
||||
{option.label}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
26
src/ui/components/icons/ArrowLeftSvg.tsx
Normal file
26
src/ui/components/icons/ArrowLeftSvg.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {IconsProps} from "@/types/icons/icons.type";
|
||||
import React from "react";
|
||||
|
||||
export default function ArrowLeftSvg({
|
||||
size,
|
||||
width = "17",
|
||||
height = "17",
|
||||
color = "currentColor",
|
||||
}: IconsProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width={size ?? width}
|
||||
height={size ?? height}
|
||||
viewBox="0 0 17 17"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M4.325 9.5H16.5V7.5H4.325L9.925 1.9L8.5 0.5L0.5 8.5L8.5 16.5L9.925 15.1L4.325 9.5Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
37
src/ui/components/icons/BeautySvg.tsx
Normal file
37
src/ui/components/icons/BeautySvg.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
|
||||
export default function BeautySvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6677"
|
||||
x1="24"
|
||||
y1="0"
|
||||
x2="24"
|
||||
y2="48"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<path
|
||||
d="M30.4035 5.08497C30.9088 5.30778 31.1378 5.89807 30.915 6.40341L30 5.99998C30.915 6.40341 30.9151 6.40318 30.915 6.40341L30.9145 6.40457L30.9095 6.41599L30.8946 6.44948C30.8816 6.47865 30.8624 6.52139 30.8373 6.57695C30.7871 6.68808 30.7131 6.85056 30.6168 7.05845C30.424 7.47417 30.1417 8.07182 29.7815 8.80394C29.0613 10.2673 28.0274 12.2722 26.7725 14.4375C24.2893 18.7222 20.8478 23.8016 17.1779 26.4468L17.1762 26.4481C13.3194 29.2159 12.5743 32.2502 13.1976 34.4373C13.8393 36.6893 15.9969 38.3725 18.6437 38.3725H19.1156C19.4217 37.306 20.2196 36.275 21.5774 35.6419C23.1162 34.9243 25.2972 34.7469 28.2261 35.4267C28.7641 35.5515 29.099 36.0889 28.9741 36.6268C28.8493 37.1648 28.3119 37.4997 27.7739 37.3749C25.1029 36.7549 23.4172 36.9907 22.4227 37.4545C21.8795 37.7077 21.5215 38.0367 21.2969 38.3725H21.8726C24.4282 38.3725 26.5 40.4443 26.5 43H24.5C24.5 41.5489 23.3237 40.3725 21.8726 40.3725H18.6437C15.139 40.3725 12.1703 38.1304 11.2741 34.9854C10.3595 31.7759 11.6647 27.9421 16.0091 24.8239C19.3008 22.451 22.5625 17.7129 25.0421 13.4346C26.2687 11.3182 27.2812 9.35506 27.987 7.92083C28.3397 7.20413 28.6153 6.62058 28.8022 6.21731C28.8957 6.0157 28.967 5.85922 29.0146 5.75378C29.0384 5.70106 29.0563 5.6611 29.0681 5.63465L29.0812 5.60519L29.0849 5.59672C29.3078 5.09138 29.8981 4.86216 30.4035 5.08497Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<path
|
||||
d="M32.5289 39.8487C33.9392 38.9698 35.2367 37.0814 35.7557 34.9909C36.2866 32.8525 36.0417 30.3276 34.0958 28.3064L32.655 29.6935C34.0101 31.101 34.2236 32.8617 33.8147 34.509C33.3938 36.2042 32.3531 37.6016 31.4711 38.1513L32.5289 39.8487Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
37
src/ui/components/icons/BrainSurgerySvg.tsx
Normal file
37
src/ui/components/icons/BrainSurgerySvg.tsx
Normal file
@@ -0,0 +1,37 @@
|
||||
import React from "react";
|
||||
|
||||
export default function BrainSurgerySvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M55.4708 42.8871C57.6446 42.8871 59.7681 42.2961 61.5634 41.1913C63.3863 42.294 65.5376 42.8721 67.7329 42.8492L74.7062 40.5621C76.6712 39.102 78.0201 37.0779 78.5274 34.8289C79.0346 32.5796 78.6692 30.2417 77.4924 28.2062C76.3157 26.1707 74.3989 24.5612 72.063 23.6471C71.5296 21.4697 70.1861 19.5219 68.2554 18.1273L61.4484 15.9803H60.6821C59.1681 13.9892 56.895 12.5689 54.2951 11.9895L39.7014 11.25C37.2756 11.4317 34.9881 12.3436 33.2072 13.839C32.3657 13.6602 31.5043 13.5675 30.6397 13.5627C28.5463 13.5666 26.4988 14.1165 24.7446 15.1461C22.9903 16.1756 21.6041 17.6408 20.7534 19.3648L15.2084 22.905C13.8286 24.5899 13.0859 26.6299 13.0895 28.7239C13.0759 29.5997 13.205 30.4723 13.4727 31.3142C12.0179 33.0156 11.2357 35.1064 11.2502 37.2544C11.2467 39.7455 12.3027 42.1433 14.2008 43.9543C14.354 45.7378 15.0454 47.4497 16.2004 48.9045C17.3554 50.3593 18.9298 51.5019 20.7534 52.2083C22.8546 53.3955 24.6337 54.9923 25.9599 56.8808C27.2863 58.7694 28.1259 60.9021 28.4173 63.1217H42.7341V52.7608C42.7314 50.9213 43.3009 49.1179 44.3779 47.5551C45.4547 45.9924 46.9959 44.733 48.8269 43.9196C49.8564 43.5647 50.1097 43.0868 50.4201 42.5012C50.6269 42.111 50.8592 41.6728 51.3632 41.1913C51.8012 41.4608 52.1406 41.6998 52.4347 41.907C53.3471 42.5492 53.8269 42.8871 55.4708 42.8871ZM63.81 38.1467C64.8098 38.6874 65.9625 39.0131 67.1672 39.0771L72.8959 37.1981C73.9419 36.2878 74.6063 35.1591 74.8691 33.993C75.1644 32.6839 74.9608 31.3086 74.2459 30.072C73.5242 28.8236 72.2976 27.7549 70.6965 27.1284L68.8838 26.4191L68.4206 24.5284C68.1493 23.4208 67.4983 22.3508 66.486 21.4903L60.8711 19.7192H58.8227L57.6971 18.2391C56.805 17.0659 55.4289 16.1405 53.7589 15.7061L39.7687 14.9973C38.1718 15.1584 36.72 15.7751 35.6186 16.6999L34.2174 17.8764L32.4277 17.4962C31.8414 17.3716 31.2392 17.3061 30.633 17.3018C29.1891 17.3069 27.8025 17.6886 26.6426 18.3693C25.4812 19.0508 24.6236 19.9849 24.1162 21.0131L23.6533 21.9516L17.7929 25.6931C17.1526 26.6318 16.8377 27.6754 16.8395 28.7064L16.8396 28.7389L16.8391 28.7715C16.8318 29.2382 16.9003 29.7075 17.0463 30.1667L17.6786 32.1546L16.3229 33.7403C15.4275 34.7874 14.992 36.0129 15.0001 37.218L15.0002 37.2332L15.0002 37.2486C14.9982 38.6533 15.5901 40.0858 16.7894 41.2301L17.8157 42.2093L17.937 43.6224C18.0247 44.643 18.4224 45.6613 19.1374 46.5619C19.8557 47.4668 20.8719 48.2216 22.1081 48.7005L22.3614 48.7988L22.5982 48.9324C22.8724 49.0873 23.1424 49.2482 23.4081 49.4149L23.3964 49.4235C28.494 52.5336 30.657 57.0598 31.3912 59.3743H32.5387V45.6988L28.4076 42.0266L25.6035 44.8309C24.8713 45.5631 23.6841 45.5631 22.9519 44.8309C22.2197 44.0987 22.2197 42.9114 22.9519 42.1793L26.3115 38.8194L25.3035 33.2753L20.7362 30.9917C19.8099 30.5286 19.4346 29.4023 19.8977 28.476C20.3608 27.5499 21.4871 27.1744 22.4134 27.6375L26.8699 29.8659L32.3287 26.3921L30.6309 21.8642C30.2672 20.8946 30.7586 19.8139 31.7282 19.4501C32.6977 19.0866 33.7785 19.5778 34.1421 20.5474L35.9666 25.4128H37.9851L38.9492 23.4844L37.4205 19.9172C37.0125 18.9654 37.4535 17.8631 38.4052 17.4552C39.357 17.0473 40.4593 17.4882 40.8673 18.44L42.1837 21.5117L47.4112 22.4621L47.4328 22.4447L50.8114 19.7417C51.6201 19.0948 52.8 19.2259 53.4469 20.0346C54.0938 20.8431 53.9627 22.023 53.154 22.6699L50.8956 24.4768L53.3989 27.6954L54.3602 25.7732C54.6776 25.1379 55.3269 24.7367 56.0372 24.7367H60.0915C61.1271 24.7367 61.9665 25.5761 61.9665 26.6117C61.9665 27.6473 61.1271 28.4867 60.0915 28.4867H57.1959L56.6933 29.4921L59.8226 30.1875C59.9723 30.2209 60.1172 30.2723 60.2544 30.3409L62.9573 31.6924C63.8835 32.1553 64.2589 33.2816 63.7959 34.2079C63.3328 35.1341 62.2065 35.5095 61.2803 35.0464L58.7839 33.7982L52.9275 32.4968C52.5017 32.4021 52.122 32.1619 51.8542 31.8176L47.5639 26.3014L42.3639 25.356C42.2886 25.4181 42.2076 25.4747 42.1215 25.5253L41.0188 27.7303V28.791H43.1983C43.4893 28.791 43.7764 28.8589 44.0368 28.989L49.4426 31.692C50.3689 32.1551 50.7443 33.2813 50.2811 34.2075C49.818 35.1338 48.6917 35.5091 47.7656 35.046L42.7556 32.541H41.0188V35.3966C41.0188 36.432 40.1794 37.2716 39.1438 37.2716C38.1082 37.2716 37.2688 36.432 37.2688 35.3966V30.6804V30.666V30.6518V29.1628H34.9597L29.0509 32.9229L30.0611 38.4793L35.6595 43.4554C36.0596 43.8113 36.2887 44.3213 36.2887 44.8568V59.3743H38.9842V52.6881C38.9842 47.6222 41.814 44.5129 43.3596 43.0408C44.5957 41.8631 46.4527 40.8703 47.2267 40.5212C47.3805 40.1769 47.9049 39.2835 48.7721 38.4632C49.6393 37.6429 50.5397 36.7884 50.8815 36.4637C53.2026 37.7903 55.005 39.1223 55.005 39.1223C55.005 39.1223 57.4073 38.9904 58.4987 38.5511C59.3717 38.1996 60.8936 37.2229 61.5456 36.7785L63.81 38.1467Z"
|
||||
fill="url(#paint0_linear_51_6698)"
|
||||
/>
|
||||
<path d="M28.125 71.25H43.125V67.5H28.125V71.25Z" fill="#60A4F7" />
|
||||
<path d="M43.125 78.75H28.125V75H43.125V78.75Z" fill="#60A4F7" />
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6698"
|
||||
x1="45"
|
||||
y1="11.25"
|
||||
x2="45"
|
||||
y2="63.1217"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/ui/components/icons/CardiacSvg.tsx
Normal file
35
src/ui/components/icons/CardiacSvg.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
export default function CardiacSvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M19.3961 22.4777C16.6587 25.9612 15 30.7207 15 35.6897C15 38.5729 15.4959 41.3316 16.3688 43.9582H32.6535L39.006 32.6647L42.9756 46.5577L47.833 40.3125H60V44.0625H49.6671L41.3995 54.6922L37.869 42.3352L34.8465 47.7082H7.5V43.9582H12.4423C11.6819 41.3357 11.25 38.5747 11.25 35.6897C11.25 29.9235 13.1648 24.3382 16.4475 20.1607C19.7393 15.9717 24.4802 13.125 30.0585 13.125C36.6278 13.125 41.6233 16.8063 45 22.0009C48.3765 16.8066 53.3721 13.125 59.9415 13.125C65.5204 13.125 70.2613 15.9722 73.5529 20.1613C76.8355 24.3392 78.75 29.9244 78.75 35.6897C78.75 48.0319 70.2306 58.3385 62.1705 65.3737C58.0943 68.9315 54.027 71.7478 50.9828 73.6734C49.4588 74.6375 48.1862 75.3815 47.2907 75.8865C46.8428 76.139 46.4888 76.3322 46.2443 76.4632C46.1222 76.5289 46.0273 76.5789 45.9617 76.6132L45.8858 76.6528L45.8646 76.6637L45.8584 76.667L45.8563 76.668C45.8563 76.668 45.855 76.6687 45 75C44.1866 76.6894 44.1861 76.6892 44.1861 76.6892L44.1748 76.6837L44.1488 76.671L44.0541 76.6245C43.9727 76.5842 43.8548 76.5251 43.7033 76.448C43.4003 76.2935 42.9625 76.0657 42.4118 75.767C41.3108 75.1697 39.756 74.2873 37.9234 73.1377C34.2649 70.8427 29.4658 67.463 24.9529 63.1389C22.5456 60.8325 20.2074 58.2457 18.1642 55.3989C17.5604 54.5576 17.753 53.3861 18.5942 52.7824C19.4355 52.1786 20.607 52.3712 21.2108 53.2125C23.0942 55.8365 25.2716 58.251 27.5471 60.4312C31.8203 64.5253 36.3962 67.7529 39.9161 69.9609C41.6728 71.0629 43.1582 71.9057 44.2 72.4708C44.4956 72.6313 44.7555 72.7693 44.9753 72.8842C45.1168 72.8062 45.2749 72.7181 45.4487 72.62C46.2962 72.1421 47.5138 71.4305 48.9782 70.5043C51.9105 68.6494 55.812 65.9462 59.7045 62.5485C67.582 55.6729 75 46.3243 75 35.6897C75 30.7215 73.3416 25.962 70.6043 22.4782C67.876 19.0059 64.1502 16.875 59.9415 16.875C54.1238 16.875 49.6114 20.664 46.683 26.6284L45 30.0564L43.317 26.6284C40.3885 20.6636 35.8761 16.875 30.0585 16.875C25.8503 16.875 22.1244 19.0056 19.3961 22.4777ZM45 75L44.1861 76.6892L45.0261 77.0934L45.8563 76.668L45 75Z"
|
||||
fill="url(#paint0_linear_51_6649)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6649"
|
||||
x1="43.125"
|
||||
y1="13.125"
|
||||
x2="43.125"
|
||||
y2="77.0934"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/ui/components/icons/ChevronLeftSvg.tsx
Normal file
26
src/ui/components/icons/ChevronLeftSvg.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {IconsProps} from "@/types/icons/icons.type";
|
||||
import React from "react";
|
||||
|
||||
export default function ChevronLeftSvg({
|
||||
size,
|
||||
width = "13",
|
||||
height = "21",
|
||||
color = "currentColor",
|
||||
}: IconsProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width={size ?? width}
|
||||
height={size ?? height}
|
||||
viewBox="0 0 13 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M11.0403 21L13 19.1363L3.91932 10.5L13 1.86375L11.0403 1.71319e-07L2.82529e-06 10.5L11.0403 21Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
26
src/ui/components/icons/ChevronRightSvg.tsx
Normal file
26
src/ui/components/icons/ChevronRightSvg.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {IconsProps} from "@/types/icons/icons.type";
|
||||
import React from "react";
|
||||
|
||||
export default function ChevronRightSvg({
|
||||
size,
|
||||
width = "13",
|
||||
height = "21",
|
||||
color = "currentColor",
|
||||
}: IconsProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width={size ?? width}
|
||||
height={size ?? height}
|
||||
viewBox="0 0 13 21"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M1.95966 -1.73603e-06L1.67294e-06 1.86375L9.08068 10.5L1.62934e-07 19.1362L1.95966 21L13 10.5L1.95966 -1.73603e-06Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/ui/components/icons/DigestiveSvg.tsx
Normal file
35
src/ui/components/icons/DigestiveSvg.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
export default function DigestiveSvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M33.75 57.5757C32.0214 58.291 30.066 58.8025 27.5409 58.8025C24.0986 58.8025 22.9609 61.5557 21.7517 64.4819C20.3807 67.7999 18.9178 71.3399 13.8996 71.3399C4.45563 71.3399 6.78588 42.2773 12.4109 31.0273C18.036 19.7773 25.7334 18.8398 41.4735 18.8398C51.1153 18.8398 53.5603 20.3098 55.4546 21.4491C56.6529 22.1697 57.6307 22.7577 60.0701 22.7577C62.5884 22.7577 66.1142 22.0054 69.6399 21.2532C74.9286 20.1248 80.2172 18.9966 82.1059 20.407C85.2538 22.7577 75.81 39.9964 66.366 39.9964C61.5051 39.9964 58.5902 43.4811 55.761 46.8632C53.0936 50.052 50.5026 53.1495 46.4287 53.1495C42.5061 53.1495 39.9581 54.3839 37.5 55.699V74.1524H33.75V57.5757ZM16.2992 66.7609C15.8866 67.1835 15.2935 67.5899 13.8996 67.5899H13.8953C13.7966 67.5899 13.7204 67.5899 13.525 67.3973C13.2458 67.1224 12.831 66.5189 12.4288 65.377C11.6195 63.0797 11.2037 59.602 11.2541 55.4477C11.3552 47.1175 13.2904 37.6534 15.765 32.7043C18.2317 27.7708 20.8933 25.5021 24.4101 24.2464C28.2956 22.8591 33.5006 22.5898 41.4735 22.5898C42.0671 22.5898 42.6291 22.5957 43.161 22.6065C41.5052 24.7236 40.6029 27.0495 40.1188 29.0663C39.7309 30.6833 39.6022 32.1332 39.57 33.1815C39.5537 33.7075 39.5617 34.1372 39.5743 34.4428C39.5807 34.5957 39.5882 34.7177 39.5946 34.8057L39.6 34.8788L39.6028 34.9116L39.6058 34.9446L39.6069 34.9559L39.6075 34.9622C39.6075 34.9622 39.6077 34.9639 41.4733 34.7773C43.3391 34.5908 43.3391 34.5921 43.3391 34.5921L43.3348 34.5358C43.3311 34.4843 43.3258 34.4005 43.3211 34.2878C43.3117 34.0622 43.305 33.723 43.3181 33.2968C43.3446 32.4407 43.4503 31.254 43.7653 29.9413C44.3331 27.5755 45.5503 24.903 48.1211 22.9339C50.7096 23.265 51.8895 23.7672 52.5911 24.13C52.9056 24.2925 53.1714 24.4523 53.5316 24.6685L53.6398 24.7335C54.0259 24.9651 54.5527 25.2792 55.1711 25.56C56.5431 26.1829 58.0517 26.5077 60.0701 26.5077C62.0233 26.5077 64.2876 26.1525 66.4303 25.7432C67.7194 25.4968 69.135 25.1952 70.5011 24.904C71.375 24.7178 72.2295 24.5357 73.0168 24.3754C75.1691 23.937 77.0164 23.6173 78.4597 23.5249C78.5321 23.5202 78.6022 23.5163 78.6699 23.5129C78.1989 24.9932 77.2335 26.9616 75.8625 28.9665C74.4544 31.0257 72.7489 32.9322 70.976 34.2859C69.1695 35.6657 67.5965 36.2464 66.366 36.2464C59.7589 36.2464 55.8367 40.9311 53.2404 44.0322L52.9948 44.3254C51.5998 45.9912 50.5416 47.2547 49.3993 48.1785C48.3292 49.0439 47.4306 49.3995 46.4287 49.3995C42.6056 49.3995 39.7897 50.3877 37.5 51.4855V43.2148C37.5 42.4737 37.8656 41.7827 38.5003 41.2274C39.1704 40.641 39.9191 40.4023 40.3125 40.4023V36.6523C38.8309 36.6523 37.2358 37.351 36.0309 38.4053C34.8238 39.4615 33.8059 41.0554 33.7522 43.0495H24.201C19.7211 43.0495 14.3453 45.021 19.7211 48.9629C23.6207 51.8222 30.3487 49.5467 33.75 48.0812V53.4426C31.8396 54.4099 30.1035 55.0525 27.5409 55.0525C24.3529 55.0525 22.1256 56.5375 20.6434 58.5051C19.5534 59.952 18.8025 61.7849 18.265 63.097C18.2554 63.1204 18.2458 63.1439 18.2364 63.1669C18.1704 63.328 18.1076 63.4808 18.0479 63.6235C17.384 65.2099 16.8915 66.1544 16.2992 66.7609Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6677"
|
||||
x1="45.1117"
|
||||
y1="18.8398"
|
||||
x2="45.1117"
|
||||
y2="74.1524"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/ui/components/icons/EntSvg.tsx
Normal file
35
src/ui/components/icons/EntSvg.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
export default function EntSvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 90 90"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M44.9998 13.125C32.7328 13.125 22.7884 22.3592 22.7884 33.75H18.75C18.75 20.2881 30.5025 9.375 44.9998 9.375C59.4971 9.375 71.2496 20.2881 71.2496 33.75C71.2496 42.1898 66.6287 49.6264 59.6175 53.9987C54.8325 56.9828 51.0574 60.9516 51.0574 65.4587V65.625C51.0574 73.9093 43.8251 80.625 34.9037 80.625C25.9823 80.625 18.75 73.9093 18.75 65.625V61.875H22.7884V65.625C22.7884 71.8382 28.2126 76.875 34.9037 76.875C41.5948 76.875 47.019 71.8382 47.019 65.625V65.4587C47.019 58.9761 52.3258 54.0287 57.366 50.8856C63.3079 47.1801 67.2111 40.888 67.2111 33.75C67.2111 22.3592 57.2668 13.125 44.9998 13.125ZM35.7915 31.9116C36.51 28.7149 39.4731 26.25 43.125 26.25C47.3321 26.25 50.625 29.5213 50.625 33.4142H54.375C54.375 27.3225 49.2731 22.5 43.125 22.5C36.9769 22.5 31.875 27.3225 31.875 33.4142C31.875 36.4879 33.0726 38.9462 35.6603 40.3665C37.065 41.1375 38.0049 41.7928 38.5778 42.3188C38.7182 42.4476 38.8239 42.5571 38.9033 42.6471C38.5569 42.8106 37.9935 42.9966 37.1477 43.1584L37.8523 46.8416C39.1129 46.6005 40.2816 46.2416 41.169 45.6726C42.0949 45.079 42.9803 44.0507 42.8601 42.5811C42.7579 41.331 41.9432 40.3176 41.1137 39.5561C40.2278 38.7428 38.9964 37.9198 37.4648 37.0791C36.8618 36.7481 36.3893 36.3079 36.0741 35.6839C37.3729 35.7698 38.9739 35.9689 40.5508 36.4003C42.3191 36.8841 43.9206 37.623 45.0566 38.6935C46.1222 39.6975 46.8549 41.0584 46.8746 43.0568C46.6322 45.6101 46.0273 47.2588 45.3368 48.327C44.6554 49.3808 43.8351 49.9583 42.984 50.2931C42.0994 50.6413 41.1229 50.7484 40.1402 50.7484C39.6521 50.7484 39.1851 50.7225 38.7332 50.6936L38.5613 50.6826C38.1861 50.658 37.7766 50.6314 37.4321 50.6314C35.6516 50.6314 34.7498 52.0101 34.3333 52.8201C34.0449 53.3809 33.7603 54.1466 33.516 54.8042C33.4125 55.0825 33.3161 55.3414 33.2299 55.557C32.8744 56.4461 32.5294 57.0955 32.1143 57.523C31.7689 57.8788 31.3378 58.125 30.5837 58.125C29.5868 58.125 29.0694 57.9004 28.8066 57.7206C28.548 57.5438 28.386 57.3086 28.2786 57.0145C28.1638 56.7008 28.125 56.3505 28.125 56.0483C28.125 55.9037 28.1338 55.7865 28.1417 55.7125C28.1454 55.6759 28.1488 55.6511 28.1505 55.6403C28.1511 55.6365 28.1513 55.6345 28.1513 55.6345L28.1505 55.6403L28.1492 55.6466L28.1486 55.65C28.1484 55.651 28.1479 55.6536 26.3034 55.3165C24.459 54.9793 24.4588 54.9803 24.4586 54.9814L24.4583 54.9835L24.4575 54.988L24.4556 54.9983L24.4513 55.0245C24.4479 55.0444 24.4442 55.0688 24.4399 55.0978C24.4314 55.1556 24.4215 55.2315 24.4119 55.323C24.3928 55.5049 24.375 55.7537 24.375 56.0483C24.375 56.6243 24.4431 57.4448 24.7566 58.302C25.077 59.1788 25.6641 60.1146 26.6897 60.8158C27.7106 61.5143 29.0126 61.875 30.5837 61.875C32.3978 61.875 33.7858 61.1845 34.8047 60.1354C35.754 59.1578 36.3184 57.9336 36.7119 56.9492C36.8918 56.4994 37.0298 56.1246 37.1496 55.7985C37.3358 55.2923 37.4788 54.9036 37.6684 54.5344C37.6978 54.4774 37.7239 54.4298 37.7468 54.3904C37.9022 54.3979 38.0852 54.4097 38.3091 54.4241L38.4945 54.4361C38.9606 54.4658 39.5267 54.4984 40.1402 54.4984C41.3604 54.4984 42.8612 54.3715 44.3571 53.7827C45.8867 53.181 47.3503 52.1194 48.4858 50.3629C49.6041 48.6332 50.3428 46.326 50.6173 43.3091C50.6224 43.2527 50.625 43.1961 50.625 43.1393C50.625 40.0309 49.4372 37.6686 47.6282 35.9642C45.8751 34.3123 43.6241 33.3533 41.5403 32.7833C39.4399 32.2086 37.3689 31.9915 35.8436 31.9142C35.8262 31.9133 35.8089 31.9125 35.7915 31.9116ZM37.8606 54.2235C37.8606 54.2245 37.8549 54.2316 37.8435 54.2423C37.8548 54.228 37.8606 54.2228 37.8606 54.2235Z"
|
||||
fill="url(#paint0_linear_51_6719)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6719"
|
||||
x1="44.9998"
|
||||
y1="9.375"
|
||||
x2="44.9998"
|
||||
y2="80.625"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
59
src/ui/components/icons/HysterectomySvg.tsx
Normal file
59
src/ui/components/icons/HysterectomySvg.tsx
Normal file
@@ -0,0 +1,59 @@
|
||||
import React from "react";
|
||||
|
||||
export default function HysterectomySvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M6.25587 15.1285C5.76466 14.341 6.01569 13.4525 6.81625 12.724C7.20603 12.3693 7.65852 12.132 8.04887 12.0412C8.44855 11.9482 8.65047 12.0303 8.73192 12.0956C10.5383 13.5436 11.7076 13.9187 12.7265 14.0078C13.0164 14.0331 13.2354 14.0401 13.4139 14.0458C13.8586 14.0599 14.0515 14.0661 14.4605 14.3283L15.5401 12.6447C14.6269 12.0592 13.807 12.0415 13.2427 12.0293C13.115 12.0265 13.0004 12.0241 12.9007 12.0154C12.3679 11.9688 11.5622 11.8011 9.98283 10.5351C9.25847 9.95444 8.35213 9.91718 7.5956 10.0932C6.82974 10.2714 6.07806 10.6916 5.47019 11.2448C4.27545 12.3319 3.3573 14.2606 4.55893 16.187C5.17971 17.1821 5.86889 18.0365 6.50435 18.7285C6.59552 18.5574 6.71267 18.4007 6.85662 18.2619C7.2197 17.912 7.70794 17.7201 8.25956 17.6755C7.61731 17.0094 6.89203 16.1483 6.25587 15.1285Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M12.447 23.0879C12.3517 22.6573 12.0439 22.0735 11.455 21.5307C10.8661 20.9878 10.24 20.7108 9.78109 20.6306C9.52663 20.5861 9.39247 20.6068 9.33458 20.6242C9.31744 20.6791 9.2985 20.806 9.35136 21.0448C9.4467 21.4754 9.75448 22.0592 10.3434 22.602C10.9323 23.1448 11.5584 23.4218 12.0173 23.502C12.2717 23.5465 12.4059 23.5258 12.4638 23.5085C12.4809 23.4535 12.4999 23.3267 12.447 23.0879ZM13.9417 24.8708C15.044 23.8084 14.5753 21.6916 12.895 20.1427C11.2146 18.5939 8.95887 18.1995 7.85662 19.2619C6.75436 20.3243 7.22301 22.4411 8.90337 23.9899C10.5837 25.5388 12.8395 25.9331 13.9417 24.8708Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M41.7441 15.1285C42.2353 14.341 41.9843 13.4525 41.1837 12.724C40.794 12.3693 40.3415 12.132 39.9511 12.0412C39.5514 11.9482 39.3495 12.0303 39.2681 12.0956C37.4617 13.5436 36.2924 13.9187 35.2735 14.0078C34.9836 14.0331 34.7646 14.0401 34.5861 14.0458C34.1414 14.0599 33.9485 14.0661 33.5395 14.3283L32.4599 12.6447C33.3731 12.0592 34.193 12.0415 34.7573 12.0293C34.885 12.0265 34.9996 12.0241 35.0993 12.0154C35.6321 11.9688 36.4378 11.8011 38.0172 10.5351C38.7415 9.95444 39.6479 9.91718 40.4044 10.0932C41.1703 10.2714 41.9219 10.6916 42.5298 11.2448C43.7245 12.3319 44.6427 14.2606 43.4411 16.187C42.8072 17.2031 42.1021 18.0724 41.4556 18.7719C41.3615 18.5839 41.2369 18.4123 41.0809 18.2619C40.7305 17.9242 40.2635 17.7337 39.7354 17.6807C40.3789 17.0139 41.1063 16.151 41.7441 15.1285Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M35.4905 23.0879C35.5858 22.6573 35.8936 22.0735 36.4825 21.5307C37.0714 20.9878 37.6975 20.7108 38.1564 20.6306C38.4109 20.5861 38.545 20.6068 38.6029 20.6242C38.6201 20.6791 38.639 20.806 38.5861 21.0448C38.4908 21.4754 38.183 22.0592 37.5941 22.602C37.0052 23.1448 36.3791 23.4218 35.9202 23.502C35.6658 23.5465 35.5316 23.5258 35.4737 23.5085C35.4566 23.4535 35.4376 23.3267 35.4905 23.0879ZM33.9958 24.8708C32.8935 23.8084 33.3622 21.6916 35.0425 20.1427C36.7229 18.5939 38.9786 18.1995 40.0809 19.2619C41.1831 20.3243 40.7145 22.4411 39.0341 23.9899C37.3538 25.5388 35.098 25.9331 33.9958 24.8708Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.6615 19.2121C19.0946 20.1648 19.6455 20.9427 20.0524 21.3516C20.7975 22.1005 21.1419 23.3039 21.3451 24.4744C21.5576 25.6984 21.6533 27.1488 21.7307 28.602C21.746 28.8887 21.7605 29.1757 21.7751 29.4622C21.8354 30.651 21.8952 31.8308 22.003 32.9412C22.0987 33.9264 22.2286 34.8112 22.4144 35.5565C22.5438 35.4444 22.6841 35.325 22.8046 35.2323C22.9359 35.1312 23.0962 35.018 23.2732 34.9271C23.4413 34.8409 23.6997 34.7349 24.0101 34.7349C24.3268 34.7349 24.5873 34.8447 24.761 34.9399C24.9399 35.038 25.0959 35.1593 25.2196 35.2654C25.2597 35.2997 25.3008 35.3366 25.3422 35.3748C25.4633 34.7055 25.5308 33.9374 25.5657 33.0886C25.6023 32.1966 25.6021 31.2743 25.6018 30.3261C25.6017 29.8539 25.6016 29.3753 25.606 28.8909C25.619 27.4684 25.672 26.0202 25.9061 24.7409C26.1377 23.4749 26.5698 22.2355 27.4493 21.3516C28.0464 20.7516 28.7127 19.87 29.2168 18.8922C29.7261 17.9044 30.0252 16.9055 29.9983 16.0509C29.9732 15.2501 29.6681 14.5574 28.8742 14.0222C28.0237 13.4488 26.5251 13 24.0101 13C21.5094 13 20.0285 13.4845 19.183 14.0954C18.3806 14.6752 18.0506 15.4404 18.0054 16.316C17.9581 17.2306 18.2283 18.2592 18.6615 19.2121Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6677"
|
||||
x1="24"
|
||||
y1="11"
|
||||
x2="24"
|
||||
y2="38"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
35
src/ui/components/icons/OrthopedicSvg.tsx
Normal file
35
src/ui/components/icons/OrthopedicSvg.tsx
Normal file
@@ -0,0 +1,35 @@
|
||||
import React from "react";
|
||||
|
||||
export default function OrthopedicSvg() {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width="90"
|
||||
height="90"
|
||||
viewBox="0 0 48 48"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M20 4C20.5523 4 21 4.44772 21 5V13.3431C21 14.6692 20.4732 15.941 19.5355 16.8787L19.0317 17.3826C18.1384 18.2758 18.1384 19.7242 19.0317 20.6174C19.7279 21.3136 20.7914 21.4862 21.6721 21.0459L21.9145 20.9247C23.2273 20.2683 24.7727 20.2683 26.0855 20.9247L26.3279 21.0459C27.2086 21.4862 28.2721 21.3136 28.9683 20.6174C29.8616 19.7242 29.8616 18.2758 28.9683 17.3826L28.4645 16.8787C27.5268 15.941 27 14.6692 27 13.3431V5C27 4.44772 27.4477 4 28 4C28.5523 4 29 4.44772 29 5V6.70355C36.5086 8.87023 42 15.7938 42 24C42 32.2062 36.5086 39.1298 29 41.2965V43C29 43.5523 28.5523 44 28 44C27.4477 44 27 43.5523 27 43V34.6569C27 33.3308 27.5268 32.059 28.4645 31.1213L28.9683 30.6174C29.8616 29.7242 29.8616 28.2758 28.9683 27.3826C28.2721 26.6864 27.2086 26.5138 26.3279 26.9541L26.0855 27.0753C24.7727 27.7317 23.2273 27.7317 21.9145 27.0753L21.6721 26.9541C20.7914 26.5138 19.7279 26.6864 19.0317 27.3826C18.1384 28.2758 18.1384 29.7242 19.0317 30.6174L19.5355 31.1213C20.4732 32.059 21 33.3308 21 34.6569V43C21 43.5523 20.5523 44 20 44C19.4477 44 19 43.5523 19 43V41.2965C11.4914 39.1298 6 32.2062 6 24C6 15.7938 11.4914 8.87023 19 6.70355V5C19 4.44772 19.4477 4 20 4ZM19 8.79677C12.6121 10.8964 8 16.9096 8 24C8 31.0905 12.6121 37.1037 19 39.2033V34.6569C19 33.8612 18.6839 33.0981 18.1213 32.5355L17.6174 32.0317C15.9431 30.3573 15.9431 27.6427 17.6174 25.9683C18.9224 24.6634 20.9159 24.3399 22.5665 25.1652L22.8089 25.2864C23.5587 25.6613 24.4413 25.6613 25.1911 25.2864L25.4335 25.1652C27.0841 24.3399 29.0776 24.6634 30.3826 25.9683C32.0569 27.6427 32.0569 30.3573 30.3826 32.0317L29.8787 32.5355C29.3161 33.0981 29 33.8612 29 34.6569V39.2033C35.3879 37.1037 40 31.0905 40 24C40 16.9096 35.3879 10.8964 29 8.79677V13.3431C29 14.1388 29.3161 14.9019 29.8787 15.4645L30.3826 15.9683C32.0569 17.6427 32.0569 20.3573 30.3826 22.0317C29.0776 23.3366 27.0841 23.6601 25.4335 22.8348L25.1911 22.7136C24.4413 22.3387 23.5587 22.3387 22.8089 22.7136L22.5665 22.8348C20.9159 23.6601 18.9224 23.3366 17.6174 22.0317C15.9431 20.3573 15.9431 17.6427 17.6174 15.9683L18.1213 15.4645C18.6839 14.9019 19 14.1388 19 13.3431V8.79677Z"
|
||||
fill="url(#paint0_linear_51_6677)"
|
||||
/>
|
||||
<defs>
|
||||
<linearGradient
|
||||
id="paint0_linear_51_6677"
|
||||
x1="24"
|
||||
y1="4"
|
||||
x2="24"
|
||||
y2="44"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
>
|
||||
<stop stopColor="#043D82" />
|
||||
<stop offset="1" stopColor="#60A4F7" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
9
src/ui/components/icons/SelectDoctor.tsx
Normal file
9
src/ui/components/icons/SelectDoctor.tsx
Normal file
@@ -0,0 +1,9 @@
|
||||
import React from 'react'
|
||||
|
||||
export default function SelectDoctor() {
|
||||
return (
|
||||
<>
|
||||
|
||||
</>
|
||||
)
|
||||
}
|
||||
26
src/ui/components/icons/TelephoneSvg.tsx
Normal file
26
src/ui/components/icons/TelephoneSvg.tsx
Normal file
@@ -0,0 +1,26 @@
|
||||
import {IconsProps} from "@/types/icons/icons.type";
|
||||
import React from "react";
|
||||
|
||||
export default function TelephoneSvg({
|
||||
size = "24",
|
||||
width,
|
||||
height,
|
||||
color = "currentColor",
|
||||
}: IconsProps) {
|
||||
return (
|
||||
<>
|
||||
<svg
|
||||
width={size ?? width}
|
||||
height={size ?? height}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M19.95 21C20.25 21 20.5 20.9 20.7 20.7C20.9 20.5 21 20.25 21 19.95V15.9C21 15.6833 20.925 15.4875 20.775 15.3125C20.625 15.1375 20.4333 15.0167 20.2 14.95L16.75 14.25C16.5167 14.2167 16.2792 14.2375 16.0375 14.3125C15.7958 14.3875 15.6 14.5 15.45 14.65L13.1 17C12.4667 16.6333 11.8667 16.2292 11.3 15.7875C10.7333 15.3458 10.1917 14.8667 9.675 14.35C9.125 13.8167 8.62083 13.2625 8.1625 12.6875C7.70417 12.1125 7.30833 11.5167 6.975 10.9L9.4 8.45C9.53333 8.31667 9.625 8.15833 9.675 7.975C9.725 7.79167 9.73333 7.56667 9.7 7.3L9.05 3.8C9.01667 3.58333 8.90833 3.39583 8.725 3.2375C8.54167 3.07917 8.33333 3 8.1 3H4.05C3.75 3 3.5 3.1 3.3 3.3C3.1 3.5 3 3.75 3 4.05C3 6.13333 3.45417 8.19167 4.3625 10.225C5.27083 12.2583 6.55833 14.1083 8.225 15.775C9.89167 17.4417 11.7417 18.7292 13.775 19.6375C15.8083 20.5458 17.8667 21 19.95 21ZM6.05 9C5.76667 8.35 5.55 7.69167 5.4 7.025C5.25 6.35833 5.13333 5.68333 5.05 5H7.25L7.7 7.35L6.05 9ZM15 17.9L16.65 16.25L19 16.75V18.95C18.3167 18.9 17.6417 18.7833 16.975 18.6C16.3083 18.4167 15.65 18.1833 15 17.9Z"
|
||||
fill={color}
|
||||
/>
|
||||
</svg>
|
||||
</>
|
||||
);
|
||||
}
|
||||
66
src/ui/components/menu/Menu.tsx
Normal file
66
src/ui/components/menu/Menu.tsx
Normal file
@@ -0,0 +1,66 @@
|
||||
import React from "react";
|
||||
import CustomLink from "../global/CustomLink";
|
||||
import ChevronLeftSvg from "../icons/ChevronLeftSvg";
|
||||
import { getHref } from "@/utils/functions";
|
||||
import { MenuItemsTypes } from "@/types/global/menu.type";
|
||||
|
||||
interface MenuProps {
|
||||
lang: string;
|
||||
direction?: "horizontal" | "vertical";
|
||||
items: MenuItemsTypes[];
|
||||
}
|
||||
export default function Menu({
|
||||
lang,
|
||||
direction = "horizontal",
|
||||
items,
|
||||
}: MenuProps) {
|
||||
|
||||
return (
|
||||
<nav className="flex items-center h-full">
|
||||
<ul
|
||||
className={`h-full text-primary flex lg:text-base relative items-center text-blue-primary ${
|
||||
direction === "horizontal" ? "flex-row gap-x-6" : "flex-col gap-y-4"
|
||||
}`}
|
||||
>
|
||||
{items.map((link) => (
|
||||
<li
|
||||
key={link.id}
|
||||
className="group cursor-pointer hover:text-secondary flex items-center text-menu-colors relative !h-full after:hidden hover:after:inline-block after:w-full after:h-1 after:bg-secondary after:absolute after:bottom-0 after:left-0 after:rounded-t-xl"
|
||||
>
|
||||
<span className="flex items-center gap-x-2 !h-full ">
|
||||
<CustomLink
|
||||
href={getHref(link.href,lang)}
|
||||
label={link.label[lang]}
|
||||
className={`font-medium transition-all `}
|
||||
/>
|
||||
|
||||
{link.sub.length > 0 ? (
|
||||
<span className="-rotate-90 group-hover:rotate-90 transition-all duration-300">
|
||||
<ChevronLeftSvg size="10" />
|
||||
</span>
|
||||
) : (
|
||||
""
|
||||
)}
|
||||
</span>
|
||||
{link.sub.length > 0 && (
|
||||
<ul className="hidden group-hover:block absolute top-full z-20 bg-white w-64 shadow-inner space-y-5 p-3 rounded-b-xl">
|
||||
{link.sub.map((submenu) => (
|
||||
<li
|
||||
key={submenu.id}
|
||||
className="w-full text-blue-primary hover:font-medium p-1 px-3"
|
||||
>
|
||||
<CustomLink
|
||||
href={getHref(submenu.href,lang)}
|
||||
label={submenu.label[lang]}
|
||||
className="text-sm font-medium text-black hover:text-secondary transition-all"
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
42
src/ui/components/menu/MobileMenu.tsx
Normal file
42
src/ui/components/menu/MobileMenu.tsx
Normal file
@@ -0,0 +1,42 @@
|
||||
"use client";
|
||||
import React, {useState} from "react";
|
||||
|
||||
export default function MobileMenu() {
|
||||
const [open, setOpen] = useState(false);
|
||||
console.log(open);
|
||||
return (
|
||||
<>
|
||||
<button
|
||||
type="button"
|
||||
className="lg:hidden block text-blue-primary"
|
||||
onClick={()=>setOpen(!open)}
|
||||
>
|
||||
<svg
|
||||
stroke="currentColor"
|
||||
fill="none"
|
||||
strokeWidth="0"
|
||||
viewBox="0 0 15 15"
|
||||
height="35"
|
||||
width="35"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z"
|
||||
fill="currentColor"
|
||||
></path>
|
||||
</svg>
|
||||
</button>
|
||||
{open && (
|
||||
<div className="lg:hidden fixed top-0 right-0 z-50 bg-black/30 backdrop-blur-sm w-full h-full" onClick={(e)=>{
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
setOpen(!open)
|
||||
}}>
|
||||
<div className={`absolute top-0 right-0 h-full ${open ? 'w-[80%]' : 'w-0'} bg-white transition-all duration-300`}></div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
103
src/ui/components/top-menu/TopMenu.tsx
Normal file
103
src/ui/components/top-menu/TopMenu.tsx
Normal file
@@ -0,0 +1,103 @@
|
||||
"use client";
|
||||
import React, {useEffect, useState} from "react";
|
||||
import Menu from "../menu/Menu";
|
||||
import {DefaultMenuLinks, Menu_buttons} from "@/constants/menu/menu.const";
|
||||
import Link from "next/link";
|
||||
import Image from "next/image";
|
||||
import CustomLink from "../global/CustomLink";
|
||||
import {languages_types} from "@/types";
|
||||
import MobileMenu from "../menu/MobileMenu";
|
||||
import {getHref} from "@/utils/functions";
|
||||
|
||||
export default function TopMenu({lang}: {lang: string}) {
|
||||
const [isSticky, setIsSticky] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleScroll = () => {
|
||||
if (window.scrollY > 50) {
|
||||
setIsSticky(true);
|
||||
} else {
|
||||
setIsSticky(false);
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener("scroll", handleScroll);
|
||||
return () => window.removeEventListener("scroll", handleScroll);
|
||||
}, []);
|
||||
return (
|
||||
<div
|
||||
className={`w-full z-50 transition-all duration-300 container flex lg:justify-around justify-between items-center
|
||||
${
|
||||
isSticky
|
||||
? "h-[80px] lg:fixed top-0 custom-shadow backdrop-blur-3xl bg-white/80"
|
||||
: "lg:h-[120px] h-[60px] bg-white relative"
|
||||
}`}
|
||||
// className="bg-white container sticky top-0 z-30"
|
||||
>
|
||||
{/* <div className="top-0 absolute h-[40px] bg-radial bg-secondary/30 backdrop-blur-2xl w-full">
|
||||
|
||||
</div> */}
|
||||
<div className="lg:w-[210px] flex gap-x-10 transition-all duration-300 items-center ">
|
||||
<Link href={"/"} className="flex items-center gap-x-2">
|
||||
<div
|
||||
className={`relative ${
|
||||
isSticky
|
||||
? " h-[70px] w-[70px]"
|
||||
: "lg:h-[90px] h-[50px] lg:w-[97px] w-[40px]"
|
||||
}`}
|
||||
>
|
||||
<Image
|
||||
loading="lazy"
|
||||
src="/shomalhospital-ipd-logo.png"
|
||||
fill
|
||||
alt="shomal hospital"
|
||||
style={{color: "transparent", fill: "red", objectFit: "fill"}}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<MobileMenu />
|
||||
<div className="lg:grid hidden grid-cols-12 gap-x-1 w-full h-full items-center">
|
||||
<div className="col-span-8 flex items-center justify-center w-full h-full">
|
||||
<Menu
|
||||
lang={lang}
|
||||
direction="horizontal"
|
||||
items={DefaultMenuLinks}
|
||||
/>
|
||||
</div>
|
||||
<div className="col-span-4 flex items-center justify-center gap-x-5">
|
||||
{/* <a
|
||||
href="tel:0114492"
|
||||
className="text-white relative group flex items-end hover:bg-blue-primary p-3 hover:text-white transition-all rounded-xl"
|
||||
>
|
||||
<span className="hidden group-hover:block absolute left-3 h-[24px] w-[24px] animate-ping rounded-xl bg-white opacity-35"></span>
|
||||
|
||||
<span className="font-bold text-xl">
|
||||
{toPersianNumber("011-4492")}
|
||||
</span>
|
||||
<span className="group-hover:animate-pulse">
|
||||
<TelephoneSvg size="28" />
|
||||
</span>
|
||||
</a> */}
|
||||
{/* <Dropdown options={site_languages} /> */}
|
||||
|
||||
<CustomLink
|
||||
href={getHref("/contact-us#request_accept", lang)}
|
||||
label={Menu_buttons.request_to_accept[lang as languages_types] || ""}
|
||||
className={`bg-blue-primary text-white rounded-full ${
|
||||
isSticky ? "py-4 px-4" : "py-4 px-6"
|
||||
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
|
||||
/>
|
||||
<CustomLink
|
||||
href={getHref("/upload-documents", lang)}
|
||||
label={Menu_buttons.upload_document[lang as languages_types] || ""}
|
||||
className={`bg-secondary text-white rounded-full ${
|
||||
isSticky ? "py-4 px-4" : "py-4 px-6"
|
||||
} text-sm font-semibold shadow-lg flex items-center whitespace-nowrap shadow-neutral-300 hover:shadow-none transition-all duration-200`}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user