Adiciona botões de contato para o GitHub e LinkedIn

mguinhos · Aug 18, 2023 · e00b077 · e00b077
1 parent 0cae870
commit e00b077
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,9 +1,12 @@
 "use client";
 
-import { TextField, Button, Stack, Box } from '@mui/material'
-import { useRef, useState } from 'react';
+import { TextField, Button, Stack, Box, Typography, IconButton } from '@mui/material'
+import { useRef } from 'react';
 import * as math from 'mathjs';
 
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LinkedInIcon from '@mui/icons-material/LinkedIn';
+
 function CalculatorRow({ children, ...props }: any) {
   return <Stack {...props} direction="row" spacing={1} padding={0.5} style={{display: 'flex', width: '100%', height: '100%'}}>{children}</Stack>;
 }
@@ -28,7 +31,18 @@ function CalculatorBox({ children,  ...props }: any) {
   return <Box {...props} sx={{display: 'flex', flexDirection: 'column', width: '100%', height: '100%'}}>{children}</Box>;
 }
 
-function Calculator({ ...props }) {
+function Footer({ ...props }: any) {
+  return (
+    <Box {...props} padding={2} sx={{justifyItems: 'center', alignItems: 'center', textAlign: 'center'}}>
+      <Typography variant='subtitle1'>2023 - Marcel Guinhos - MIT License</Typography>
+      <Typography variant='subtitle2'>Criado com NextJS e MaterialUI</Typography>
+      <IconButton size="large" href='https://github.com/mguinhos'><GitHubIcon /></IconButton>
+      <IconButton size="large" href='https://www.linkedin.com/in/marcel-guinhos'><LinkedInIcon /></IconButton>
+    </Box>
+  );
+}
+
+function Calculator({ ...props }: any) {
   let inputRef = useRef({value: ''});
 
   return (
@@ -42,9 +56,9 @@ function Calculator({ ...props }) {
           <CalculatorButton onClick={() => inputRef.current.value = math.evaluate(inputRef.current.value)}>=</CalculatorButton>
         </CalculatorRow>
         <CalculatorRow>
-          <CalculatorInsertButton inputRef={inputRef}>7</CalculatorInsertButton>
-          <CalculatorInsertButton inputRef={inputRef}>8</CalculatorInsertButton>
-          <CalculatorInsertButton inputRef={inputRef}>9</CalculatorInsertButton>
+          <CalculatorInsertButton inputRef={inputRef}>1</CalculatorInsertButton>
+          <CalculatorInsertButton inputRef={inputRef}>2</CalculatorInsertButton>
+          <CalculatorInsertButton inputRef={inputRef}>3</CalculatorInsertButton>
           <CalculatorInsertButton inputRef={inputRef}>+</CalculatorInsertButton>
         </CalculatorRow>
         <CalculatorRow>
@@ -60,12 +74,13 @@ function Calculator({ ...props }) {
           <CalculatorInsertButton inputRef={inputRef}>/</CalculatorInsertButton>
         </CalculatorRow>
         <CalculatorRow>
-          <CalculatorButton>+/-</CalculatorButton>
+          <CalculatorButton onClick={() => inputRef.current.value = (inputRef.current.value.startsWith('-') ? '+' + inputRef.current.value.slice(1): '-' + (inputRef.current.value.startsWith('+') ? inputRef.current.value.slice(1) : inputRef.current.value))}>+/-</CalculatorButton>
           <CalculatorInsertButton inputRef={inputRef}>0</CalculatorInsertButton>
-          <CalculatorButton>.</CalculatorButton>
-          <CalculatorButton>%</CalculatorButton>
+          <CalculatorInsertButton inputRef={inputRef}>.</CalculatorInsertButton>
+          <CalculatorInsertButton inputRef={inputRef}>%</CalculatorInsertButton>
         </CalculatorRow>
       </CalculatorBox>
+      <Footer/>
     </CalculatorBox>
   );
 }