diff options
| -rw-r--r-- | components/loop.tsx | 11 | ||||
| -rw-r--r-- | pages/_app.tsx | 1 | ||||
| -rw-r--r-- | pages/index.tsx | 4 | ||||
| -rw-r--r-- | styles/keyframes.css | 8 |
4 files changed, 23 insertions, 1 deletions
diff --git a/components/loop.tsx b/components/loop.tsx new file mode 100644 index 0000000..beaf019 --- /dev/null +++ b/components/loop.tsx @@ -0,0 +1,11 @@ +import { SlideKeyframe } from './icons'; + +export default function Loop(props: { + width: number; +}) { + return <div style={{ width: props.width }} className='loop'> + <SlideKeyframe type='loop' /> + <div className='connector' /> + <SlideKeyframe type='loop' loopEnd /> + </div>; +} diff --git a/pages/_app.tsx b/pages/_app.tsx index 9d4c44d..6f00f79 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,6 +2,7 @@ import Head from 'next/head'; import '../styles/colors.css'; import '../styles/globals.css'; +import '../styles/keyframes.css'; import '../styles/paper.css'; export default function Blog({ Component, pageProps }) { diff --git a/pages/index.tsx b/pages/index.tsx index 4cd0a1c..2865e64 100644 --- a/pages/index.tsx +++ b/pages/index.tsx @@ -1,7 +1,8 @@ import AppBar from '@material-ui/core/AppBar'; import Toolbar from '@material-ui/core/Toolbar'; -import { PressureIcon, SlideKeyframe } from '../components/icons'; +import { PressureIcon } from '../components/icons'; +import Loop from '../components/loop'; export default function Index() { return <> @@ -11,5 +12,6 @@ export default function Index() { <h1>pressure</h1> </Toolbar> </AppBar> + <Loop width={100} /> </>; } diff --git a/styles/keyframes.css b/styles/keyframes.css new file mode 100644 index 0000000..3427058 --- /dev/null +++ b/styles/keyframes.css @@ -0,0 +1,8 @@ +.loop .connector { + height: 16px; + background-color: var(--gruble); + opacity: .25; + width: calc(100% - 48px); + margin: 4px -11px; +} + |