From 83939dfad8a5d4bcac34a276673b23af374c241b Mon Sep 17 00:00:00 2001 From: rodolfo-ferreira Date: Mon, 1 Apr 2024 11:36:19 -0300 Subject: [PATCH] =?UTF-8?q?style:=20add=20estrutura=20e=20estiliza=C3=A7?= =?UTF-8?q?=C3=A3o?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- components/institutional/ContactForm.tsx | 244 ++++++++++++++++++ components/ui/InputForm.tsx | 27 ++ components/ui/LabelForm.tsx | 19 ++ components/ui/ModalForm.tsx | 95 +++++++ fresh.gen.ts | 2 + islands/ContactForm.tsx | 1 + manifest.gen.ts | 149 +++++------ sdk/useUI.ts | 2 + .../Content/TextAndImageManualPosition.tsx | 109 ++++++++ sections/Institucional/ContactForm.tsx | 1 + tailwind.css | 50 +++- 11 files changed, 625 insertions(+), 74 deletions(-) create mode 100644 components/institutional/ContactForm.tsx create mode 100644 components/ui/InputForm.tsx create mode 100644 components/ui/LabelForm.tsx create mode 100644 components/ui/ModalForm.tsx create mode 100644 islands/ContactForm.tsx create mode 100644 sections/Content/TextAndImageManualPosition.tsx create mode 100644 sections/Institucional/ContactForm.tsx 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*/} +
+ +