From da96490d5e458def5a7511deab26fc5cfeb22af3 Mon Sep 17 00:00:00 2001
From: lonkaars <loek@pipeframe.xyz>
Date: Mon, 10 May 2021 08:49:02 +0200
Subject: loop keyframe component

---
 components/loop.tsx  | 11 +++++++++++
 pages/_app.tsx       |  1 +
 pages/index.tsx      |  4 +++-
 styles/keyframes.css |  8 ++++++++
 4 files changed, 23 insertions(+), 1 deletion(-)
 create mode 100644 components/loop.tsx
 create mode 100644 styles/keyframes.css

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;
+}
+
-- 
cgit v1.2.3