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

design dark mode list page panel

Browse Source
This commit is contained in:
Ehsan
2024-09-28 19:35:19 +03:30
parent 92945e60e4
commit 8e165bb2a7
4 changed files with 27 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/layoutPanel/sidebar/Links.js
+8 -8
View File
@@ -50,14 +50,14 @@ function Links({ open }) {
</div> </div>
<p <p
className={` className={`
transition-all duration-500 text-sidebar transition-all duration-500 text-sidebar
${open ? "opacity-100" : "md:opacity-0"} ${open ? "opacity-100" : "md:opacity-0"}
${ ${
item.src === pathname item.src === pathname
? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold" ? "!text-[#FAFAFA] dark:!text-[#5559CE] !font-bold"
: "!text-[#525252] dark:!text-[#A1A1A1] !font-medium" : "!text-[#525252] dark:!text-[#A1A1A1] !font-medium"
} }
`} `}
> >
{item.name} {item.name}
</p> </p>
components/panel/ColTable.js
+16 -12
View File
@@ -4,11 +4,11 @@ import Image from "next/image";
function ColTable({ data, loading }) { function ColTable({ data, loading }) {
return ( return (
<ul className="flex md:hidden flex-col gap-[16px]"> <ul className="grid grid-cols-1 sm:grid-cols-2 md:hidden flex-col gap-[16px]">
{data.map((item, idx) => ( {data.map((item, idx) => (
<li <li
key={idx} key={idx}
className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)]" className="bg-[#FFF] p-[12px] rounded-[8px] shadow-[0px_1px_24.8px_0px_rgba(204,204,204,0.18)] dark:shadow-transparent dark:bg-[#222433]"
> >
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<div className="flex items-center justify-start gap-[8px] !text-nowrap"> <div className="flex items-center justify-start gap-[8px] !text-nowrap">
@@ -16,42 +16,46 @@ function ColTable({ data, loading }) {
<Image src={item.image} alt="doctor" height={32} width={32} /> <Image src={item.image} alt="doctor" height={32} width={32} />
</CircularLoading> </CircularLoading>
<TextLoading width={40} height={18} loading={loading}> <TextLoading width={40} height={18} loading={loading}>
{item.name} <p className="text-[#616161] dark:text-[#D7D8ED]">
{item.name}
</p>
</TextLoading> </TextLoading>
</div> </div>
<TextLoading width={105} height={18} loading={loading}> <TextLoading width={105} height={18} loading={loading}>
<p className="px-[8px] py-[4px] text-[#F17732] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]"> <p className="px-[8px] py-[4px] text-[#F17732] dark:bg-[#4E2E39] dark:text-[#FF5450] text-[14px] font-medium bg-[rgba(255,216,197,0.50)] rounded-[4px]">
تعداد نوبت: {item.number_of_turns} تعداد نوبت: {item.number_of_turns}
</p> </p>
</TextLoading> </TextLoading>
</div> </div>
<div className="flex flex-col mt-[16px]"> <div className="flex flex-col mt-[16px]">
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal">تخصص:</p> <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
تخصص:
</p>
<TextLoading width={90} height={18} loading={loading}> <TextLoading width={90} height={18} loading={loading}>
<p className="text-[#616161] text-[14px] font-medium"> <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
{item.expertise} {item.expertise}
</p> </p>
</TextLoading> </TextLoading>
</div> </div>
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span> <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal"> <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
تاریخ نوبت: تاریخ نوبت:
</p> </p>
<TextLoading width={85} height={18} loading={loading}> <TextLoading width={85} height={18} loading={loading}>
<p className="text-[#616161] text-[14px] font-medium"> <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
{item.date} {item.date}
</p> </p>
</TextLoading> </TextLoading>
</div> </div>
<span className="block h-px w-full bg-[#EFEFEF] my-[12px]"></span> <span className="block h-px w-full bg-[#EFEFEF] dark:bg-[#343645] my-[12px]"></span>
<div className="flex items-center justify-between"> <div className="flex items-center justify-between">
<p className="text-[#7E7E7E] text-[14px] font-normal"> <p className="text-[#7E7E7E] dark:text-[#A1A1A1] text-[14px] font-normal">
ساعت نوبت: ساعت نوبت:
</p> </p>
<TextLoading width={60} height={18} loading={loading}> <TextLoading width={60} height={18} loading={loading}>
<p className="text-[#616161] text-[14px] font-medium"> <p className="text-[#616161] dark:text-[#A1A1A1] text-[14px] font-medium">
{item.hour} {item.hour}
</p> </p>
</TextLoading> </TextLoading>
components/panel/dashboard/Cards.js
+1 -1
View File
@@ -29,7 +29,7 @@ function Cards({ data, loading }) {
]; ];
return ( return (
<ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-[16px]"> <ul className="flex flex-wrap flex-col sm:flex-row items-center justify-center gap-[32px] mx-0 sm:mx-[16px]">
{list.map((item, idx) => ( {list.map((item, idx) => (
<li <li
className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border className="flex min-w-[226px] w-full sm:w-auto flex-col py-[16px] md:py-[18px] px-[12px] gap-[8px] rounded-[8px] border
components/panel/dashboard/list/index.js
+2 -2
View File
@@ -5,8 +5,8 @@ import ColTable from "../../ColTable";
function List({ data, loading }) { function List({ data, loading }) {
return ( return (
<div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-[#222433] dark:border-transparent"> <div className="rounded-[8px] border overflow-hidden border-solid w-full border-transparent md:border-[#EFEFEF] bg-transparent md:bg-[#FFF] dark:bg-transparent md:dark:bg-[#222433] dark:border-transparent">
<div className="flex items-center justify-between p-[16px]"> <div className="hidden items-center justify-between p-[16px] md:dark:flex">
<p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]"> <p className="text-[#525252] text-[14px] md:text-[16px] font-bold dark:text-[#D7D8ED]">
لیست نوبت های پزشکان لیست نوبت های پزشکان
</p> </p>