⚡️ :: (#28) add dot in and gate

functions/src/components/LogicGate/Gates/AND/index.tsx

@@ -1,8 +1,18 @@
 import * as S from "../styles";
 import ANDBody from "../../../../assets/LogicGateBodies/AND.svg";
+import { FC } from "react";
+import { Gate } from "../../../../context/GateContext";
 
-const ANDGate = () => {
-  return <S.Container img={ANDBody}></S.Container>;
+const ANDGate: FC<Gate & { index: number }> = ({ position, index }) => {
+  const [x, y] = position;
+
+  return (
+    <S.Container style={{ top: `${x}px`, left: `${y}px` }} img={ANDBody}>
+      <S.Dot style={{ top: "15%" }} />
+      <S.Dot style={{ top: "85%" }} />
+      <S.Dot style={{ top: "50%", left: "100%" }} />
+    </S.Container>
+  );
 };
 
 export default ANDGate;

functions/src/components/LogicGate/Gates/styles.ts

@@ -1,7 +1,18 @@
 import styled from "@emotion/styled";
+import { color } from "../../Minesweeper";
 
 export const Container = styled.div<{ img: string }>`
   background: url(${(props) => props.img});
   width: 100px;
   height: 100px;
+  position: relative;
+`;
+
+export const Dot = styled.div`
+  border-radius: 50%;
+  background-color: ${color.darkGray};
+  width: 20%;
+  height: 20%;
+  transform: translate(-50%, -50%);
+  position: absolute;
 `;