feat: Base64 Encode e Decode

avuenja · Nov 1, 2022 · b9dcb37 · b9dcb37 · vercel · Nov 1, 2022
1 parent f92ec11
commit b9dcb37
Show file tree

Hide file tree

Showing 3 changed files with 137 additions and 0 deletions.
diff --git a/src/components/menu-mobile.tsx b/src/components/menu-mobile.tsx
@@ -66,6 +66,17 @@ const MobileMenu = () => {
             JSON Pretty
           </MenuItem>
         </NextLink>
+        <NextLink href="/base64-encode-decode" passHref>
+          <MenuItem
+            as={Link}
+            bg={isActive('/base64-encode-decode') ? bg : undefined}
+            color={isActive('/base64-encode-decode') ? color : undefined}
+            _active={{}}
+            _focus={{}}
+          >
+            Base64 Encode/Decode
+          </MenuItem>
+        </NextLink>
       </MenuList>
     </Menu>
   )

diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx
@@ -27,6 +27,7 @@ const Navbar = () => {
               <NavLink href="/">Documentos</NavLink>
               <NavLink href="/credit-card">Cartão de Crédito</NavLink>
               <NavLink href="/json-pretty">JSON Pretty</NavLink>
+              <NavLink href="/base64-encode-decode">Base64 Encode/Decode</NavLink>
             </HStack>
           </Show>
         </HStack>

diff --git a/src/pages/base64-encode-decode.tsx b/src/pages/base64-encode-decode.tsx
@@ -0,0 +1,125 @@
+import React from 'react'
+import Head from 'next/head'
+import { motion } from 'framer-motion'
+import {
+  Button,
+  HStack,
+  Textarea,
+  useColorModeValue,
+  VStack,
+} from '@chakra-ui/react'
+
+const Base64EncodeDecode = () => {
+  const [text, setText] = React.useState('')
+  const [base64, setBase64] = React.useState('')
+  const [isInvalid, setIsInvalid] = React.useState(false)
+
+  const bg = useColorModeValue('blackAlpha.50', 'whiteAlpha.50')
+
+  const handleTextChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
+    if (e.target.value === '') {
+      setIsInvalid(false)
+    }
+
+    setText(e.target.value)
+  }
+
+  const handleBase64 = (type: string) => {
+    try {
+      let base64 = ''
+
+      if (type === 'encode') {
+        const buffer = Buffer.from(text)
+        base64 = buffer.toString('base64')
+      } else {
+        const buffer = Buffer.from(text, 'base64')
+        base64 = buffer.toString()
+      }
+
+      setBase64(base64)
+    } catch (e) {
+      setIsInvalid(true)
+    }
+  }
+
+  const handleBack = () => {
+    setBase64('')
+    setIsInvalid(false)
+  }
+
+  const handleNew = () => {
+    setText('')
+    setBase64('')
+    setIsInvalid(false)
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Gerador | Base64 Encode/Decode</title>
+        <meta
+          name="description"
+          content="Base64 Encode e Decode, para facilitar a visualização de base64."
+        />
+      </Head>
+
+      <VStack flex="1" justifyContent="center" spacing="5">
+        {base64.length > 0 ? (
+          <>
+            <HStack spacing="5">
+              <Button onClick={handleBack}>Editar</Button>
+              <Button onClick={handleNew}>Novo</Button>
+            </HStack>
+
+            <Textarea
+              as={motion.textarea}
+              key={'base64'}
+              initial={{ x: 100, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition="0.2s linear"
+              maxWidth="container.sm"
+              height="31.25rem"
+              resize="none"
+              bg={bg}
+              value={base64}
+            />
+          </>
+        ) : (
+          <>
+            <HStack spacing="5">
+              <Button
+                disabled={text.length === 0}
+                onClick={() => handleBase64('encode')}
+              >
+                Encode
+              </Button>
+              <Button
+                disabled={text.length === 0}
+                onClick={() => handleBase64('decode')}
+              >
+                Decode
+              </Button>
+            </HStack>
+
+            <Textarea
+              as={motion.textarea}
+              key={'text'}
+              initial={{ x: -100, opacity: 0 }}
+              animate={{ x: 0, opacity: 1 }}
+              transition="0.2s linear"
+              maxWidth="container.sm"
+              height="31.25rem"
+              resize="none"
+              bg={bg}
+              value={text}
+              onChange={handleTextChange}
+              isInvalid={isInvalid}
+            />
+          </>
+        )}
+      </VStack>
+    </>
+  )
+}
+
+export default Base64EncodeDecode