justin
7d6fbce87e
The public tree chart was fixed at 3 ancestors / 2 descendants. Add the same Generations controls the member view has (slider + number stepper + "All" per direction), applied live around the focused person. Extracts the member page's inline DepthControl into a shared components/depth-control.tsx and uses it in both, so they stay in sync. The public chart gains anc/prog depth state + an apply effect (setAncestryDepth/ setProgenyDepth + updateTree) mirroring the member behavior. tsc clean; next build passes. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com> Signed-off-by: Justin Paul <justin@jpaul.me>
67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
"use client";
|
|
|
|
// Slider + number stepper + "All" toggle for one generation direction
|
|
// (ancestors or descendants). Shared by the member and public tree views.
|
|
export function DepthControl({
|
|
label,
|
|
icon,
|
|
value,
|
|
all,
|
|
onValue,
|
|
onAll,
|
|
disabled,
|
|
}: {
|
|
label: string;
|
|
icon: string;
|
|
value: number;
|
|
all: boolean;
|
|
onValue: (v: number) => void;
|
|
onAll: (b: boolean) => void;
|
|
disabled?: boolean;
|
|
}) {
|
|
return (
|
|
<div className={`flex items-center gap-2 ${disabled ? "opacity-40" : ""}`}>
|
|
<span className="flex w-24 items-center gap-1 text-xs text-[var(--muted)]">
|
|
<span aria-hidden>{icon}</span> {label}
|
|
</span>
|
|
<input
|
|
type="range"
|
|
min={0}
|
|
max={12}
|
|
step={1}
|
|
value={all ? 12 : value}
|
|
disabled={disabled || all}
|
|
onChange={(e) => onValue(Number(e.target.value))}
|
|
className="w-28 accent-bronze"
|
|
aria-label={`${label} generations`}
|
|
/>
|
|
{all ? (
|
|
<span className="w-10 text-center text-sm font-medium text-bronze">All</span>
|
|
) : (
|
|
<input
|
|
type="number"
|
|
min={0}
|
|
max={99}
|
|
value={value}
|
|
disabled={disabled}
|
|
onChange={(e) => onValue(Math.max(0, Math.min(99, Number(e.target.value) || 0)))}
|
|
className="h-7 w-12 rounded-md border border-[var(--border)] bg-[var(--surface)] px-1 text-center text-sm"
|
|
/>
|
|
)}
|
|
<button
|
|
type="button"
|
|
disabled={disabled}
|
|
onClick={() => onAll(!all)}
|
|
title={`Show all ${label.toLowerCase()}`}
|
|
className={`rounded-md px-2 py-1 text-xs transition-colors ${
|
|
all
|
|
? "bg-bronze text-paper"
|
|
: "border border-[var(--border)] text-[var(--muted)] hover:text-[var(--foreground)]"
|
|
}`}
|
|
>
|
|
All
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|