Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

style: add estrutura e estilização #25

Merged
merged 1 commit into from
Apr 1, 2024
Merged

style: add estrutura e estilização #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 244 additions & 0 deletions components/institutional/ContactForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,244 @@
import Icon from "$store/components/ui/Icon.tsx";
import { Picture, Source } from "apps/website/components/Picture.tsx";
import type { ImageWidget } from "apps/admin/widgets.ts";
import Button from "$store/components/ui/Button.tsx";
import LabelForm from "$store/components/ui/LabelForm.tsx";
import InputForm from "$store/components/ui/InputForm.tsx";
import ModalForm from "$store/components/ui/ModalForm.tsx";
import { FnContext, SectionProps } from "deco/mod.ts";
import { useUI } from "$store/sdk/useUI.ts";


/**@titleBy alt*/
interface Image{
/**@title Imagem*/
src?:ImageWidget;
/**@title Largura da Imagem*/
width?:number;
/**@title Altura da Imagem*/
height?:number;
/**@title Nome da Imagem*/
alt?:string;
}

interface Device{
desktop?:Image;
mobile?:Image;
}

interface Text{
/**@title Título */
/**@format html */
title?:string;
/**@title Texto */
/**@format html */
description?:string;
}

interface Props{
/**@title Imagem */
image?:Device;
/**@title Textos */
text?:Text;
/**@title Habilitar Modal para alteração */
activeModalForm?: "Sim" | "Não";
}

const ACTIVEMODALFORM = {
"Sim" : true,
"Não" : false
}

function ContactForm( props: SectionProps<ReturnType<typeof loader>> ) {
const { image, text, activeModalForm, device } = props;
const { displayModalForm } = useUI();

if(activeModalForm) displayModalForm.value = ACTIVEMODALFORM[activeModalForm]

console.log('activeModalForm ---> ', activeModalForm)
console.log('displayModalForm.value ---> ', displayModalForm.value)

function handleChange( e: Event ){
console.log('------------> ', e)
}

return (
<>
<div class="md:n1-container md:px-[120px] !mb-[80px] mobile:mt-[80px] mobile:px-[20px]">
<div class="flex flex-col">
<div class="flex flex-col gap-[32px]">
<form class="text-sm flex flex-col gap-[32px]" >

{/* TIPO DE CONTATO __________________________________________________________________________| INICIAL | */}
<div class="flex flex-col gap-[32px]">
<h3 class="text-24 font-black font-archimoto-medium text-[#ffffff]">Tipo de Contato</h3>

<ul class="flex gap-[30px]">
{/* Comercial*/}
<li class="flex flex-row gap-[8px] lg:flex-row items-center">
<InputForm
nameAttr={"commercial"}
type={"checkbox"}
id={"commercial"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
nameAttr={'commercial'}>
Comercial
</LabelForm>
</li>
{/* Parceria*/}
<li class="flex flex-row gap-[8px] lg:flex-row items-center">
<InputForm
nameAttr={"partnership"}
type={"checkbox"}
id={"partnership"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
nameAttr={'partnership'}>
Parceria
</LabelForm>
</li>
{/* Outros*/}
<li class="flex flex-row gap-[8px] lg:flex-row items-center">
<InputForm
nameAttr={"others"}
type={"checkbox"}
id={"others"}
_class={`n1-radio-custom checked:is-active relative appearance-none rounded-[10px]
bg-transparent w-[32px] h-[32px] border-2 border-[#F3F4F7] outline-none`}
/>
<LabelForm
_class={`font-normal text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
nameAttr={'others'}>
Outros
</LabelForm>
</li>
</ul>
</div>
{/* TIPO DE CONTATO __________________________________________________________________________| FINAL | */}

<h3 class="text-24 font-black font-archimoto-medium text-[#ffffff]">Dados</h3>
{/* DADOS __________________________________________________________________________________| INICIAL | */}
<div class="flex flex-col gap-[30px] lg:flex-row">
{/* Nome*/}
<div class="form-control flex-col gap-[10px] w-full">
<LabelForm
_class={`font-bold text-[#ffffff] text-14 leading-[21px] font-noto-sans`}
nameAttr={'nameUser'}>
Nome
</LabelForm>
<input
onChange={handleChange}
placeholder={"Seu nome"}
name={"nameUser"}
id={"nameUser"}
type={"text"}
class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
/>
</div>
{/* Nome da Empresa*/}
<div class="form-control gap-[10px] w-full">
<LabelForm
_class="font-bold text-[#ffffff] text-14 leading-[21px] font-noto-sans"
nameAttr="nameCompany">
Nome da Empresa
</LabelForm>
<input
placeholder="*Opcional"
name="nameCompany"
type="text"
id="nameCompany"
class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
/>
</div>
</div>
<div class="flex flex-col gap-[30px] lg:flex-row">
{/* Telefone*/}
<div class="form-control gap-[10px] w-full">
<LabelForm
_class="font-bold text-[#ffffff] text-14 leading-[21px] font-noto-sans"
nameAttr="phoneNumber">
Telefone
</LabelForm>

<input
placeholder="(00) 00000-0000"
name="phoneNumber"
type="text"
id="phoneNumber"
class={`w-full rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
/>

</div>
{/* Email*/}
<div class="form-control gap-[10px] w-full">
<div class="form-control gap-[10px] w-full">
<LabelForm
_class="font-bold text-[#ffffff] text-14 leading-[21px] font-noto-sans"
nameAttr="email">
E-mail
</LabelForm>
<InputForm
placeholder="Seu melhor e-mail"
nameAttr="email"
id="email"
type="email"
_class={`rounded-[24px] bg-transparent py-[12px] px-[20px] max-h-[42px] border border-[#F3F4F7] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
/>
</div>
</div>
</div>
{/* Mensagem*/}
<div class="form-control gap-[32px]">
<label class="font-bold text-[#ffffff] text-24 leading-[21px] font-archimoto-medium" for="message">Mensagem</label>
<textarea
placeholder="Sua mensagem aqui"
name="message"
id="message"
type="text"
class={`bg-transparent rounded-[38px] h-[90px] border border-[#F3F4F7] py-[20px] px-[40px] duration-300
font-medium text-[#ffffff] text-12 leading-[18px] font-noto-sans outline-none focus:border-[#646363]`}
/>
</div>
{/* DADOS __________________________________________________________________________________| FINAL | */}

<div>
<input
type="submit"
class={`py-[20px] px-[30px] bg-base-200 rounded-[100px] text-[#585858] hover:bg-[#ffff]
max-h-[52px] !leading-none text-16 font-archimoto-medium font-black`}
value="Enviar"
/>
</div>
</form>
</div>
</div>
</div>
{ displayModalForm.value && (
<div>
<ModalForm image={image} text={text} device={device} />
</div>
)}
</>
);
}

export const loader = (props: Props, _req: Request, ctx: FnContext) => {
return {
...props,
device: ctx.device,
};
};


export default ContactForm;
27 changes: 27 additions & 0 deletions components/ui/InputForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { clx } from "$store/sdk/clx.ts";

interface Props{
placeholder?:string;
nameAttr?:string;
type?:string;
_class?:string;
checked?:boolean;
id?:string;
}

function InputForm( { placeholder, nameAttr, type, _class, checked, id }:Props){
return(
<>
<input
placeholder={placeholder}
name={nameAttr}
type={type}
class={clx(_class)}
checked={checked}
id={id}
/>
</>
)
}

export default InputForm;
19 changes: 19 additions & 0 deletions components/ui/LabelForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import type { ComponentChildren } from "preact";

interface Props{
nameAttr?:string;
_class?:string;
children?:ComponentChildren;
}

function LabelForm( { _class, nameAttr, children }:Props){
return(
<>
{_class && nameAttr && (
<label class={_class} htmlFor={nameAttr}> {children} </label>
)}
</>
)
}

export default LabelForm;
95 changes: 95 additions & 0 deletions components/ui/ModalForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@

import { Picture, Source } from "apps/website/components/Picture.tsx";
import type { ImageWidget } from "apps/admin/widgets.ts";
import { headerHeight } from "$store/components/header/constants.ts";

/**@titleBy alt*/
interface Image{
src?:ImageWidget;
width?:number;
height?:number;
alt?:string;
}

interface Device{
desktop?:Image;
mobile?:Image;
}

interface Text{
title?:string;
description?:string;
}

interface Props{
image?:Device;
text?:Text;
device?:string;
}

function ModalForm( { image, text, device } : Props ){

const headerHeightNumber = headerHeight ? Number(headerHeight.replaceAll(/\D/g,'')) + 100 : null;

console.log('device ----> ', device)

return(
<>
<div class="fixed top-0 left-0 w-full h-full z-[11] bg-[rgba(11,_18,_39,_0.80)] text-[#ffffff]">
<div class="w-full h-full flex items-start justify-center">
<div
class="[box-shadow:0_0px_2px_#fff] mobile:w-[90%] mobile:mt-[150px] notebook:max-w-[55%] notebook:min-w-[40%]
xl:w-[600px] 2xl:h-[540px] rounded-[16px] backdrop-filter backdrop-blur-[42px] flex flex-col justify-center items-center
notebook:gap-[15px] gap-[24px] px-[20px] md:px-[30px] py-[50px] mt-[120px]
bg-[linear-gradient(161deg,_rgba(255,_255,_255,_0.10)_0%,_rgba(255,_255,_255,_0.05)_101.7%)]"
// style={{
// marginTop: `${headerHeight && device === 'desktop' ? headerHeightNumber + 'px' : '120px'}`
// }}
>
<div>
{image && (
<Picture>
{image.mobile?.src && image.mobile?.width && image.mobile?.height && (
<Source
media="(max-width: 767px)"
src={image.mobile.src}
width={image.mobile.width}
height={image.mobile.height}
/>
)}
{image?.desktop?.src && image.desktop?.width && image.desktop?.height && (
<Source
media="(min-width: 768px)"
src={image.desktop.src}
width={image.desktop.width}
height={image.desktop.height}
/>
)}
<img
src={image.desktop?.src}
width={image.desktop?.width}
height={image.desktop?.height}
class="mobile:w-full"
/>
</Picture>
)}
</div>
{text?.title && (
<div class="[&_*]:text-32 xl:[&_*]:text-48 [&_*]:font-archimoto-medium [&_*]:font-black"
dangerouslySetInnerHTML={{ __html: text.title }}>
</div>
)}
{text?.description && (
<div class="[&_*]:text-18 xl:[&_*]:text-20 [&_*]:font-noto-sans [&_*]:font-normal"
dangerouslySetInnerHTML={{ __html: text.description }}>
</div>
)}
</div>
</div>
</div>
</>
)
}


export default ModalForm;
Loading
Loading