mirror of
https://github.com/fsolla/teqo.git
synced 2026-11-12 22:13:05 +00:00
Add ThankStep
This commit is contained in:
Francisco Ignácio Fontoura Solla
parent
c8b34613db
commit
135f456543
9 changed files with 181 additions and 129 deletions
Binary file not shown.
|
Before Width: | Height: | Size: 559 KiB |
BIN
public/SOLLA.png
BIN
public/SOLLA.png
Binary file not shown.
|
Before Width: | Height: | Size: 998 KiB After Width: | Height: | Size: 559 KiB |
15
src/app/(frontend)/mandato-no-whatsapp/Content.tsx
Normal file
15
src/app/(frontend)/mandato-no-whatsapp/Content.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
|||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { FormStep } from './FormStep'
|
||||
import { ThankStep } from './ThankStep'
|
||||
|
||||
export const Content = () => {
|
||||
const [step, setStep] = useState('form')
|
||||
|
||||
if (step === 'form') {
|
||||
return <FormStep onSubmit={() => setStep('thank')} />
|
||||
}
|
||||
|
||||
return <ThankStep />
|
||||
}
|
||||
52
src/app/(frontend)/mandato-no-whatsapp/FormStep.tsx
Normal file
52
src/app/(frontend)/mandato-no-whatsapp/FormStep.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { WhatsappForm } from '@/components/WhatsappForm'
|
||||
import Image from 'next/image'
|
||||
|
||||
interface FormStepProps {
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
export const FormStep = ({ onSubmit }: FormStepProps) => (
|
||||
<main className="h-screen w-screen bg-[url(/BG.jpg)] bg-cover bg-center overflow-y-scroll no-scrollbar flex">
|
||||
<div className="flex flex-col p-2 lg:grid lg:grid-cols-[55%_45%] max-w-300 m-auto">
|
||||
<h1 className="text-left mb-4 mt-8 text-3xl xs:text-4xl sm:text-center lg:text-left lg:text-6xl">
|
||||
FIQUE POR DENTRO
|
||||
<br />
|
||||
DO <span className="text-[#f9844e]">NOSSO MANDATO!</span>
|
||||
</h1>
|
||||
<h2 className="text-sm 2xs:text-base xs:text-lg sm:text-center lg:text-left lg:col-start-1 lg:text-2xl lg:mb-4">
|
||||
PARTICIPE DA NOSSA{' '}
|
||||
<strong className="font-bold">
|
||||
COMUNIDADE EXCLUSIVA
|
||||
<br />
|
||||
NO WHATSAPP
|
||||
</strong>{' '}
|
||||
E FIQUE POR DENTRO DE TODAS
|
||||
<br />
|
||||
AS VOTAÇÕES, PROJETOS E BASTIDORES.
|
||||
</h2>
|
||||
<Image
|
||||
className="-mb-10 sm:-mb-15 sm:max-w-120 lg:max-w-[140%] self-center sm:row-span-3 lg:row-start-1 lg:col-start-2 lg:-mx-5 lg:place-self-center lg:-translate-x-18 lg:translate-y-18"
|
||||
src="/LULA_E_SOLLA.png"
|
||||
width={956}
|
||||
height={948}
|
||||
alt=""
|
||||
priority
|
||||
/>
|
||||
<WhatsappForm classname="flex-1 lg:max-w-[75%]" onSubmit={onSubmit} />
|
||||
<Image
|
||||
src="LOGO_SOLLA_BRANCO.svg"
|
||||
width={430}
|
||||
height={300}
|
||||
alt=""
|
||||
className="-my-20 self-center lg:col-span-2 lg:place-self-center"
|
||||
/>
|
||||
<p className="text-center m-0 text-xs lg:col-span-2 md:text-sm lg:text-base">
|
||||
<strong>Seus dados estão seguros.</strong> Utilizamos suas informações apenas para contato e
|
||||
envio de conteúdos relacionados.
|
||||
<br />
|
||||
Não compartilhamos dados com terceiros. Ao preencher o formulário, você concorda com nossa
|
||||
política de uso de dados conforme a LGPD.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
35
src/app/(frontend)/mandato-no-whatsapp/ThankStep.tsx
Normal file
35
src/app/(frontend)/mandato-no-whatsapp/ThankStep.tsx
Normal file
|
|
@ -0,0 +1,35 @@
|
|||
import { WhatsAppIcon } from '@/components/socialIcons'
|
||||
import { Button } from '@payloadcms/ui'
|
||||
import Image from 'next/image'
|
||||
import Link from 'next/link'
|
||||
|
||||
export const ThankStep = () => (
|
||||
<main className="h-screen w-screen bg-[url(/BG.jpg)] bg-cover bg-bottom-right overflow-y-scroll no-scrollbar flex">
|
||||
<div className="flex flex-col p-2 lg:grid lg:grid-cols-[45%_55%] max-w-300 m-auto">
|
||||
<div className="max-lg:h-70 flex flex-col items-center justify-center lg:row-span-5 lg:row-start-1">
|
||||
<Image src="/SOLLA.png" width={851} height={812} alt="" priority />
|
||||
</div>
|
||||
<h1 className="text-left mb-2 mt-8 text-3xl xs:text-4xl sm:text-center lg:text-left lg:text-5xl lg:row-start-2">
|
||||
CADASTRO REALIZADO <br /> <span className="text-[#f9844e]">COM SUCESSO!</span>
|
||||
</h1>
|
||||
<h2 className="text-xs xs:text-sm sm:text-center lg:text-left lg:text-xl lg:mb-4 lg:row-start-3">
|
||||
VOCÊ SERÁ REDIRECIONADO A COMUNIDADE EXCLUSIVA
|
||||
<br />
|
||||
DO DEPUTADO JORGE SOLLA NO WHATSAPP.
|
||||
<br />
|
||||
CLIQUE NO BOTÃO ABAIXO E EM SEGUIDA CLIQUE
|
||||
<br />
|
||||
EM 'ENTRAR' PARA CONFIRMAR.
|
||||
</h2>
|
||||
<Button className="bg-[#99c343] font-bold text-base py-3 rounded-full mx-2 lg:max-w-100 lg:mx-0 lg:row-start-4">
|
||||
<Link href="https://whatsapp.com/channel/0029Vb5cJcT30LKLFkdN5P25" target="_blank">
|
||||
<WhatsAppIcon className="text-white w-5 inline mr-2 mb-1" />
|
||||
<span>ENTRAR NA COMUNIDADE AGORA</span>
|
||||
</Link>
|
||||
</Button>
|
||||
<div className="h-30 flex flex-col items-center justify-center overflow-hidden lg:col-span-2 lg:place-self-center lg:mt-8">
|
||||
<Image src="LOGO_SOLLA_BRANCO.svg" width={430} height={300} alt="" />
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
|
|
@ -1,49 +1,5 @@
|
|||
import { WhatsappForm } from '@/components/WhatsappForm'
|
||||
import Image from 'next/image'
|
||||
import { Content } from './Content'
|
||||
|
||||
export default function Page() {
|
||||
return (
|
||||
<main className="h-screen w-screen bg-[url(/BG.jpg)] bg-cover bg-center overflow-y-scroll no-scrollbar flex">
|
||||
<div className="flex flex-col p-2 lg:grid lg:grid-cols-[55%_45%] max-w-300 m-auto">
|
||||
<h1 className="text-left mb-4 mt-8 text-3xl xs:text-4xl sm:text-center lg:text-left lg:text-6xl">
|
||||
FIQUE POR DENTRO
|
||||
<br />
|
||||
DO <span className="text-[#f9844e]">NOSSO MANDATO!</span>
|
||||
</h1>
|
||||
<h2 className="text-sm 2xs:text-base xs:text-lg sm:text-center lg:text-left lg:col-start-1 lg:text-2xl lg:mb-4">
|
||||
PARTICIPE DA NOSSA{' '}
|
||||
<strong className="font-bold">
|
||||
COMUNIDADE EXCLUSIVA
|
||||
<br />
|
||||
NO WHATSAPP
|
||||
</strong>{' '}
|
||||
E FIQUE POR DENTRO DE TODAS
|
||||
<br />
|
||||
AS VOTAÇÕES, PROJETOS E BASTIDORES.
|
||||
</h2>
|
||||
<Image
|
||||
className="-mb-10 sm:-mb-15 sm:max-w-120 lg:max-w-[140%] self-center sm:row-span-3 lg:row-start-1 lg:col-start-2 lg:-mx-5 lg:place-self-center lg:-translate-x-18 lg:translate-y-18"
|
||||
src="/LULA_E_SOLLA.png"
|
||||
width={956}
|
||||
height={948}
|
||||
alt=""
|
||||
/>
|
||||
<WhatsappForm classname="flex-1 lg:max-w-[75%]" />
|
||||
<Image
|
||||
src="LOGO_SOLLA_BRANCO.svg"
|
||||
width={430}
|
||||
height={300}
|
||||
alt=""
|
||||
className="-my-20 self-center lg:col-span-2 lg:place-self-center"
|
||||
/>
|
||||
<p className="text-center m-0 text-xs lg:col-span-2 md:text-sm lg:text-base">
|
||||
<strong>Seus dados estão seguros.</strong> Utilizamos suas informações apenas para contato
|
||||
e envio de conteúdos relacionados.
|
||||
<br />
|
||||
Não compartilhamos dados com terceiros. Ao preencher o formulário, você concorda com nossa
|
||||
política de uso de dados conforme a LGPD.
|
||||
</p>
|
||||
</div>
|
||||
</main>
|
||||
)
|
||||
return <Content />
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,9 +16,10 @@ import { submitWhatsapp } from '@/app/(frontend)/actions/submitWhatsapp'
|
|||
|
||||
interface WhatsappFormProps {
|
||||
classname?: string
|
||||
onSubmit: () => void
|
||||
}
|
||||
|
||||
export const WhatsappForm = ({ classname }: WhatsappFormProps) => {
|
||||
export const WhatsappForm = ({ classname, onSubmit }: WhatsappFormProps) => {
|
||||
const methods = useForm<WhatsAppFormInput>({
|
||||
resolver: zodResolver(whatsAppFormSchema),
|
||||
defaultValues: {
|
||||
|
|
@ -33,11 +34,12 @@ export const WhatsappForm = ({ classname }: WhatsappFormProps) => {
|
|||
|
||||
const [isSubmitting, startTransition] = useTransition()
|
||||
|
||||
const onSubmit: SubmitHandler<WhatsAppFormInput> = (input) => {
|
||||
const handleSubmit: SubmitHandler<WhatsAppFormInput> = (input) => {
|
||||
startTransition(async () => {
|
||||
try {
|
||||
await submitWhatsapp(input)
|
||||
methods.reset()
|
||||
onSubmit()
|
||||
} catch {
|
||||
methods.setError('root', {
|
||||
message: 'Falha ao enviar assinatura. Tente novamente.',
|
||||
|
|
@ -50,7 +52,7 @@ export const WhatsappForm = ({ classname }: WhatsappFormProps) => {
|
|||
<FormProvider {...methods}>
|
||||
<form
|
||||
id="mandato-no-whatsapp"
|
||||
onSubmit={methods.handleSubmit(onSubmit)}
|
||||
onSubmit={methods.handleSubmit(handleSubmit)}
|
||||
className={classname}
|
||||
>
|
||||
<FieldGroup>
|
||||
|
|
|
|||
71
src/components/socialIcons.tsx
Normal file
71
src/components/socialIcons.tsx
Normal file
|
|
@ -0,0 +1,71 @@
|
|||
type IconProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const baseIconClass = 'h-5 w-5'
|
||||
|
||||
export const InstagramIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Instagram</title>
|
||||
<path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const FacebookIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const YoutubeIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>YouTube</title>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const GlobeIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Link externo</title>
|
||||
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.9 9h-3.02a15.7 15.7 0 0 0-1.18-4.2A8.03 8.03 0 0 1 19.9 11zM12 4.04c.9 1.13 1.65 2.95 1.94 4.96h-3.88c.29-2.01 1.04-3.83 1.94-4.96zM8.3 6.8A15.7 15.7 0 0 0 7.12 11H4.1a8.03 8.03 0 0 1 4.2-4.2zM4.1 13h3.02c.15 1.47.56 2.92 1.18 4.2A8.03 8.03 0 0 1 4.1 13zM12 19.96c-.9-1.13-1.65-2.95-1.94-4.96h3.88c-.29 2.01-1.04 3.83-1.94 4.96zm2.88-2.76c.62-1.28 1.03-2.73 1.18-4.2h3.02a8.03 8.03 0 0 1-4.2 4.2z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const WhatsAppIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="currentColor"
|
||||
viewBox="0 0 510 512.459"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Whatsapp</title>
|
||||
<path d="M435.689 74.468C387.754 26.471 324 .025 256.071 0 116.098 0 2.18 113.906 2.131 253.916c-.024 44.758 11.677 88.445 33.898 126.946L0 512.459l134.617-35.311c37.087 20.238 78.85 30.891 121.345 30.903h.109c139.949 0 253.88-113.917 253.928-253.928.024-67.855-26.361-131.645-74.31-179.643v-.012zm-179.618 390.7h-.085c-37.868-.011-75.016-10.192-107.428-29.417l-7.707-4.577-79.886 20.953 21.32-77.889-5.017-7.987c-21.125-33.605-32.29-72.447-32.266-112.322.049-116.366 94.729-211.046 211.155-211.046 56.373.025 109.364 22.003 149.214 61.903 39.853 39.888 61.781 92.927 61.757 149.313-.05 116.377-94.728 211.058-211.057 211.058v.011zm115.768-158.067c-6.344-3.178-37.537-18.52-43.358-20.639-5.82-2.119-10.044-3.177-14.27 3.178-4.225 6.357-16.388 20.651-20.09 24.875-3.702 4.238-7.403 4.762-13.747 1.583-6.343-3.178-26.787-9.874-51.029-31.487-18.86-16.827-31.597-37.598-35.297-43.955-3.702-6.355-.39-9.789 2.775-12.943 2.849-2.848 6.344-7.414 9.522-11.116s4.225-6.355 6.343-10.581c2.12-4.238 1.06-7.937-.522-11.117-1.584-3.177-14.271-34.409-19.568-47.108-5.151-12.37-10.385-10.69-14.269-10.897-3.703-.183-7.927-.219-12.164-.219s-11.105 1.582-16.925 7.939c-5.82 6.354-22.209 21.709-22.209 52.927 0 31.22 22.733 61.405 25.911 65.642 3.177 4.237 44.745 68.318 108.389 95.812 15.135 6.538 26.957 10.446 36.175 13.368 15.196 4.834 29.027 4.153 39.96 2.52 12.19-1.825 37.54-15.353 42.824-30.172 5.283-14.818 5.283-27.529 3.701-30.172-1.582-2.641-5.819-4.237-12.163-7.414l.011-.024z" />
|
||||
</svg>
|
||||
)
|
||||
|
|
@ -1,86 +1,7 @@
|
|||
import { cn } from '@/lib/utils'
|
||||
import { getCachedGlobal } from '@/utilities/globals'
|
||||
import Link from 'next/link'
|
||||
|
||||
type IconProps = {
|
||||
className?: string
|
||||
}
|
||||
|
||||
const baseIconClass = 'h-5 w-5'
|
||||
|
||||
const WhatsAppIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
shape-rendering="geometricPrecision"
|
||||
text-rendering="geometricPrecision"
|
||||
image-rendering="optimizeQuality"
|
||||
fill="currenColor"
|
||||
fill-rule="evenodd"
|
||||
clip-rule="evenodd"
|
||||
viewBox="0 0 510 512.459"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Whatsapp</title>
|
||||
<path
|
||||
fill="#111B21"
|
||||
d="M435.689 74.468C387.754 26.471 324 .025 256.071 0 116.098 0 2.18 113.906 2.131 253.916c-.024 44.758 11.677 88.445 33.898 126.946L0 512.459l134.617-35.311c37.087 20.238 78.85 30.891 121.345 30.903h.109c139.949 0 253.88-113.917 253.928-253.928.024-67.855-26.361-131.645-74.31-179.643v-.012zm-179.618 390.7h-.085c-37.868-.011-75.016-10.192-107.428-29.417l-7.707-4.577-79.886 20.953 21.32-77.889-5.017-7.987c-21.125-33.605-32.29-72.447-32.266-112.322.049-116.366 94.729-211.046 211.155-211.046 56.373.025 109.364 22.003 149.214 61.903 39.853 39.888 61.781 92.927 61.757 149.313-.05 116.377-94.728 211.058-211.057 211.058v.011zm115.768-158.067c-6.344-3.178-37.537-18.52-43.358-20.639-5.82-2.119-10.044-3.177-14.27 3.178-4.225 6.357-16.388 20.651-20.09 24.875-3.702 4.238-7.403 4.762-13.747 1.583-6.343-3.178-26.787-9.874-51.029-31.487-18.86-16.827-31.597-37.598-35.297-43.955-3.702-6.355-.39-9.789 2.775-12.943 2.849-2.848 6.344-7.414 9.522-11.116s4.225-6.355 6.343-10.581c2.12-4.238 1.06-7.937-.522-11.117-1.584-3.177-14.271-34.409-19.568-47.108-5.151-12.37-10.385-10.69-14.269-10.897-3.703-.183-7.927-.219-12.164-.219s-11.105 1.582-16.925 7.939c-5.82 6.354-22.209 21.709-22.209 52.927 0 31.22 22.733 61.405 25.911 65.642 3.177 4.237 44.745 68.318 108.389 95.812 15.135 6.538 26.957 10.446 36.175 13.368 15.196 4.834 29.027 4.153 39.96 2.52 12.19-1.825 37.54-15.353 42.824-30.172 5.283-14.818 5.283-27.529 3.701-30.172-1.582-2.641-5.819-4.237-12.163-7.414l.011-.024z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
|
||||
const InstagramIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Instagram</title>
|
||||
<path d="M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const FacebookIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Facebook</title>
|
||||
<path d="M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const YoutubeIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
role="img"
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>YouTube</title>
|
||||
<path d="M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z" />
|
||||
</svg>
|
||||
)
|
||||
|
||||
const GlobeIcon = ({ className }: IconProps) => (
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
className={className || baseIconClass}
|
||||
aria-hidden
|
||||
>
|
||||
<title>Link externo</title>
|
||||
<path d="M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20zm7.9 9h-3.02a15.7 15.7 0 0 0-1.18-4.2A8.03 8.03 0 0 1 19.9 11zM12 4.04c.9 1.13 1.65 2.95 1.94 4.96h-3.88c.29-2.01 1.04-3.83 1.94-4.96zM8.3 6.8A15.7 15.7 0 0 0 7.12 11H4.1a8.03 8.03 0 0 1 4.2-4.2zM4.1 13h3.02c.15 1.47.56 2.92 1.18 4.2A8.03 8.03 0 0 1 4.1 13zM12 19.96c-.9-1.13-1.65-2.95-1.94-4.96h3.88c-.29 2.01-1.04 3.83-1.94 4.96zm2.88-2.76c.62-1.28 1.03-2.73 1.18-4.2h3.02a8.03 8.03 0 0 1-4.2 4.2z" />
|
||||
</svg>
|
||||
)
|
||||
import { FacebookIcon, GlobeIcon, InstagramIcon, WhatsAppIcon, YoutubeIcon } from './socialIcons'
|
||||
|
||||
const icons = {
|
||||
instagram: InstagramIcon,
|
||||
|
|
|
|||
Loading…
Reference in a new issue