feat: Gerador de Cartão de Crédito

README.md

@@ -1,36 +1,43 @@
 # Gerador
 
-* Gerador de CPF, CNPJ e RG válidos para testes de desenovimento.
+- Gerador de CPF, CNPJ e RG válidos para testes de desenvolvimento.
 
-* JSON Pretty para facilitar a leitura de JSONs.
+- JSON Pretty para facilitar a leitura de JSONs.
+
+- Gerador de Cartão de Créditos válidos para testes de desenvolvimento.
 
 ### _Acesse: [gerador.dev.br](https://gerador.dev.br)_
 
 ## Por quê?
 
 Como todo bom densenvolvedor brasileiro, quem nunca precisou gerar um CPF, CNPJ ou RG válidos para aquele teste faceiro.
 
-Pois bem, temos muitos geradores famosos por aí, porém recentemente eu e meus colegas, passamos por experiências ruins e demoradas. Então, porque não como um bom desenvolvedor, criar o seu próprio hehe. 
+Pois bem, temos muitos geradores famosos por aí, porém recentemente eu e meus colegas, passamos por experiências ruins e demoradas. Então, porque não como um bom desenvolvedor, criar o seu próprio hehe.
 
 Algo que fosse leve, prático e rápido. Sem milhões de publicidade pulando na sua frente e fazendo você esperar para que daí sim possa gerar o documento necessário.
 
 Pois bem, assim nasceu o querido Gerador.
 
-![Gerador CPF,CNPJ e RG](https://user-images.githubusercontent.com/5226773/182047125-bf829b64-f478-4ef7-903d-f990da27bf8f.png)
+![Gerador - CPF, CNPJ e RG](https://user-images.githubusercontent.com/5226773/194178532-350fba85-7d38-4d51-9da4-9dd2f8f76fa2.png)
+
+![Gerador - JSON Pretty](https://user-images.githubusercontent.com/5226773/194178376-3387aedb-6cc8-416b-a6ba-ccc5a0f295b5.png)
 
-![Gerador - JSON Pretty](https://user-images.githubusercontent.com/5226773/182047153-f1ca5cc3-720a-4f07-88b3-c7e53bd54c6b.png)
+![Gerador - Cartão de Crédito](https://user-images.githubusercontent.com/5226773/194178445-ff157c43-d5e7-4688-bec5-5ab64289fb6a.png)
 
 ## Features
+
 - [x] Gerador de CPF válido
 - [x] Gerador de CNPJ válido
 - [x] Gerador de RG válido
 - [x] JSON Pretty
+- [x] Gerador de Cartão de Crédito válido
 
 ## Colabore
 
 Colabore criando Issues de sugestões, bugs e o que mais precisar. ;)
 
 ## Importante
+
 O gerador tem como intenção ajudar estudantes, programadores, analistas e testadores a gerar documentos válidos, normalmente necessários para testar seus softwares em desenvolvimento.
 
 A má utilização dos dados gerados é de total responsabilidade do usuário. Os números são gerados de forma aleatória, respeitando as regras de criação de cada

src/components/credit-card.tsx

@@ -0,0 +1,35 @@
+import { Box, Image, useColorModeValue } from '@chakra-ui/react'
+
+interface CreditCardComponentProps {
+  children: React.ReactNode
+  brand: string
+}
+
+const CreditCardComponent = ({ children, brand }: CreditCardComponentProps) => {
+  const bgCard = useColorModeValue('gray.50', 'gray.700')
+
+  return (
+    <Box
+      background={bgCard}
+      paddingX="4rem"
+      paddingY="2rem"
+      borderRadius={10}
+      boxShadow="lg"
+      position="relative"
+    >
+      {children}
+
+      <Box
+        width="3rem"
+        height="auto"
+        position="absolute"
+        right="4rem"
+        bottom="2.5rem"
+      >
+        <Image src={`/brands/${brand}.svg`} alt="Mastercard" />
+      </Box>
+    </Box>
+  )
+}
+
+export default CreditCardComponent

src/components/footer.tsx

@@ -4,7 +4,7 @@ const Footer = () => {
   return (
     <Flex as="footer" alignItems="center" justifyContent="center" paddingY="5">
       <Text color="gray.500" fontSize="sm" textAlign="center">
-        &copy; {new Date().getFullYear()} Marcelo Pecin. All Rights Reserved.
+        &copy; {new Date().getFullYear()} Marcelo Pecin
       </Text>
     </Flex>
   )

src/components/menu-mobile.tsx

@@ -44,6 +44,17 @@ const MobileMenu = () => {
             Documentos
           </MenuItem>
         </NextLink>
+        <NextLink href="/credit-card" passHref>
+          <MenuItem
+            as={Link}
+            bg={isActive('/credit-card') ? bg : undefined}
+            color={isActive('/credit-card') ? color : undefined}
+            _active={{}}
+            _focus={{}}
+          >
+            Cartão de Crédito
+          </MenuItem>
+        </NextLink>
         <NextLink href="/json-pretty" passHref>
           <MenuItem
             as={Link}

src/components/navbar.tsx

@@ -25,6 +25,7 @@ const Navbar = () => {
           <Show above="sm">
             <HStack spacing="5">
               <NavLink href="/">Documentos</NavLink>
+              <NavLink href="/credit-card">Cartão de Crédito</NavLink>
               <NavLink href="/json-pretty">JSON Pretty</NavLink>
             </HStack>
           </Show>

src/enums.ts

@@ -3,3 +3,8 @@ export enum DocumentType {
   CNPJ = 'CNPJ',
   RG = 'RG',
 }
+
+export enum CreditCardBrand {
+  MASTERCARD = 'mastercard',
+  VISA = 'visa',
+}

src/interfaces.ts

@@ -0,0 +1,6 @@
+export interface ICreditCard {
+  number: string
+  expirity: string
+  cvv: string
+  brand: string
+}

src/pages/credit-card.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { Button, Heading, HStack, VStack } from '@chakra-ui/react'
+import Head from 'next/head'
+
+import { onGenerateCreditCard } from '@/utils'
+import { CreditCardBrand } from '@/enums'
+import { ICreditCard } from '@/interfaces'
+
+import CopyButton from '@/components/copy-button'
+import CreditCardComponent from '@/components/credit-card'
+
+const CreditCard = () => {
+  const [creditCard, setCreditCard] = React.useState<ICreditCard>({
+    number: '**** **** **** ****',
+    expirity: '**/****',
+    cvv: '***',
+    brand: CreditCardBrand.MASTERCARD,
+  })
+
+  React.useEffect(() => {
+    onGenerate(CreditCardBrand.MASTERCARD)
+  }, [])
+
+  const onGenerate = (brand: CreditCardBrand) => {
+    const card = onGenerateCreditCard(brand)
+
+    setCreditCard(card)
+  }
+
+  return (
+    <>
+      <Head>
+        <title>Gerador | Cartão de Crédito</title>
+        <meta
+          name="description"
+          content="Gerador de Cartão de Crédito para testes de desenvolvimento de software."
+        />
+      </Head>
+
+      <VStack justifyContent="center" flex="1" spacing="10">
+        <HStack>
+          <Button onClick={() => onGenerate(CreditCardBrand.MASTERCARD)}>
+            Mastercard
+          </Button>
+          <Button onClick={() => onGenerate(CreditCardBrand.VISA)}>Visa</Button>
+        </HStack>
+
+        <CreditCardComponent brand={creditCard.brand}>
+          <VStack alignItems="stretch" spacing={5}>
+            <HStack spacing={5} alignItems="center">
+              <Heading as="h2" size="md" fontFamily="mono">
+                {creditCard.number}
+              </Heading>
+              <CopyButton variant="ghost" size="sm" text={creditCard.number} />
+            </HStack>
+
+            <HStack spacing={5} alignItems="center">
+              <Heading as="h2" size="md" fontFamily="mono">
+                {creditCard.expirity}
+              </Heading>
+              <CopyButton
+                variant="ghost"
+                size="sm"
+                text={creditCard.expirity}
+              />
+            </HStack>
+
+            <HStack spacing={5} alignItems="center">
+              <Heading as="h2" size="md" fontFamily="mono">
+                {creditCard.cvv}
+              </Heading>
+              <CopyButton variant="ghost" size="sm" text={creditCard.cvv} />
+            </HStack>
+          </VStack>
+        </CreditCardComponent>
+      </VStack>
+    </>
+  )
+}
+
+export default CreditCard