@datalayer/core
Version:
[](https://datalayer.io)
13 lines (12 loc) • 1.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/*
* Copyright (c) 2023-2025 Datalayer, Inc.
* Distributed under the terms of the Modified BSD License.
*/
import { AnimationProvider, Stack, Heading, Text, Animate, Prose, } from '@primer/react-brand';
import styles from './../../../style/animation/Animation.module.css';
export const StepBlock = (props) => {
const { date, title, description, StepIcon: BlockIcon } = props;
return (_jsx(AnimationProvider, { staggerDelayIncrement: 200, children: _jsx("div", { className: styles.TimelineBarExample, children: _jsxs(Stack, { direction: "horizontal", padding: "none", justifyContent: "center", children: [_jsxs(Stack, { direction: "vertical", className: styles.TimelineBarExample__end, children: [_jsx(Heading, { as: "h1", size: "6", animate: "slide-in-right", children: date }), _jsxs(Text, { className: styles.TimelineBarExample__text, as: "p", size: "600", animate: "slide-in-right", children: [_jsx(Text, { className: styles.TimelineBarExample__highlightedText, size: "600", children: title }), ' ', _jsx(Prose, { html: description })] }), _jsx(BlockIcon, { size: 100, colored: true })] }), _jsxs("div", { className: styles.TimelineBarExample__start, children: [_jsx(Animate, { className: styles.TimelineBarExample__line, animate: { variant: 'fill-in-top' } }), _jsx("span", { className: styles.TimelineBarExample__icon, children: _jsx(BlockIcon, { size: 24, fill: "white" }) })] })] }) }) }));
};
export default StepBlock;