From 52c8492a7591a735997c923432598cde319e48bd Mon Sep 17 00:00:00 2001
From: Muhammad Zourdy <zhafarmuhammad12@gmail.com>
Date: Wed, 27 Jul 2022 14:58:13 +0200
Subject: [PATCH] Refactoring cells component pattern

---
 src/components/grid/cell/cell.tsx | 42 +++++++++++++------------------
 1 file changed, 18 insertions(+), 24 deletions(-)

diff --git a/src/components/grid/cell/cell.tsx b/src/components/grid/cell/cell.tsx
index 32cc1897..5ce93198 100644
--- a/src/components/grid/cell/cell.tsx
+++ b/src/components/grid/cell/cell.tsx
@@ -12,31 +12,25 @@ interface CellsType {
 export const CellComponent: FunctionComponent<CellsType> = ({ mouseDown, children }) => {
   switch (children) {
     case 0:
-      return (
-        <div
-          className={classNames(styles.closedFrame, styles.emptyFrame, {
-            // [styles.changedBorderColor]: !mouseDown,
-            // [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <EmptyFrame />;
     case 10:
-      return (
-        <div
-          className={classNames(styles.closedFrame, {
-            [styles.changedBorderColor]: !mouseDown,
-            [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <ClosedFrame mouseDown={mouseDown} />;
     default:
-      return (
-        <div
-          className={classNames(styles.closedFrame, {
-            [styles.changedBorderColor]: !mouseDown,
-            [styles.transparentClosedFrame]: mouseDown,
-          })}
-        />
-      );
+      return <ClosedFrame mouseDown={mouseDown} />;
   }
 };
+
+const ClosedFrame: FunctionComponent<{ mouseDown: boolean }> = ({ mouseDown }) => {
+  return (
+    <div
+      className={classNames(styles.closedFrame, {
+        [styles.changedBorderColor]: !mouseDown,
+        [styles.transparentClosedFrame]: mouseDown,
+      })}
+    />
+  );
+};
+
+const EmptyFrame: FunctionComponent = () => {
+  return <div className={classNames(styles.closedFrame, styles.emptyFrame)} />;
+};