refactor: Spinner to SC

Author: morajabi

packages/graphql-playground/src/components/Spinner.tsx

@@ -1,43 +1,47 @@
 import * as React from 'react'
+import styled, { keyframes } from '../styled'
 
-export default function Spinner() {
+const Spinner = () => {
   return (
-    <div className="spinner-container">
-      <style jsx={true}>{`
-        .spinner-container {
-          height: 36px;
-          left: 50%;
-          position: absolute;
-          top: 50%;
-          transform: translate(-50%, -50%);
-          width: 36px;
-          z-index: 10;
-        }
-
-        @keyframes rotation {
-          from {
-            transform: rotate(0deg);
-          }
-          to {
-            transform: rotate(359deg);
-          }
-        }
-
-        .spinner {
-          animation: rotation 0.6s infinite linear;
-          border-bottom: 6px solid rgba(150, 150, 150, .15);
-          border-left: 6px solid rgba(150, 150, 150, .15);
-          border-radius: 100%;
-          border-right: 6px solid rgba(150, 150, 150, .15);
-          border-top: 6px solid rgba(150, 150, 150, .8);
-          display: inline-block;
-          height: 24px;
-          width: 24px;
-          position: absolute;
-          vertical-align: middle;
-        }
-      `}</style>
-      <div className="spinner" />
-    </div>
+    <Wrapper>
+      <SpinnerNode />
+    </Wrapper>
   )
 }
+
+export default Spinner
+
+const rotation = keyframes`
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+`
+
+const Wrapper = styled.div`
+  height: 36px;
+  left: 50%;
+  position: absolute;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 36px;
+  z-index: 10;
+`
+
+const SpinnerNode = styled.div`
+  position: absolute;
+  display: inline-block;
+  height: 24px;
+  width: 24px;
+  vertical-align: middle;
+
+  animation: ${rotation} 0.6s infinite linear;
+
+  border-radius: 100%;
+  border-bottom: 6px solid rgba(150, 150, 150, 0.15);
+  border-left: 6px solid rgba(150, 150, 150, 0.15);
+  border-right: 6px solid rgba(150, 150, 150, 0.15);
+  border-top: 6px solid rgba(150, 150, 150, 0.8);
+`