61 lines
1.9 KiB
TypeScript
61 lines
1.9 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { useState } from 'react';
|
||
|
|
import { ChevronDown } from 'lucide-react';
|
||
|
|
|
||
|
|
interface TreatmentRailSectionProps {
|
||
|
|
title: string;
|
||
|
|
subtitle?: string;
|
||
|
|
count?: number;
|
||
|
|
defaultExpanded?: boolean;
|
||
|
|
variant?: 'default' | 'attention';
|
||
|
|
children: React.ReactNode;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function TreatmentRailSection({
|
||
|
|
title,
|
||
|
|
subtitle,
|
||
|
|
count,
|
||
|
|
defaultExpanded = false,
|
||
|
|
variant = 'default',
|
||
|
|
children,
|
||
|
|
}: TreatmentRailSectionProps) {
|
||
|
|
const [expanded, setExpanded] = useState(defaultExpanded);
|
||
|
|
|
||
|
|
const shellClass =
|
||
|
|
variant === 'attention'
|
||
|
|
? 'surface-card border border-amber-500/35 bg-amber-500/5'
|
||
|
|
: 'surface-card';
|
||
|
|
|
||
|
|
return (
|
||
|
|
<section className={`${shellClass} overflow-hidden`}>
|
||
|
|
<button
|
||
|
|
type="button"
|
||
|
|
onClick={() => setExpanded((open) => !open)}
|
||
|
|
className="flex w-full items-start gap-2 px-3 py-2.5 text-left hover:bg-background-secondary/30 transition-colors"
|
||
|
|
aria-expanded={expanded}
|
||
|
|
>
|
||
|
|
<ChevronDown
|
||
|
|
className={`h-4 w-4 shrink-0 mt-0.5 text-text-muted transition-transform ${
|
||
|
|
expanded ? 'rotate-0' : '-rotate-90'
|
||
|
|
}`}
|
||
|
|
/>
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="flex flex-wrap items-center gap-1.5">
|
||
|
|
<h3 className="text-sm font-semibold text-text-primary">{title}</h3>
|
||
|
|
{count !== undefined && count > 0 ? (
|
||
|
|
<span className="rounded-full bg-background-secondary px-1.5 py-0.5 text-[10px] font-medium tabular-nums text-text-muted">
|
||
|
|
{count}
|
||
|
|
</span>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
{subtitle ? (
|
||
|
|
<p className="text-[11px] text-text-muted mt-0.5 line-clamp-2">{subtitle}</p>
|
||
|
|
) : null}
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
{expanded ? <div className="px-3 pb-3 pt-0 border-t border-border/50">{children}</div> : null}
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|