diff --git a/src/components/menu-mobile.tsx b/src/components/menu-mobile.tsx index 5bbbee8..9536822 100644 --- a/src/components/menu-mobile.tsx +++ b/src/components/menu-mobile.tsx @@ -66,6 +66,17 @@ const MobileMenu = () => { JSON Pretty + + + Base64 Encode/Decode + + ) diff --git a/src/components/navbar.tsx b/src/components/navbar.tsx index 945049a..dfb5065 100644 --- a/src/components/navbar.tsx +++ b/src/components/navbar.tsx @@ -27,6 +27,7 @@ const Navbar = () => { Documentos Cartão de Crédito JSON Pretty + Base64 Encode/Decode diff --git a/src/pages/base64-encode-decode.tsx b/src/pages/base64-encode-decode.tsx new file mode 100644 index 0000000..309a8cb --- /dev/null +++ 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) => { + 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 ( + <> + + Gerador | Base64 Encode/Decode + + + + + {base64.length > 0 ? ( + <> + + + + + +