sheptikhinv/timers
1
0
Fork 0
mirror of https://github.com/sheptikhinv/timers.git synced 2026-02-07 15:51:37 +05:00
Code Issues Projects Releases Packages Wiki Activity Actions

add ReleaseList and all for it

Browse source
This commit is contained in:
Вячеслав 2025-06-14 20:42:30 +05:00
parent df48306ef7
commit 54cb4607c5
5 changed files with 157 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

6
src/pages/Timers/Timers.module.css
View file

@ -6,9 +6,15 @@ body, html {
}
.header {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 1.6rem;
}
.header .header_item:nth-child(2) {
margin-left: auto;
}
.content {

30
src/pages/Timers/Timers.tsx
View file

@ -2,9 +2,13 @@ import {useEffect, useState} from 'react';
import Timer from '../../components/Timer/Timer';
import styles from './Timers.module.css';
import {formatFullTime} from "../../helpers/DateFunctions.ts";
import ReleaseList from "../../components/ReleaseList/ReleaseList.tsx";
import Button from "../../components/Button/Button.tsx";
const Timers = () => {
const [time, setTime] = useState(new Date());
const [isReleasesListOpen, setIsReleasesListOpen] = useState(false);
useEffect(() => {
const intervalId = setInterval(() => {
@ -16,18 +20,22 @@ const Timers = () => {
return (
<div className={styles.content}>
<header className={styles.header}>
<a className={`${styles.header_text} ${styles.title}`}>MetaTimer</a>
<a className={`${styles.header_text} ${styles.title}`}>{formatFullTime(time)}</a>
</header>
<div className={styles.timers_container}>
<Timer id={"timer_1"}/>
<Timer id={"timer_2"}/>
<Timer id={"timer_3"}/>
<Timer id={"timer_4"}/>
<>
<div className={styles.content}>
<header className={styles.header}>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>MetaTimer</a>
<a className={`${styles.header_text} ${styles.title} ${styles.header_item}`}>{formatFullTime(time)}</a>
<Button className={styles.header_item} label={"?"} onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}/>
</header>
<div className={styles.timers_container}>
<Timer id={"timer_1"}/>
<Timer id={"timer_2"}/>
<Timer id={"timer_3"}/>
<Timer id={"timer_4"}/>
</div>
</div>
</div>
<ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
</>
)
}