diff --git a/src/components/BudgetContact/__tests__/BudgetContact.spec.tsx b/src/components/BudgetContact/__tests__/BudgetContact.spec.tsx new file mode 100644 index 0000000..a60621e --- /dev/null +++ b/src/components/BudgetContact/__tests__/BudgetContact.spec.tsx @@ -0,0 +1,12 @@ +import budgetEmail from '@/data/budgetEmail.json'; +import { render, screen } from '@/utils/testUtils'; +import { BudgetContact } from '..'; + +test('button have the budget email link to reach me out', async () => { + render(); + + const button = screen.getByText(/obtenha um orçamento agora/i); + const emailLink = `mailto:${budgetEmail.recipient}?subject=${budgetEmail.subject}&body=${budgetEmail.body}`; + + expect(button).toHaveAttribute('href', emailLink); +}); diff --git a/src/components/BudgetContact/index.tsx b/src/components/BudgetContact/index.tsx new file mode 100644 index 0000000..1c8b9da --- /dev/null +++ b/src/components/BudgetContact/index.tsx @@ -0,0 +1,20 @@ +import budgetEmail from '@/data/budgetEmail.json'; +import { EnvelopeSimple } from '@phosphor-icons/react'; + +export const BudgetContact: React.FC = () => { + const emailLink = `mailto:${budgetEmail.recipient}?subject=${budgetEmail.subject}&body=${budgetEmail.body}`; + + return ( + + + Obtenha um Orçamento Agora + + ); +}; diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index b36901f..0278e3d 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -1,5 +1,5 @@ import imgLogo from '@/assets/imgs/logo.svg'; -import { SendMeAnEmail } from '@/components/SendMeAnEmail'; +import { BudgetContact } from '@/components/BudgetContact'; import { Folders, IdentificationCard } from '@phosphor-icons/react'; type THeaderProps = React.HTMLAttributes; @@ -46,7 +46,7 @@ export const Header: React.FC = ({ ...props }) => { Projetos - + diff --git a/src/components/MySocials/index.tsx b/src/components/MySocials/index.tsx index e01ad8d..afd002f 100644 --- a/src/components/MySocials/index.tsx +++ b/src/components/MySocials/index.tsx @@ -20,7 +20,7 @@ export const MySocials: React.FC = ({ ...props }) => { LinkedIn @@ -29,7 +29,7 @@ export const MySocials: React.FC = ({ ...props }) => { GitHub @@ -38,7 +38,7 @@ export const MySocials: React.FC = ({ ...props }) => { Currículo diff --git a/src/components/SendMeAnEmail/__tests__/SendMeAnEmail.spec.tsx b/src/components/SendMeAnEmail/__tests__/SendMeAnEmail.spec.tsx deleted file mode 100644 index 4800b07..0000000 --- a/src/components/SendMeAnEmail/__tests__/SendMeAnEmail.spec.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { sendEmail } from '@/utils'; -import { fireEvent, render, screen } from '@/utils/testUtils'; -import { SendMeAnEmail, draftEmail } from '..'; - -vi.mock('@/utils', () => ({ - sendEmail: vi.fn(), -})); - -test('renders button with correct text', () => { - render(); - - expect(screen.getByText('Me mande um e-mail')).toBeInTheDocument(); -}); - -test('call sendEmail function when button is clicked', () => { - render(); - - fireEvent.click(screen.getByText('Me mande um e-mail')); - expect(sendEmail).toHaveBeenCalledTimes(1); - expect(sendEmail).toHaveBeenCalledWith(draftEmail); -}); diff --git a/src/components/SendMeAnEmail/index.tsx b/src/components/SendMeAnEmail/index.tsx deleted file mode 100644 index 4a848ec..0000000 --- a/src/components/SendMeAnEmail/index.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import { sendEmail } from '@/utils'; -import { EnvelopeSimple } from '@phosphor-icons/react'; - -export const draftEmail = { - subject: 'Olá, Alberto! Acabo de ver seu portfólio, vamos conversar?', - body: 'Seu email...', - recipient: 'albertovinicius3@gmail.com', -}; - -export const SendMeAnEmail: React.FC = () => { - return ( - - ); -}; diff --git a/src/data/budgetEmail.json b/src/data/budgetEmail.json new file mode 100644 index 0000000..113e044 --- /dev/null +++ b/src/data/budgetEmail.json @@ -0,0 +1,5 @@ +{ + "subject": "Solicitação de Orçamento para Desenvolvimento de Website/E-commerce/Landing page", + "body": "Olá, Alberto! Espero que esteja tudo bem com você. Estou entrando em contato para discutir a possibilidade de agendar uma reunião ou uma chamada para discutir melhor as necessidades e os detalhes do meu projeto [Seu projeto]...", + "recipient": "albertovinicius3@gmail.com" +} \ No newline at end of file diff --git a/src/styles/global.css b/src/styles/global.css index 8d39004..6d198fe 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -37,10 +37,6 @@ @apply decoration-accent; } - button { - @apply rounded bg-accent px-2 py-[2px] hover:bg-accent/90 active:bg-accent/70; - } - a { @apply underline hover:opacity-80; } @@ -101,8 +97,13 @@ } @layer components { - .social-link { - @apply flex items-center gap-1 rounded-md px-2 py-1 text-lg font-normal shadow-2xl shadow-black/30 hover:opacity-50; + button, + .btn { + @apply rounded px-2 py-1; + } + + .btn-accent { + @apply bg-accent hover:bg-accent/90 active:bg-accent/70; } .section__title {