add PulseCard component.

src/page-components/pattern-editor/PulseCard.module.css

@@ -0,0 +1,25 @@
+@layer pages {
+  .pulse_card {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border-radius: calc(var(--border-radius) * 2);
+    padding: 0;
+    &.selected {
+      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
+    }
+    .order {
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+      background-color: var(--color-secondary-container);
+      color: var(--color-on-secondary-container);
+      border-top-left-radius: calc(var(--border-radius) * 2);
+      border-bottom-left-radius: calc(var(--border-radius) * 2);
+    }
+    .offset {
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    }
+  }
+}

src/page-components/pattern-editor/PulseCard.tsx

@@ -1,12 +1,34 @@
-import { FC } from 'react';
+import cx from 'clsx';
+import { useAtom } from 'jotai';
+import { FC, useCallback } from 'react';
 import { Pulse } from '../../context/pattern-model';
+import { SelectedPulseIdAtom } from '../../context/Patterns';
+import styles from './PulseCard.module.css';
 
 type PulseCardProps = {
   pulse: Pulse;
 };
 
 const PulseCard: FC<PulseCardProps> = ({ pulse }) => {
-  return <div></div>;
+  const [selected, setSelected] = useAtom(SelectedPulseIdAtom);
+
+  const handleSelect = useCallback(() => {
+    if (selected === pulse.id) {
+      setSelected(null);
+    } else {
+      setSelected(pulse.id);
+    }
+  }, [pulse, selected]);
+
+  return (
+    <div
+      className={cx(styles.pulse_card, selected === pulse.id && styles.selected)}
+      onClick={handleSelect}>
+      <div className={styles.order}>{pulse.order.toString().padStart(3, '0')}</div>
+      <div className="spacer" />
+      <div className={styles.offset}>+ {pulse.offset} ms</div>
+    </div>
+  );
 };
 
 export default PulseCard;