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

Merge remote-tracking branch 'origin/master'

Browse source 
# Conflicts:
#	src/pages/Timers/Timers.tsx
This commit is contained in:
Вячеслав 2025-07-13 18:34:11 +05:00
commit e79c373e2d
3 changed files with 66 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -13,8 +13,41 @@ body, html {
gap: 1.6rem;
}
.header .header_item:nth-child(2) {
margin-left: auto;
.mobile_row {
display: flex;
gap: 1.6rem;
}
@media (max-width: 768px) {
.header {
flex-direction: column;
align-items: center;
}
.header .header_item:first-child {
align-self: center;
margin: 0 auto;
}
.mobile_row {
display: flex;
width: 100%;
justify-content: space-between;
align-items: center;
margin-top: 1rem;
}
.header .header_item:nth-child(2) {
margin-left: 0;
}
.timers_container {
justify-content: center;
}
.title {
font-size: 3.2rem;
}
}
.content {
@ -42,4 +75,4 @@ body, html {
justify-content: space-between;
flex-wrap: wrap;
gap: 1.6rem;
}
}

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

@ -1,14 +1,14 @@
import {useEffect, useState} from 'react';
import Timer from '../../components/Timer/Timer';
import styles from './Timers.module.css';
import {formatFullTime, getClosestTime, timeTillDate} from "../../helpers/DateFunctions.ts";
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);
const [isReverseTime, setIsReverseTime] = useState(false);
useEffect(() => {
const intervalId = setInterval(() => {
@ -16,45 +16,27 @@ const Timers = () => {
}, 500);
return () => clearInterval(intervalId);
}, []);
}, [])
const handleToggleTime = () => {
setIsReverseTime((prev) => !prev);
};
const targetTime = getClosestTime(22, 0);
const displayTime = isReverseTime ? timeTillDate(targetTime) : formatFullTime(time);
return (
<>
<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}`}
onClick={handleToggleTime}
style={{ cursor: 'pointer' }}
>
{displayTime}
</a>
<Button
className={styles.header_item}
label={"?"}
onClick={() => setIsReleasesListOpen(!isReleasesListOpen)}
/>
<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"} />
<Timer id={"timer_1"}/>
<Timer id={"timer_2"}/>
<Timer id={"timer_3"}/>
<Timer id={"timer_4"}/>
</div>
</div>
<ReleaseList isOpen={isReleasesListOpen} onClose={() => setIsReleasesListOpen(false)} />
</>
);
};
)
}
export default Timers;