feat: implement multiple aux timers

2026-08-19 06:04:05 +00:00 · 2025-06-24 07:20:53 +02:00
parent d1c58712ae
commit bf8ed8d017
33 changed files with 748 additions and 297 deletions
@@ -0,0 +1,128 @@
+.select {
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0.5rem;
+  height: 2rem;
+
+  background-color: $gray-1200;
+  font-size: 1rem;
+  font-weight: 400;
+  color: $gray-200;
+  border-radius: $component-border-radius-md;
+  border: 1px solid transparent;
+
+  padding-inline: 0.5rem;
+  font-size: calc(1rem - 2px);
+  white-space: nowrap;
+
+  &:hover:not(:disabled) {
+    background-color: $gray-1100;
+  }
+
+  &:active {
+    background-color: $gray-1000;
+  }
+
+  &[data-popup-open] {
+    background-color: $gray-1000;
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: not-allowed;
+  }
+}
+
+.selectIcon {
+  color: $gray-200;
+}
+
+.popup {
+  font-size: calc(1rem - 2px);
+  background-color: $gray-1200;
+  box-sizing: border-box;
+  padding: 2px;
+  border-radius: $component-border-radius-md;
+  color: $ui-white;
+  overflow-y: auto;
+  max-height: 20rem;
+  border: 1px solid $gray-1000;
+
+  &[data-side='start'] {
+    transition: 50%;
+    transform: 100%;
+    opacity: 1;
+  }
+}
+
+.item {
+  box-sizing: border-box;
+  outline: 0;
+  line-height: 1rem;
+  padding: 0.25rem 0.5rem;
+
+  min-width: var(--anchor-width);
+  display: grid;
+  gap: 0.25rem;
+  align-items: center;
+  grid-template-columns: 0.75rem 1fr;
+  scroll-margin-block: 1rem;
+
+  &[data-highlighted] {
+    z-index: 0;
+    position: relative;
+    background-color: $blue-700;
+  }
+}
+
+.itemIndicator {
+  grid-column-start: 1;
+}
+
+.itemIndicatorIcon {
+  display: block;
+  width: 0.75rem;
+  height: 0.75rem;
+}
+
+.itemLabel {
+  grid-column-start: 2;
+}
+
+.scrollArrow {
+  width: 100%;
+  background: canvas;
+  z-index: 1;
+  text-align: center;
+  cursor: default;
+  border-radius: 0.375rem;
+  height: 1rem;
+  font-size: 0.75rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &::before {
+    content: '';
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    left: 0;
+  }
+
+  &[data-direction='up'] {
+    &::before {
+      top: -100%;
+    }
+  }
+
+  &[data-direction='down'] {
+    bottom: 0;
+
+    &::before {
+      bottom: -100%;
+    }
+  }
+}
@@ -0,0 +1,53 @@
+import { IoCheckmark } from 'react-icons/io5';
+import { LuChevronsUpDown } from 'react-icons/lu';
+import { Select as BaseSelect } from '@base-ui-components/react/select';
+
+import styles from './Select.module.scss';
+
+interface SelectProps<T extends string | null = string> {
+  defaultValue?: T;
+  options: {
+    value: NonNullable<T>;
+    label: string;
+  }[];
+  placeholder?: string;
+  value?: T;
+  onChange?: (value: NonNullable<T>) => void;
+}
+
+export default function Select<T extends string | null = string>({
+  defaultValue,
+  options,
+  placeholder,
+  value,
+  onChange,
+}: SelectProps<T>) {
+  return (
+    <BaseSelect.Root defaultValue={defaultValue} onValueChange={onChange} value={value}>
+      <BaseSelect.Trigger className={styles.select}>
+        <BaseSelect.Value placeholder={placeholder} />
+        <BaseSelect.Icon className={styles.selectIcon}>
+          <LuChevronsUpDown />
+        </BaseSelect.Icon>
+      </BaseSelect.Trigger>
+      <BaseSelect.Portal>
+        <BaseSelect.Positioner side='bottom' align='start'>
+          <BaseSelect.ScrollUpArrow className={styles.scrollArrow} />
+          <BaseSelect.Popup className={styles.popup}>
+            {options.map((option) => {
+              return (
+                <BaseSelect.Item key={option.value} className={styles.item} value={option.value}>
+                  <BaseSelect.ItemIndicator className={styles.itemIndicator}>
+                    <IoCheckmark className={styles.itemIndicatorIcon} />
+                  </BaseSelect.ItemIndicator>
+                  <BaseSelect.ItemText className={styles.itemLabel}>{option.label}</BaseSelect.ItemText>
+                </BaseSelect.Item>
+              );
+            })}
+          </BaseSelect.Popup>
+          <BaseSelect.ScrollDownArrow className={styles.scrollArrow} />
+        </BaseSelect.Positioner>
+      </BaseSelect.Portal>
+    </BaseSelect.Root>
+  );
+}