franpcode/Pomodoro-Timer-with-Clockify-integration
1
0
Fork 0
mirror of https://github.com/FranP-code/Pomodoro-Timer-with-Clockify-integration.git synced 2025-10-12 23:52:30 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

Added hide to style selector and more modularizated the code

Browse Source
This commit is contained in:
Francisco Pessano
2021-09-19 00:41:18 -03:00
parent e8e826d7ff
commit 7d558fd54c
14 changed files with 321 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@@ -1,8 +1,8 @@
import AboutThis from "./components/AboutThis";
import BannerLogin from "./components/BannerLogin";
import GoDownArrow from "./components/GoDownArrow";
import Header from "./components/Header";
import MainPomodoro from "./components/MainPomodoro";
import StyleSelector from "./components/StyleSelector";
function App() {
return (
@@ -10,8 +10,8 @@ function App() {
<Header />
<BannerLogin />
<MainPomodoro />
<StyleSelector />
<GoDownArrow />
<AboutThis />
</>
);
}

36
src/components/AboutThis.jsx Normal file
View File

@@ -0,0 +1,36 @@
import React from 'react'
const AboutThis = () => {
return (
<div id="about-this">
<div className="titles">
<h3>About<span className="line-through"> us </span>this</h3>
<h3>Credits</h3>
</div>
<div className="information">
<ul>
<li>
<h4>
Why did you make this application?
</h4>
<p>
Because I wanted a pomodoro function that syncs with Clockify, which is a service that I use a lot to track my work.
</p>
</li>
</ul>
<ul>
<li>
<h4>
Credit 1
</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure suscipit totam magni, maiores facere quisquam est sapiente eligendi saepe repellendus quam blanditiis magnam ipsa doloribus facilis. Expedita eos corrupti dolor!
</p>
</li>
</ul>
</div>
</div>
)
}
export default AboutThis

3
src/components/GoDownArrow.jsx
View File

@@ -1,9 +1,10 @@
import React from 'react'
import { Link, animateScroll as scroll } from "react-scroll";
const GoDownArrow = () => {
return (
<div className="go-down">
<a href="#"><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></a>
<Link to="about-this" smooth={true}><svg height="533pt" viewBox="-16 -45 533.33331 533" width="533pt" xmlns="http://www.w3.org/2000/svg"><path d="m487.5-1.75h-475c-6.90625 0-12.5 5.59375-12.5 12.5 0 6.902344 5.59375 12.5 12.5 12.5h475c6.90625 0 12.5-5.597656 12.5-12.5 0-6.90625-5.59375-12.5-12.5-12.5zm0 0"/><path d="m345.097656 328.746094-82.597656 71.710937v-287.300781c0-6.902344-5.59375-12.5-12.5-12.5s-12.5 5.597656-12.5 12.5v287.300781l-82.597656-71.710937c-3.320313-3.027344-8.007813-4.035156-12.28125-2.648438-4.277344 1.386719-7.472656 4.960938-8.382813 9.359375-.910156 4.402344.613281 8.949219 3.988281 11.917969.097657.082031.191407.167969.289063.25l103.289063 89.671875c.039062.035156.085937.0625.125.097656.140624.128907.292968.234375.4375.347657.152343.117187.328124.253906.503906.375.144531.109374.300781.207031.457031.304687.179687.105469.351563.21875.535156.320313.15625.089843.320313.171874.480469.257812.167969.085938.375.183594.558594.265625s.339844.144531.519531.214844c.167969.066406.367187.144531.5625.210937.203125.0625.359375.125.539063.167969.179687.050781.40625.109375.605468.15625.175782.039063.351563.085937.527344.117187.234375.046876.472656.078126.707031.109376.152344.019531.304688.046874.457031.058593.390626.039063.789063.0625 1.183594.0625.390625 0 .792969-.023437 1.183594-.0625.148438-.011719.300781-.039062.453125-.058593.234375-.03125.472656-.0625.707031-.109376.175782-.03125.351563-.078124.527344-.117187.203125-.046875.40625-.097656.605469-.15625s.355469-.109375.539062-.167969c.175781-.058594.378907-.132812.570313-.210937.183594-.074219.339844-.136719.511718-.214844.171876-.074219.375-.171875.558594-.265625.175782-.089844.324219-.167969.480469-.257812.183594-.101563.359375-.214844.535156-.320313.15625-.097656.3125-.195313.464844-.304687.144531-.101563.328125-.242188.496094-.375.167969-.132813.296875-.226563.441406-.347657.039063-.035156.082031-.0625.121094-.097656l103.285156-89.671875c5.28125-4.449219 5.957031-12.335938 1.515625-17.613281-4.449219-5.28125-12.335938-5.957031-17.617188-1.511719-.101562.082031-.191406.164062-.285156.246094zm0 0"/></svg></Link>
</div>
)
}

44
src/components/MainPomodoro.jsx
View File

@@ -1,4 +1,5 @@
import React, {useState} from 'react'
import StyleSelector from './StyleSelector'
const MainPomodoro = () => {
@@ -6,26 +7,39 @@ const MainPomodoro = () => {
const [seconds, setSeconds] = useState('60')
const [style, setStyle] = useState('Regular')
const [displayHidden, setDisplayHidden] = useState(true)
const showStyles = () => {
console.log('Styles Deployed')
setDisplayHidden(!displayHidden)
}
return (
<div className="main-pomodoro">
<div className="timer">
<div className="minutes">{minutes}</div>
<div className="separator">:</div>
<div className="seconds">{seconds}</div>
<>
<div className="main-pomodoro">
<div className="timer">
<div className="minutes">{minutes}</div>
<div className="separator">:</div>
<div className="seconds">{seconds}</div>
</div>
<div className="style-display">
<h4>
Style
</h4>
<h3 onClick={showStyles}>
{style}
</h3>
</div>
<button class="start-pomodoro">START</button>
</div>
<div className="style-display">
<h4>
Style
</h4>
<h3>
{style}
</h3>
</div>
<StyleSelector displayHidden={displayHidden}/>
</>
<button class="start-pomodoro">START</button>
</div>
)
}

18
src/components/StyleSelectionChildren.jsx Normal file
View File

@@ -0,0 +1,18 @@
import React from 'react'
const StyleSelectionChildren = (props) => {
return (
<div className="style-container">
<span class="checkbox__input">
<input id={`input-${props.number}`} type="checkbox"></input>
<span className="checkbox_control"></span>
</span>
<label for={`input-${props.number}`}>
<span className="title">{props.title}</span>
<span className="times">{props.times}</span>
</label>
</div>
)
}
export default StyleSelectionChildren

54
src/components/StyleSelector.jsx
View File

@@ -1,52 +1,16 @@
import React from 'react'
import StyleSelectionChildren from './StyleSelectionChildren'
const StyleSelector = () => {
const StyleSelector = (props) => {
return (
<div className="style-selector">
<div className={`style-selector ${props.displayHidden ? 'style-selector-hidden': 'style-selector-show'}`} >
<h2>Select Style</h2>
<div className="style-container">
<span class="checkbox__input">
<input id="input-1" type="checkbox"></input>
<span className="checkbox_control"></span>
</span>
<label for="input-1">
<span className="title">Title</span>
<span className="times">Times|Times</span>
</label>
</div>
<div className="style-container">
<span class="checkbox__input">
<input id="input-2" type="checkbox"></input>
<span className="checkbox_control"></span>
</span>
<label for="input-2">
<span className="title">Title</span>
<span className="times">Times|Times</span>
</label>
</div>
<div className="style-container">
<span class="checkbox__input">
<input id="input-3" type="checkbox"></input>
<span className="checkbox_control"></span>
</span>
<label for="input-3">
<span className="title">Title</span>
<span className="times">Times|Times</span>
</label>
</div>
<div className="style-container">
<span class="checkbox__input">
<input id="input-4" type="checkbox"></input>
<span className="checkbox_control"></span>
</span>
<label for="input-4">
<span className="title">Title</span>
<span className="times">Times|Times</span>
</label>
<div className="style-selection-container">
<StyleSelectionChildren number={1} title={"Title 1"} times={"Times|Times"}/>
<StyleSelectionChildren number={2} title={"Title 2"} times={"Times|Times"}/>
<StyleSelectionChildren number={3} title={"Title 3"} times={"Times|Times"}/>
<StyleSelectionChildren number={4} title={"Title 4"} times={"Times|Times"}/>
</div>
</div>
)