Skip to content

Commit

Permalink
Move README box below the action
Browse files Browse the repository at this point in the history
  • Loading branch information
@cblackcom
cblackcom committed Apr 2, 2020
1 parent 7d5c3fd commit 947882f
Show file tree
Hide file tree
Showing 3 changed files with 78 additions and 105 deletions.
8 changes: 4 additions & 4 deletions src/Root.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,17 +28,17 @@ const Root = React.memo(props => (
</TimerContext.Provider>

<BoxContainer>
<TimerContext.Provider value={{view: 'readmeBox', title: 'README Box', widgetDisplay: 'jumbo'}}>
<ReadmeBox />
</TimerContext.Provider>

<TimerContext.Provider value={{view: 'catBox', title: 'Cat Box', widgetDisplay: 'jumbo'}}>
<CatBox />
</TimerContext.Provider>

<TimerContext.Provider value={{view: 'videoBox', title: 'Video Box', widgetDisplay: 'jumbo'}}>
<VideoBox />
</TimerContext.Provider>

<TimerContext.Provider value={{view: 'readmeBox', title: 'README Box', widgetDisplay: 'jumbo'}}>
<ReadmeBox />
</TimerContext.Provider>
</BoxContainer>
</RootContainer>
))
Expand Down
7 changes: 3 additions & 4 deletions src/boxes/CatBox.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,12 @@
import React from 'react'
import styled from '@emotion/styled'
import { Box, BoxTitle, BoxViewTimerContainer } from './Box'
import { rotateKeyframes } from '../misc/style'

// NOTE
// Hooks + Redux = tidy, predictable code

const Cat = styled.img({
width: '100%',
'&:hover': {
animation: `${rotateKeyframes} 2s ease-out infinite`,
},
})

const CatBox = React.memo(props => (
Expand Down
168 changes: 71 additions & 97 deletions src/boxes/ReadmeBox.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,12 @@ import React from 'react'
import styled from '@emotion/styled'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { Box, BoxTitle, BoxViewTimerContainer } from './Box'
import BsButton from '../misc/BsButton'
import * as style from '../misc/style'

const ReadmeBoxRoot = styled(Box)({
gridColumn: '1/3',
})

const Row = styled.div({
display: 'flex',
flexDirection: 'row',
})

const Content = styled.div({
flex: '1 1 62%',
paddingRight: 20,
})

const SuccessSpan = styled.span({
color: style.color.success,
})
Expand Down Expand Up @@ -50,102 +39,87 @@ const GrantMessage = styled.span({
color: '#555',
})

const Buttons = styled.div({
flex: '1 1 38%',
})

const ReadmeBox = React.memo(props => {
const handleReadmeClick = (e) => {
window.location.href = '//github.com/cblackcom/demo-timers'
}
return (
<ReadmeBoxRoot>
<BoxTitle>README box.</BoxTitle>
<Row>
<Content>
<p>
Welcome to demo-timers. This is a demo of some tricks
and techniques I have picked up over the last couple
of years in front-end.
</p>
<p>
Links to example code highlights in&nbsp;
<SuccessSpan>green</SuccessSpan> below—<br/>
look for&nbsp;
{/* eslint-disable-next-line */}
<CommentSpan>// NOTE </CommentSpan> comments in the files for
additional commentary.
</p>
<p>
Welcome to demo-timers. This is a demo of some tricks
and techniques I have picked up over the last couple
of years in front-end.
</p>
<BoxViewTimerContainer />
<p>
Links to example code highlights in&nbsp;
<SuccessSpan>green</SuccessSpan> below—<br/>
look for&nbsp;
{/* eslint-disable-next-line */}
<CommentSpan>// NOTE </CommentSpan> comments in the files for
additional commentary.
</p>
<ul>
<li>
React 16.8+&nbsp;
<a href="https://reactjs.org/docs/hooks-overview.html">Hooks</a> and&nbsp;
<a href="https://reactjs.org/docs/react-api.html#reactmemo">Memoized Components</a>
<ul>
<li>for tidy, predictable code</li>
<li><SrcA file="HeaderClock.jsx">HeaderClock component</SrcA></li>
<li><SrcA file="Header.jsx">Header component</SrcA></li>
<li><SrcA file="boxes/CatBox.jsx">CatBox component</SrcA></li>
</ul>
</li>
<li>
<a href="https://reactjs.org/docs/context.html">Context</a> +&nbsp;
<a href="https://reactjs.org/docs/hooks-reference.html#usecontext">useContext hook</a>
<ul>
<li><i>"...provides a way to pass data through the component tree without having to pass props down manually at every level..."</i></li>
<li><SrcA file="timer/TimerContext.js">Timer Context</SrcA></li>
<li><SrcA file="Root.jsx">Root component</SrcA></li>
<li><SrcA file="timer/AddTimerButton.jsx">AddTimerButton component</SrcA></li>
<li><SrcA file="timer/ViewTimerContainer.jsx">ViewTimerContainer component</SrcA></li>
</ul>
</li>
<li>
Redux
<ul>
<li>a global database with auto UI binding... if you use it right</li>
<li><SrcA file="redux/timerReducer.js">Timer Reducer</SrcA> (standard stuff)</li>
<li><SrcA file="movement.js">movement.js</SrcA></li>
<li>
React 16.8+&nbsp;
<a href="https://reactjs.org/docs/hooks-overview.html">Hooks</a> and&nbsp;
<a href="https://reactjs.org/docs/react-api.html#reactmemo">Memoized Components</a>
<ul>
<li>for tidy, predictable code</li>
<li><SrcA file="HeaderClock.jsx">HeaderClock component</SrcA></li>
<li><SrcA file="Header.jsx">Header component</SrcA></li>
</ul>
</li>
<li>
<a href="https://reactjs.org/docs/context.html">Context</a> +&nbsp;
<a href="https://reactjs.org/docs/hooks-reference.html#usecontext">useContext hook</a>
<ul>
<li><i>"...provides a way to pass data through the component tree without having to pass props down manually at every level..."</i></li>
<li><SrcA file="timer/TimerContext.js">Timer Context</SrcA></li>
<li><SrcA file="Root.jsx">Root component</SrcA></li>
<li><SrcA file="timer/AddTimerButton.jsx">AddTimerButton component</SrcA></li>
<li><SrcA file="timer/ViewTimerContainer.jsx">ViewTimerContainer component</SrcA></li>
</ul>
</li>
<li>
Redux
<ul>
<li>a global database with auto UI binding... if you use it right</li>
<li><SrcA file="redux/timerReducer.js">Timer Reducer</SrcA> (standard stuff)</li>
<li><SrcA file="movement.js">movement.js</SrcA></li>
<li>
<SrcA file="jeff/">
<FontAwesomeIcon icon="cannabis" /> Alternative patterns for Jeff <FontAwesomeIcon icon="cannabis" />
</SrcA>
</li>
<li>
<a href="https://github.com/zalmoxisus/redux-devtools-extension">redux-devtools</a> introspection tool&nbsp;
<FontAwesomeIcon icon="thumbs-up" />
</li>
</ul>
</li>
<li>
<a href="https://redux.js.org/recipes/computing-derived-data">Reselect — Memoized Selectors</a> for derived data
<ul>
<li><SrcA file="redux/timerSelectors.js">Timer Selectors</SrcA></li>
</ul>
<SrcA file="jeff/">
<FontAwesomeIcon icon="cannabis" /> Alternative patterns for Jeff <FontAwesomeIcon icon="cannabis" />
</SrcA>
</li>
<li>
<a href="https://emotion.sh">Emotion</a>
<ul>
<li>combines the styling into the component</li>
<li><SrcA file="boxes/Box.jsx">Box components</SrcA></li>
</ul>
<a href="https://github.com/zalmoxisus/redux-devtools-extension">redux-devtools</a> introspection tool&nbsp;
<FontAwesomeIcon icon="thumbs-up" />
</li>
<li><SrcA file="misc/useDebouncedWindowSize.js">useDebouncedWindowSize custom hook</SrcA></li>
<li><SrcA file="timer/TimerProgressIndicator.jsx">TimerProgressIndicator component</SrcA></li>
</ul>
<p>
<SpinningIcon icon="head-side-cough" />
&nbsp;&nbsp;
<GrantMessage>
Grant for this development time generously provided by the Coronavirus
</GrantMessage>
</p>
</Content>
<Buttons>
<BoxViewTimerContainer />
<BsButton color="primary" icon="book-open" onClick={handleReadmeClick}>
README on GitHub
</BsButton>
</Buttons>
</Row>
</li>
<li>
<a href="https://redux.js.org/recipes/computing-derived-data">Reselect — Memoized Selectors</a> for derived data
<ul>
<li><SrcA file="redux/timerSelectors.js">Timer Selectors</SrcA></li>
</ul>
</li>
<li>
<a href="https://emotion.sh">Emotion</a>
<ul>
<li>combines the styling into the component</li>
<li><SrcA file="boxes/Box.jsx">Box components</SrcA></li>
</ul>
</li>
<li><SrcA file="misc/useDebouncedWindowSize.js">useDebouncedWindowSize custom hook</SrcA></li>
<li><SrcA file="timer/TimerProgressIndicator.jsx">TimerProgressIndicator component</SrcA></li>
</ul>
<p>
<SpinningIcon icon="head-side-cough" />
&nbsp;&nbsp;
<GrantMessage>
Grant for this development time generously provided by the Coronavirus
</GrantMessage>
</p>
</ReadmeBoxRoot>
)
})
Expand Down

0 comments on commit 947882f

Please sign in to comment.