diff --git a/components/institutional/ContactForm.tsx b/components/institutional/ContactForm.tsx new file mode 100644 index 0000000..b152618 --- /dev/null +++ b/components/institutional/ContactForm.tsx @@ -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> ) { + 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 ( + <> +
+
+
+
+ + {/* TIPO DE CONTATO __________________________________________________________________________| INICIAL | */} +
+

Tipo de Contato

+ +
    + {/* Comercial*/} +
  • + + + Comercial + +
    • + {/* Parceria*/} +
  • + + + Parceria + +
    • + {/* Outros*/} +
  • + + + Outros + +
    • +
+
+ {/* TIPO DE CONTATO __________________________________________________________________________| FINAL | */} + +

Dados

+ {/* DADOS __________________________________________________________________________________| INICIAL | */} +
+ {/* Nome*/} +
+ + Nome + + +
+ {/* Nome da Empresa*/} +
+ + Nome da Empresa + + +
+
+
+ {/* Telefone*/} +
+ + Telefone + + + + +
+ {/* Email*/} +
+
+ + E-mail + + +
+
+
+ {/* Mensagem*/} +
+ +