hamedandClaude Opus 5
51c21938eb
components/appointment/ had every colour hard-coded, so the flow rendered identically in either theme even after the wiring was fixed. It now reads from CSS custom properties. These are not new colours. The :root values are byte-for-byte the hex codes that were already in the components — twenty-one files, mapped one to one — so light mode is unchanged. The dark values are derived from those same colours: surfaces and borders darkened, text inverted, and the two brand colours (the indigo and the orange) lightened rather than replaced, because both lose contrast against a dark surface at their original values. Verified in a headless browser with prefers-color-scheme forced dark: data-theme lands on <html> and --ap-surface resolves to #1b1b20 rather than white. Six one-off colours remain hard-coded — a success green, an error red and similar — each used exactly once and none of them a surface. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
87 lines
3.5 KiB
JavaScript
87 lines
3.5 KiB
JavaScript
"use client";
|
||
|
||
import moment from "moment-jalaali";
|
||
|
||
function nextAvailableLabel(timestamp) {
|
||
if (!timestamp) return null;
|
||
return `اولین نوبت آزاد: ${moment.unix(timestamp).format("jD jMMMM")}`;
|
||
}
|
||
|
||
/**
|
||
* انتخاب محل نوبتدهی — پیش از انتخاب سرویس و روز.
|
||
*
|
||
* فهرست از سمت سرور بر اساس زودترین نوبت آزاد مرتب شده، پس اولین آیتم پیشفرض
|
||
* درست است و اینجا دوباره مرتب نمیشود.
|
||
*/
|
||
function LocationSelect({ locations = [], selected, onSelect }) {
|
||
const anyOpen = locations.some((l) => l.available_on_date !== false);
|
||
|
||
return (
|
||
<div className="w-full max-w-[520px] mx-auto">
|
||
<h2 className="text-[16px] font-bold text-[var(--ap-text)] mb-4">۱. انتخاب محل نوبتدهی</h2>
|
||
|
||
{!anyOpen && locations.length > 0 && (
|
||
<p className="mb-3 text-[13px] text-[var(--ap-accent-strong)]">
|
||
در روز انتخابشده هیچکدام از محلها نوبتدهی ندارند. روز دیگری را انتخاب کنید.
|
||
</p>
|
||
)}
|
||
|
||
<div className="flex flex-col gap-2">
|
||
{locations.map((location) => {
|
||
const key = location.clinic_uuid ?? location.location_uuid ?? "personal";
|
||
const active =
|
||
(selected?.clinic_uuid ?? null) === (location.clinic_uuid ?? null);
|
||
const nextLabel = nextAvailableLabel(location.next_available_at);
|
||
// null یعنی روزی انتخاب نشده؛ فقط false به معنی «این روز بسته است».
|
||
const closed = location.available_on_date === false;
|
||
|
||
return (
|
||
<button
|
||
key={key}
|
||
type="button"
|
||
disabled={closed}
|
||
onClick={() => !closed && onSelect(location)}
|
||
className={`w-full text-right p-[16px] rounded-[8px] border border-solid transition-colors ${
|
||
closed
|
||
? "border-[var(--ap-border)] bg-[var(--ap-surface-2)] opacity-60 cursor-not-allowed"
|
||
: active
|
||
? "border-[var(--ap-primary)] bg-[rgba(85,89,206,0.06)]"
|
||
: "border-[var(--ap-border)] bg-[var(--ap-surface)] hover:border-[#C7C9EC]"
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between gap-[8px]">
|
||
<p className="text-[14px] md:text-[16px] font-bold text-[var(--ap-text)]">
|
||
{location.title}
|
||
</p>
|
||
{location.type === "clinic" && (
|
||
<span className="text-[11px] text-[var(--ap-primary)] bg-[rgba(85,89,206,0.10)] rounded-[4px] px-[6px] py-[2px]">
|
||
کلینیک
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{location.address && (
|
||
<p className="mt-[6px] text-[13px] text-[var(--ap-text-2)] font-normal">
|
||
{location.address}
|
||
</p>
|
||
)}
|
||
|
||
<p
|
||
className={`mt-[8px] text-[12px] ${
|
||
closed ? "text-[var(--ap-accent-strong)]" : nextLabel ? "text-[#009D79]" : "text-[#A1A1A1]"
|
||
}`}
|
||
>
|
||
{closed
|
||
? "در این روز نوبت ندارد"
|
||
: nextLabel ?? "فعلاً نوبت خالی ندارد"}
|
||
</p>
|
||
</button>
|
||
);
|
||
})}
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|
||
|
||
export default LocationSelect;
|