Break down the eyes

Author: microbit-matt-hillsdon

src/components/Emoji.tsx

@@ -1,28 +1,72 @@
 import { Icon, IconProps } from "@chakra-ui/react";
 
-const Emoji = (props: IconProps) => {
+type Eye = "round" | "tick";
+
+type Side = "left" | "right";
+
+interface EmojiProps extends IconProps {
+  leftEye?: Eye;
+  rightEye?: Eye;
+}
+
+const Emoji = ({
+  leftEye = "round",
+  rightEye = "round",
+  ...props
+}: EmojiProps) => {
   return (
     <Icon {...props} viewBox="0 0 124 101">
+      {/* Outline */}
       <path
-        d="M34.3787 28.5268C30.3355 28.5268 27.0609 31.9787 27.0609 36.2347C27.0609 40.488 30.3355 43.9414 34.3787 43.9414C38.4136 43.9414 41.6875 40.488 41.6875 36.2347C41.6875 31.9787 38.4136 28.5268 34.3787 28.5268Z"
+        d="M88.874 0.0159531V0.00657654H34.1453V0.0159531C14.6584 0.173286 0 15.7146 0 36.3026C0 56.6373 14.4073 72.0239 33.6396 72.4399V72.46H88.5953C108.233 72.46 123.041 56.9173 123.041 36.3026C123.041 15.7093 108.371 0.162621 88.874 0.0159531ZM88.5953 57.0106L34.1084 56.9999C23.3745 56.8133 14.726 47.5906 14.726 36.2346C14.726 24.7599 23.5516 15.4586 34.4396 15.4586H88.5953C99.4792 15.4586 108.307 24.7599 108.307 36.2346C108.307 47.7092 99.4792 57.0106 88.5953 57.0106Z"
         fill="currentColor"
       />
-      {/* Left eye */}
+      <Eye side="left" type={leftEye} />
+      <Eye side="right" type={rightEye} />
+      {/* Smile */}
       <path
-        d="M88.874 0.0159531V0.00657654H34.1453V0.0159531C14.6584 0.173286 0 15.7146 0 36.3026C0 56.6373 14.4073 72.0239 33.6396 72.4399V72.46H88.5953C108.233 72.46 123.041 56.9173 123.041 36.3026C123.041 15.7093 108.371 0.162621 88.874 0.0159531ZM88.5953 57.0106L34.1084 56.9999C23.3745 56.8133 14.726 47.5906 14.726 36.2346C14.726 24.7599 23.5516 15.4586 34.4396 15.4586H88.5953C99.4792 15.4586 108.307 24.7599 108.307 36.2346C108.307 47.7092 99.4792 57.0106 88.5953 57.0106Z"
+        d="M61.8344 93.8294C57.7797 93.8294 54.4271 90.7241 53.7677 86.6548H47.5807C48.2287 94.4961 54.1355 100.248 61.8344 100.248C69.5251 100.248 75.4317 94.4961 76.0803 86.6548H69.8969C69.2355 90.7241 65.8812 93.8294 61.8344 93.8294Z"
         fill="currentColor"
       />
-      {/* Right eye */}
+    </Icon>
+  );
+};
+
+const Eye = ({ type, side }: { type: Eye; side: Side }) => {
+  switch (type) {
+    case "round":
+      return <RoundEye side={side} />;
+    case "tick":
+      return <TickEye position={side} />;
+  }
+};
+
+const RoundEye = ({ side }: { side: Side }) => {
+  return (
+    <path
+      transform={side === "right" ? "translate(54.2, 0)" : undefined}
+      d="M34.3787 28.5268C30.3355 28.5268 27.0609 31.9787 27.0609 36.2347C27.0609 40.488 30.3355 43.9414 34.3787 43.9414C38.4136 43.9414 41.6875 40.488 41.6875 36.2347C41.6875 31.9787 38.4136 28.5268 34.3787 28.5268Z"
+      fill="currentColor"
+    />
+  );
+};
+
+const TickEye = ({ position }: { position: Side }) => {
+  return (
+    <g
+      transform={
+        position === "left" ? "translate(25, 25)" : "translate(73, 25)"
+      }
+    >
       <path
-        d="M88.5651 43.9426C92.6084 43.9426 95.8792 40.4906 95.8792 36.2346C95.8792 31.98 92.6084 28.5267 88.5651 28.5267C84.526 28.5267 81.2521 31.98 81.2521 36.2346C81.2521 40.4906 84.526 43.9426 88.5651 43.9426Z"
+        d="M12.132 19.4734L25.0613 5.96014C26.3119 4.64281 26.3119 2.50814 25.0613 1.19081C23.8119 -0.127857 21.7879 -0.127859 20.5359 1.18814C20.5159 1.20947 20.5053 1.23481 20.4853 1.25481L7.66529 14.6548C7.64529 14.6708 7.6226 14.6828 7.60793 14.7041C6.35593 16.0214 6.35727 18.1574 7.60793 19.4734C8.85593 20.7908 10.884 20.7908 12.132 19.4734Z"
         fill="currentColor"
       />
-      {/* Smile */}
       <path
-        d="M61.8344 93.8294C57.7797 93.8294 54.4271 90.7241 53.7677 86.6548H47.5807C48.2287 94.4961 54.1355 100.248 61.8344 100.248C69.5251 100.248 75.4317 94.4961 76.0803 86.6548H69.8969C69.2355 90.7241 65.8812 93.8294 61.8344 93.8294Z"
+        d="M12.004 14.6386L6.14 9.19461C4.81067 7.96261 2.78938 8.09731 1.62138 9.49864C0.453381 10.8946 0.581368 13.0266 1.90803 14.26C1.92803 14.276 1.95203 14.2893 1.97203 14.3066L7.72405 19.6453C7.74005 19.6613 7.7547 19.6853 7.7747 19.7026C9.0987 20.9319 11.1213 20.7972 12.2893 19.4012C13.456 18.0026 13.3307 15.8693 12.004 14.6386Z"
         fill="currentColor"
       />
-    </Icon>
+    </g>
   );
 };