- Please do not close your browser tab while timers are running, otherwise - all timers will be stopped. -
- ); -} diff --git a/src/components/toolbox/countdown-timer/timers/timer/index.ts b/src/components/toolbox/countdown-timer/timers/timer/index.ts deleted file mode 100644 index 91b3f08..0000000 --- a/src/components/toolbox/countdown-timer/timers/timer/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { Timer } from './timer'; diff --git a/src/components/toolbox/countdown-timer/timers/timer/timer.module.css b/src/components/toolbox/countdown-timer/timers/timer/timer.module.css deleted file mode 100644 index 17345bc..0000000 --- a/src/components/toolbox/countdown-timer/timers/timer/timer.module.css +++ /dev/null @@ -1,127 +0,0 @@ -.timer { - position: relative; - padding: 8px; - overflow: hidden; - background-color: var(--color-neutral-100); - border: 1px solid var(--color-neutral-200); - border-radius: 8px; - - &:not(:last-of-type) { - margin-bottom: 24px; - } - - & .header { - position: relative; - top: -8px; - width: 100%; - - & .bar { - height: 2px; - margin: 0 -8px; - background-color: var(--color-neutral-200); - - & .completed { - height: 100%; - background-color: var(--color-neutral-500); - transition: 0.2s; - } - } - } - - & .footer { - display: flex; - column-gap: 4px; - align-items: center; - - & .control { - display: flex; - flex-grow: 1; - column-gap: 4px; - align-items: center; - height: 40px; - padding: 4px; - background-color: var(--color-neutral-50); - border: 1px solid var(--color-neutral-200); - border-radius: 4px; - - & .input { - flex-grow: 1; - width: 100%; - min-width: 0; - height: 100%; - padding: 0 8px; - color: var(--color-foreground-subtle); - background-color: transparent; - border: none; - border-radius: 4px; - outline: none; - - &.finished { - text-decoration: line-through; - } - } - - & .button { - display: flex; - align-items: center; - justify-content: center; - height: 100%; - aspect-ratio: 1 / 1; - color: var(--color-foreground); - cursor: pointer; - background-color: var(--color-neutral-200); - border: 1px solid var(--color-neutral-300); - border-radius: 2px; - outline: none; - transition: 0.2s; - - &.reset { - background-color: var(--color-neutral-100); - border: none; - } - - &:disabled, - &.disabled { - cursor: not-allowed; - opacity: 0.6; - } - } - } - - & .delete { - display: flex; - align-items: center; - justify-content: center; - width: 38px; - min-width: 38px; - height: 38px; - color: #f43f5e; - cursor: pointer; - background-color: rgb(244 63 94 / 10%); - border: none; - border-radius: 4px; - outline: none; - transition: 0.2s; - - &.disabled { - cursor: not-allowed; - opacity: 0.6; - } - } - } - - & .left { - display: flex; - align-items: center; - justify-content: center; - height: 120px; - font-family: var(--font-mono); - font-size: var(--font-2xlg); - font-weight: 700; - cursor: pointer; - - & span { - color: var(--color-foreground-subtle); - } - } -} diff --git a/src/components/toolbox/countdown-timer/timers/timer/timer.tsx b/src/components/toolbox/countdown-timer/timers/timer/timer.tsx deleted file mode 100644 index d3a3900..0000000 --- a/src/components/toolbox/countdown-timer/timers/timer/timer.tsx +++ /dev/null @@ -1,222 +0,0 @@ -import { useRef, useMemo, useState, useEffect } from 'react'; -import { - IoPlay, - IoPause, - IoRefresh, - IoTrashOutline, -} from 'react-icons/io5/index'; - -import { Toolbar } from './toolbar'; - -import { useCountdownTimers } from '@/stores/countdown-timers'; -import { useAlarm } from '@/hooks/use-alarm'; -import { useSnackbar } from '@/contexts/snackbar'; -import { padNumber } from '@/helpers/number'; -import { cn } from '@/helpers/styles'; - -import styles from './timer.module.css'; - -interface TimerProps { - enableAnimations: (enabled: boolean) => void; - id: string; -} - -export function Timer({ enableAnimations, id }: TimerProps) { - const intervalRef = useRef- {spentMinutes} / {totalMinutes} Minute - {totalMinutes !== 1 && 's'} -
- )} -