From 5c01be8b2ec3c62a97781f0a8f1ff3f02f79a1f5 Mon Sep 17 00:00:00 2001
From: Halit Aksoy <jhalitaksoy@gmail.com>
Date: Thu, 14 Jul 2022 23:21:20 +0300
Subject: [PATCH] use styled-jsx in StoneView

---
 src/components/board/StoneView.tsx | 29 +++++++++++++++--------------
 1 file changed, 15 insertions(+), 14 deletions(-)

diff --git a/src/components/board/StoneView.tsx b/src/components/board/StoneView.tsx
index fdae813..e795b33 100644
--- a/src/components/board/StoneView.tsx
+++ b/src/components/board/StoneView.tsx
@@ -2,18 +2,19 @@ import * as React from "react";
 import { FunctionComponent } from "react";
 
 const StoneView: FunctionComponent<{ color: string }> = ({ color }) => {
-    return (
-      <div
-        style={{
-          background: color,
-          margin: "1px",
-          width: "1vw",
-          height: "1vw",
-          borderRadius: "10vw",
-          transition: "background-color 0.5s",
-        }}
-      />
-    );
-  };
+  return (
+    <div className="stone" style={{ background: color }}>
+      <style jsx>{`
+          .stone {
+            margin: 1px;
+            width: 1vw;
+            height: 1vw;
+            border-radius: 10vw;
+            transition: background-color 0.5s;
+          }
+        `}</style>
+    </div>
+  );
+};
 
-  export default StoneView;
\ No newline at end of file
+export default StoneView;
\ No newline at end of file