diff --git a/src/page-components/pattern-editor/PulseList.module.css b/src/page-components/pattern-editor/PulseList.module.css index 85ab53e..8b7657e 100644 --- a/src/page-components/pattern-editor/PulseList.module.css +++ b/src/page-components/pattern-editor/PulseList.module.css @@ -6,6 +6,15 @@ align-items: center; gap: calc(var(--spacing) * 2); } + .attribute_unit { + display: flex; + flex-direction: row; + align-items: center; + gap: calc(var(--spacing)); + label { + font-weight: bold; + } + } .pulses { min-width: 0; min-height: 0; @@ -17,4 +26,10 @@ flex-direction: column; align-items: stretch; } + .pulse_cards { + display: flex; + flex-direction: column; + align-items: stretch; + gap: calc(var(--spacing) * 2); + } } diff --git a/src/page-components/pattern-editor/PulseList.tsx b/src/page-components/pattern-editor/PulseList.tsx index f493297..67698aa 100644 --- a/src/page-components/pattern-editor/PulseList.tsx +++ b/src/page-components/pattern-editor/PulseList.tsx @@ -1,19 +1,51 @@ import { Icon } from '@iconify/react/dist/iconify.js'; +import { useAtomValue } from 'jotai'; import { FC } from 'react'; import { ScrollArea } from '../../components/ScrollArea'; +import { + CurrentPatternAtom, + CurrentPatternDuration, + PulsesInCurrentPatternAtom, +} from '../../context/Patterns'; import styles from './PulseList.module.css'; const PulseList: FC = () => { + const pattern = useAtomValue(CurrentPatternAtom); + const pulses = useAtomValue(PulsesInCurrentPatternAtom); + const duration = useAtomValue(CurrentPatternDuration); + return ( <>
+ + +
+
+
+ {pulses.length ?? 0} + +
+
+ + {duration.toFixed(2)} s +
- + +
+ {pulses.length === 0 &&
No key pulses.
} +
+
);