Every address started collapsed, so a doctor with one office made the visitor click before seeing where that office is — the thing they came to the section for. The first entry now renders expanded; the rest stay closed so a long list does not push the page down. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
36 lines
1.3 KiB
JavaScript
36 lines
1.3 KiB
JavaScript
import CustomLoading from "@/app/component/loading/Custom";
|
|
import Item from "./Item";
|
|
|
|
function Locations({ addresses, bookableAddressUuids = [] }) {
|
|
if (!addresses?.length) return null;
|
|
|
|
const bookable = new Set(bookableAddressUuids);
|
|
return (
|
|
<div>
|
|
<p className="text-[#525252] text-[16px] md:text-[18px] lg:text-[20px] font-bold">
|
|
موقعیت مکانی{" "}
|
|
</p>
|
|
<ul className="flex w-full mt-[24px] flex-col justify-center items-start">
|
|
{addresses.map((item, idx) => (
|
|
<CustomLoading key={idx} width="full" height={40}>
|
|
<li className="w-full">
|
|
{/* اولین محل از ابتدا باز است: بازدیدکننده معمولاً یک آدرس بیشتر
|
|
نمیخواهد و بستنِ همه یعنی یک کلیک اضافه برای همان یک آدرس. */}
|
|
<Item
|
|
data={item}
|
|
bookable={bookable.has(item.uuid)}
|
|
defaultOpen={idx === 0}
|
|
/>
|
|
{addresses.length > idx + 1 && (
|
|
<span className="w-full h-px bg-[#EFEFEF] block my-[12px] md:my-[14px] lg:my-[16px]"></span>
|
|
)}
|
|
</li>
|
|
</CustomLoading>
|
|
))}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default Locations;
|