David
68980d9131
- Added UsersIcon to UserManagement for better visual representation. - Updated Spanish localization for "noValue" to use a dash instead of "Sin datos". - Introduced LayoutTemplateIcon in ResourceCatalogPage for improved UI. - Integrated LayersIcon in ResourcesPage to enhance user experience. - Updated package.json test scripts to include new test files. - Enhanced DetailSection component to support accordion functionality. - Modified EntityListHeader to accept an icon prop for better UI consistency. - Added new CountBadge and TimeLine components for better data representation. - Implemented asset workstation action logic and UI components for asset management. - Created tests for CountBadge and TimeLine components to ensure functionality.
56 lines
1.7 KiB
TypeScript
56 lines
1.7 KiB
TypeScript
import type { ReactNode } from "react";
|
|
|
|
export type TimeLineItem = {
|
|
id: string;
|
|
title: ReactNode;
|
|
dateTime: string;
|
|
dateLabel: string;
|
|
meta?: ReactNode;
|
|
content?: ReactNode;
|
|
};
|
|
|
|
/** Secuencia vertical: el consumidor aporta orden, fechas formateadas y contenido de cada evento. */
|
|
export function TimeLine({
|
|
items,
|
|
label,
|
|
emptyMessage,
|
|
}: {
|
|
items: readonly TimeLineItem[];
|
|
label: string;
|
|
emptyMessage: string;
|
|
}) {
|
|
if (items.length === 0) {
|
|
return (
|
|
<p className="text-sm text-muted-foreground" role="status">
|
|
{emptyMessage}
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<ol aria-label={label} className="min-w-0">
|
|
{items.map((item, index) => (
|
|
<li className="relative min-w-0 ps-8 pb-6 last:pb-0" key={item.id}>
|
|
{index < items.length - 1 && (
|
|
<span aria-hidden="true" className="absolute start-2 top-3 -bottom-3 w-px bg-border" />
|
|
)}
|
|
<span
|
|
aria-hidden="true"
|
|
className="absolute start-0.5 top-1.5 size-3 rounded-full border-2 border-background bg-primary ring-1 ring-primary/30"
|
|
/>
|
|
<article className="min-w-0 space-y-3 rounded-lg border bg-card p-4 text-card-foreground">
|
|
<div className="flex flex-wrap items-start justify-between gap-2">
|
|
<h3 className="min-w-0 break-words text-sm font-semibold">{item.title}</h3>
|
|
<time className="text-xs text-muted-foreground" dateTime={item.dateTime}>
|
|
{item.dateLabel}
|
|
</time>
|
|
</div>
|
|
{item.meta && <div className="text-xs text-muted-foreground">{item.meta}</div>}
|
|
{item.content}
|
|
</article>
|
|
</li>
|
|
))}
|
|
</ol>
|
|
);
|
|
}
|