import React from 'react';
import { classNames } from '../types';
export function PHXTimeline({ data, keyRenderComponent, keyRenderValue }) {
    const renderValue = (component, item) => {
        const funcComponent = component[keyRenderValue];
        return funcComponent(item);
    };
    return (React.createElement("ul", { className: 'space-y-3' }, data.map((item, index) => (React.createElement("li", { key: item.id, className: 'relative flex items-center gap-x-3' },
        React.createElement("div", { className: classNames(index === data.length - 1 ? 'h-6' : '-bottom-6', index === 0 ? 'top-3' : 'top-0', 'absolute left-0 flex w-6 justify-center') },
            React.createElement("div", { className: 'w-px bg-gray-200' })),
        React.createElement("div", { className: 'relative flex h-6 w-6 flex-none items-center justify-center bg-white' },
            React.createElement("div", { className: 'h-1.5 w-1.5 rounded-full bg-gray-100 ring-1 ring-gray-300' })),
        React.createElement("div", { className: 'text-xs leading-5 text-gray-700' }, keyRenderComponent ? (renderValue(keyRenderComponent, item)) : (React.createElement("p", { className: 'flex-auto py-0.5' }, item[keyRenderValue]))))))));
}
//# sourceMappingURL=Timeline.js.map