UI completed

src/Components/CalculatorMonitor.jsx

@@ -0,0 +1,10 @@
+const CalculatorMonitor = ({ currentOperand, prevOperand, operation }) => {
+    return (
+        <div className="flex flex-col items-end justify-between w-full px-4 py-5 rounded-md mb-4">
+            <div className="text-md mb-3">{prevOperand} {operation}</div>
+            <div className="text-3xl whitespace-pre-wrap break-all">{currentOperand}</div>
+        </div>
+    )
+}
+
+export default CalculatorMonitor

src/Components/NumberButton.jsx

@@ -0,0 +1,13 @@
+import {ACTIONS} from "../Templates/Calculator/Calculator";
+
+const NumberButton = ({number, dispatch}) => {
+    return (
+        <button
+            onClick={() => dispatch({type: ACTIONS.SELECT_NUMBER, payload: {number}})}
+            className="flex item-center justify-center bg-gray-200 hover:bg-gray-300 p-4 rounded-[10px] text-xl">
+            {number}
+        </button>
+    )
+}
+
+export default NumberButton

src/Components/OperationButton.jsx

@@ -0,0 +1,13 @@
+import {ACTIONS} from "../Templates/Calculator/Calculator";
+
+const OperationButton = ({operation, dispatch}) => {
+    return (
+        <button
+            onClick={() => dispatch({type: ACTIONS.SELECT_OPERATOR, payload: {operation}})}
+            className="flex item-center justify-center bg-orange-400 hover:bg-orange-500 p-4 rounded-[10px] text-xl">
+            {operation}
+        </button>
+    )
+}
+
+export default OperationButton

src/Layouts/MainLayout/MainLayout.jsx

@@ -1,6 +1,6 @@
 function MainLayout({children}) {
   return <>
-    <div className="flex items-center justify-center h-[100vh] w-full p-16 main-gradient">
+    <div className="flex items-center justify-center h-[100vh] w-full p-4 main-gradient">
       {children}
     </div>
   </>

src/Templates/Calculator/Calculator.jsx

@@ -1,5 +1,52 @@
+import CalculatorMonitor from "../../Components/CalculatorMonitor";
+import {useReducer} from "react";
+import NumberButton from "../../Components/NumberButton";
+import OperationButton from "../../Components/OperationButton";
+
+export const ACTIONS = {
+    SELECT_NUMBER: 'select-number',
+    SELECT_OPERATOR: 'select-operator',
+    CALCULATE: 'calculate',
+    CLEAR: 'clear',
+    DELETE_NUMBER: 'delete-number',
+}
+
+const reducer = (state, action) => {
+    switch (action.type) {
+        case ACTIONS.SELECT_NUMBER:
+            return {
+                ...state,
+                currentOperand: `${state.currentOperand || '0'}${action.payload}`,
+            }
+    }
+}
+
 const Calculator = () => {
-    return <div>Calculator</div>;
+    const [{ currentOperand, prevOperand, operation }, dispatch] = useReducer(reducer, {});
+
+    return <div className="flex flex-col items-center justify-start p-4 bg-white rounded-xl w-full max-w-[500px]">
+        <CalculatorMonitor currentOperand={currentOperand} prevOperand={prevOperand} operation={operation}/>
+        <div className="grid grid-cols-4 gap-4 w-full">
+            <button className="col-span-2 flex item-center justify-center bg-gray-300 hover:bg-gray-400 p-4 rounded-[10px] text-xl">AC</button>
+            <button className="flex item-center justify-center bg-gray-300 hover:bg-gray-400 p-4 rounded-[10px] text-xl">C</button>
+            <OperationButton operation={'/'} dispatch={dispatch} />
+            <NumberButton number={7} dispatch={dispatch}/>
+            <NumberButton number={8} dispatch={dispatch}/>
+            <NumberButton number={9} dispatch={dispatch}/>
+            <OperationButton operation={'*'} dispatch={dispatch} />
+            <NumberButton number={4} dispatch={dispatch}/>
+            <NumberButton number={5} dispatch={dispatch}/>
+            <NumberButton number={6} dispatch={dispatch}/>
+            <OperationButton operation={'-'} dispatch={dispatch} />
+            <NumberButton number={1} dispatch={dispatch}/>
+            <NumberButton number={2} dispatch={dispatch}/>
+            <NumberButton number={3} dispatch={dispatch}/>
+            <OperationButton operation={'+'} dispatch={dispatch} />
+            <NumberButton number={0} dispatch={dispatch}/>
+            <NumberButton number={'.'} dispatch={dispatch}/>
+            <button className="col-span-2 flex item-center justify-center bg-green-500 hover:bg-green-600 p-4 rounded-[10px] text-xl">=</button>
+        </div>
+    </div>;
 }
 
 export default Calculator;