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

feat(doctor-avatar): enhance DoctorAvatar component with initials formatting and integrate into ItemAppointment

Browse Source
This commit is contained in:
hamed
2026-06-21 12:07:14 +03:30
parent 7462e69641
commit 93b2710ae1
2 changed files with 8 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/component/DoctorAvatar.js
+6 -3
View File
@@ -3,10 +3,11 @@ import { imageUrl } from "@/helper";
function getInitials(name) { function getInitials(name) {
if (!name) return ""; if (!name) return "";
const parts = name.trim().split(/\s+/).filter(Boolean); const cleanName = name.trim().replace(/^دکتر\s+/, "");
const parts = cleanName.split(/\s+/).filter(Boolean);
if (parts.length === 0) return ""; if (parts.length === 0) return "";
if (parts.length === 1) return parts[0][0]; if (parts.length === 1) return parts[0][0];
return `${parts[0][0]}${parts[1][0]}`; return `${parts[0][0]} - ${parts[1][0]}`;
} }
function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) { function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) {
@@ -18,7 +19,9 @@ function DoctorAvatar({ doctor, size = 72, className = "", priority = false }) {
style={{ width: size, height: size }} style={{ width: size, height: size }}
className={`flex items-center justify-center rounded-full bg-[#F8F8FF] text-[#3B3B3B] font-bold select-none ${className}`} className={`flex items-center justify-center rounded-full bg-[#F8F8FF] text-[#3B3B3B] font-bold select-none ${className}`}
> >
<span style={{ fontSize: size * 0.32 }}>{getInitials(doctor?.name)}</span> <span style={{ fontSize: size * 0.22 }} className="whitespace-nowrap">
{getInitials(doctor?.name)}
</span>
</div> </div>
); );
} }
components/doctor/appointmentList/ItemAppointment.js
+2 -9
View File
@@ -3,9 +3,8 @@ import TextLoading from "@/app/component/loading/Text";
import ArrowLeftD from "@/components/icons/ArrowLeftD"; import ArrowLeftD from "@/components/icons/ArrowLeftD";
import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn"; import GreenCalendarTurn from "@/components/icons/GreenCalendarTurn";
import { Button } from "@mui/material"; import { Button } from "@mui/material";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { imageUrl } from "@/helper"; import DoctorAvatar from "@/app/component/DoctorAvatar";
function ItemAppointment({ turn, loading, doctorSlug }) { function ItemAppointment({ turn, loading, doctorSlug }) {
return ( return (
@@ -17,13 +16,7 @@ function ItemAppointment({ turn, loading, doctorSlug }) {
<span className="block w-full h-px bg-[#EFEFEF] my-4"></span> <span className="block w-full h-px bg-[#EFEFEF] my-4"></span>
<div className="flex items-center justify-start gap-3"> <div className="flex items-center justify-start gap-3">
<CircularLoading width={56} height={56} loading={loading}> <CircularLoading width={56} height={56} loading={loading}>
<Image <DoctorAvatar doctor={turn} size={56} />
className="rounded-full"
width={56}
height={56}
alt="doctor"
src={imageUrl(turn?.img?.[0]?.url)}
/>
</CircularLoading> </CircularLoading>
<div className="flex flex-col items-start justify-center gap-2"> <div className="flex flex-col items-start justify-center gap-2">
<TextLoading width={60} height={15} loading={loading}> <TextLoading width={60} height={15} loading={loading}>