From 98d4956a192fa67e5a7ebd6e757953589cb5e2a3 Mon Sep 17 00:00:00 2001
From: Luiz Chaves <lucachaves@gmail.com>
Date: Tue, 22 Oct 2024 22:29:08 -0300
Subject: [PATCH] content: update form

---
 public/codes/css/form/elements/checkbox.html  |   2 -
 .../css/form/elements/checkboxGroup.html      |   9 -
 public/codes/css/form/elements/label.html     |   2 -
 .../codes/css/form/elements/radioButton.html  |   2 -
 .../css/form/elements/radioButtonGroup.html   |   5 -
 public/codes/css/form/elements/select.html    |   6 -
 public/codes/css/form/hello-js/index.html     |  15 --
 public/codes/css/form/hello-js/js/index.js    |   5 -
 .../codes/css/form/tailwind-form/index.html   | 112 +++++++++++++
 src/components/HtmlPreview.astro              |   2 +-
 src/content/classnotes/css/form/index.mdx     | 155 +++++++++++++++---
 11 files changed, 245 insertions(+), 70 deletions(-)
 delete mode 100644 public/codes/css/form/elements/checkbox.html
 delete mode 100644 public/codes/css/form/elements/checkboxGroup.html
 delete mode 100644 public/codes/css/form/elements/label.html
 delete mode 100644 public/codes/css/form/elements/radioButton.html
 delete mode 100644 public/codes/css/form/elements/radioButtonGroup.html
 delete mode 100644 public/codes/css/form/elements/select.html
 delete mode 100644 public/codes/css/form/hello-js/index.html
 delete mode 100644 public/codes/css/form/hello-js/js/index.js
 create mode 100644 public/codes/css/form/tailwind-form/index.html

diff --git a/public/codes/css/form/elements/checkbox.html b/public/codes/css/form/elements/checkbox.html
deleted file mode 100644
index 39e4cfa..0000000
--- a/public/codes/css/form/elements/checkbox.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes">
-<label for="condicoes">Você concorda com os termos...</label>
diff --git a/public/codes/css/form/elements/checkboxGroup.html b/public/codes/css/form/elements/checkboxGroup.html
deleted file mode 100644
index cccbfb3..0000000
--- a/public/codes/css/form/elements/checkboxGroup.html
+++ /dev/null
@@ -1,9 +0,0 @@
-Linguagens:
-<input type="checkbox" name="linguagens" value="javascript" id="javascript">
-<label for="javascript">Javascript</label>
-<input type="checkbox" name="linguagens" value="c" id="c">
-<label for="c">C</label>
-<input type="checkbox" name="linguagens" value="java" id="java">
-<label for="java">Java</label>
-<input type="checkbox" name="linguagens" value="python" id="python">
-<label for="python">Python</label>
diff --git a/public/codes/css/form/elements/label.html b/public/codes/css/form/elements/label.html
deleted file mode 100644
index c4d7aa5..0000000
--- a/public/codes/css/form/elements/label.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<label for="cpf">CPF:</label>
-<input type="text" name="cpf" id="cpf">
diff --git a/public/codes/css/form/elements/radioButton.html b/public/codes/css/form/elements/radioButton.html
deleted file mode 100644
index 63791dc..0000000
--- a/public/codes/css/form/elements/radioButton.html
+++ /dev/null
@@ -1,2 +0,0 @@
-<input type="radio" name="sex" value="male" id="male">
-<label for="male">masculino</label>
diff --git a/public/codes/css/form/elements/radioButtonGroup.html b/public/codes/css/form/elements/radioButtonGroup.html
deleted file mode 100644
index 732e116..0000000
--- a/public/codes/css/form/elements/radioButtonGroup.html
+++ /dev/null
@@ -1,5 +0,0 @@
-Sexo:
-<input type="radio" name="sexo" value="masculino" id="masculino" checked>
-<label for="masculino">masculino</label>
-<input type="radio" name="sexo" value="feminino" id="feminino">
-<label for="feminino">feminino</label>
diff --git a/public/codes/css/form/elements/select.html b/public/codes/css/form/elements/select.html
deleted file mode 100644
index 4a01d4c..0000000
--- a/public/codes/css/form/elements/select.html
+++ /dev/null
@@ -1,6 +0,0 @@
-<label for="place">Estado: </label>
-<select name="place" id="place">
-  <option value=""></option>
-  <option value="PB">Paraíba</option>
-  <option value="PE">Pernambuco</option>
-</select>
diff --git a/public/codes/css/form/hello-js/index.html b/public/codes/css/form/hello-js/index.html
deleted file mode 100644
index 24d3863..0000000
--- a/public/codes/css/form/hello-js/index.html
+++ /dev/null
@@ -1,15 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Document</title>
-  <script src="js/index.js"></script>
-</head>
-<body>
-  <h1 onclick="hello('Event')">Running Javascript</h1>
-  <script>
-    hello('Body Script');
-  </script>
-</body>
-</html>
diff --git a/public/codes/css/form/hello-js/js/index.js b/public/codes/css/form/hello-js/js/index.js
deleted file mode 100644
index d7d113b..0000000
--- a/public/codes/css/form/hello-js/js/index.js
+++ /dev/null
@@ -1,5 +0,0 @@
-function hello(origin) {
-  console.log(`Hello ${origin}!`);
-}
-
-hello('Head Script');
diff --git a/public/codes/css/form/tailwind-form/index.html b/public/codes/css/form/tailwind-form/index.html
new file mode 100644
index 0000000..6d250e7
--- /dev/null
+++ b/public/codes/css/form/tailwind-form/index.html
@@ -0,0 +1,112 @@
+<!DOCTYPE html>
+<html class="h-full bg-white">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <script src="https://cdn.tailwindcss.com"></script>
+  </head>
+  <body class="h-full">
+    <div class="flex min-h-full flex-col justify-center px-6 py-12 lg:px-8">
+      <div class="sm:mx-auto sm:w-full sm:max-w-sm">
+        <img
+          class="mx-auto h-10 w-auto"
+          src="https://tailwindui.com/plus/img/logos/mark.svg?color=indigo&shade=600"
+          alt="Your Company"
+        />
+        <h2
+          class="mt-10 text-center text-2xl font-bold leading-9 tracking-tight text-gray-900"
+        >
+          Sign in to your account
+        </h2>
+      </div>
+
+      <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-sm">
+        <form class="space-y-6" action="#" method="POST">
+          <div>
+            <label
+              for="email"
+              class="block text-sm font-medium leading-6 text-gray-900"
+              >Email address</label
+            >
+            <div class="mt-2">
+              <input
+                id="email"
+                name="email"
+                type="email"
+                autocomplete="email"
+                required
+                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <div class="flex items-center justify-between">
+              <label
+                for="password"
+                class="block text-sm font-medium leading-6 text-gray-900"
+                >Password</label
+              >
+              <div class="text-sm">
+                <a
+                  href="#"
+                  class="font-semibold text-indigo-600 hover:text-indigo-500"
+                  >Forgot password?</a
+                >
+              </div>
+            </div>
+            <div class="mt-2">
+              <input
+                id="password"
+                name="password"
+                type="password"
+                autocomplete="current-password"
+                required
+                class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6"
+              />
+            </div>
+          </div>
+
+          <div>
+            <button
+              type="submit"
+              class="flex w-full justify-center rounded-md bg-indigo-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600"
+            >
+              Sign in
+            </button>
+          </div>
+        </form>
+
+        <p class="mt-10 text-center text-sm text-gray-500">
+          Not a member?
+          <a
+            href="#"
+            class="font-semibold leading-6 text-indigo-600 hover:text-indigo-500"
+            >Start a 14 day free trial</a
+          >
+        </p>
+      </div>
+    </div>
+  </body>
+</html>
+<!--
+  This example requires some changes to your config:
+
+  ```
+  // tailwind.config.js
+  module.exports = {
+    // ...
+    plugins: [
+      // ...
+      require('@tailwindcss/forms'),
+    ],
+  }
+  ```
+-->
+<!--
+  This example requires updating your template:
+
+  ```
+
+  ```
+-->
diff --git a/src/components/HtmlPreview.astro b/src/components/HtmlPreview.astro
index c5b2eb3..347f1d1 100644
--- a/src/components/HtmlPreview.astro
+++ b/src/components/HtmlPreview.astro
@@ -39,7 +39,7 @@ const codeName = src?.split('/')?.at(-2);
     }
   </div>
 
-  <div class="code-preview overflow-hidden m-0">
+  <div class="code-preview overflow-hidden !m-0">
     {
       src && isShowIframe ? (
         <Iframe
diff --git a/src/content/classnotes/css/form/index.mdx b/src/content/classnotes/css/form/index.mdx
index f8b5904..5aa4bdb 100644
--- a/src/content/classnotes/css/form/index.mdx
+++ b/src/content/classnotes/css/form/index.mdx
@@ -74,10 +74,22 @@ value:
 ### label field
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/label.html" />
-<CodePreview src="/codes/css/form/elements/label.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  <label for="cpf">CPF:</label>
+  <input type="text" name="cpf" id="cpf" />
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <label for="cpf">CPF:</label>
+  <input type="text" name="cpf" id="cpf" />
 </div>
+```
 
+</div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label)
 
@@ -99,29 +111,104 @@ value:
 
 ### radio button field
 
-<div class="flex flex-col space-y-0.5 mb-6">
-<HtmlPreview src="/codes/css/form/elements/radioButton.html" />
-<CodePreview src="/codes/css/form/elements/radioButton.html" lang="html" hideTitle={true} />
+<div class="flex flex-col space-y-0.5">
+
+<HtmlPreview>
+<div class="space-x-1">
+  <input type="radio" name="sex" value="male" id="male" />
+  <label for="male">masculino</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <input type="radio" name="sex" value="male" id="male" />
+  <label for="male">masculino</label>
 </div>
+```
+
+</div>
+
+radio group:
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/radioButtonGroup.html" />
-<CodePreview src="/codes/css/form/elements/radioButtonGroup.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  Sexo:
+  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
+  <label for="masculino">masculino</label>
+  <input type="radio" name="sexo" value="feminino" id="feminino" />
+  <label for="feminino">feminino</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  Sexo:
+  <input type="radio" name="sexo" value="masculino" id="masculino" checked />
+  <label for="masculino">masculino</label>
+  <input type="radio" name="sexo" value="feminino" id="feminino" />
+  <label for="feminino">feminino</label>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio)
 
 ### checkbox field
 
-<div class="flex flex-col space-y-0.5 mb-6">
-<HtmlPreview src="/codes/css/form/elements/checkbox.html" />
-<CodePreview src="/codes/css/form/elements/checkbox.html" lang="html" hideTitle={true} />
+<div class="flex flex-col space-y-0.5">
+
+<HtmlPreview>
+<div class="space-x-1">
+  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
+  <label for="condicoes">Você concorda com os termos...</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <input type="checkbox" name="aceitaCondicoes" value="ok" id="condicoes" />
+  <label for="condicoes">Você concorda com os termos...</label>
+</div>
+```
+
 </div>
 
+radio group:
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/checkboxGroup.html" />
-<CodePreview src="/codes/css/form/elements/checkboxGroup.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div class="space-x-1">
+  Linguagens:
+  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
+  <label for="javascript">Javascript</label>
+  <input type="checkbox" name="linguagens" value="c" id="c" />
+  <label for="c">C</label>
+  <input type="checkbox" name="linguagens" value="java" id="java" />
+  <label for="java">Java</label>
+  <input type="checkbox" name="linguagens" value="python" id="python" />
+  <label for="python">Python</label>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  Linguagens:
+  <input type="checkbox" name="linguagens" value="javascript" id="javascript" />
+  <label for="javascript">Javascript</label>
+  <input type="checkbox" name="linguagens" value="c" id="c" />
+  <label for="c">C</label>
+  <input type="checkbox" name="linguagens" value="java" id="java" />
+  <label for="java">Java</label>
+  <input type="checkbox" name="linguagens" value="python" id="python" />
+  <label for="python">Python</label>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox)
@@ -160,7 +247,7 @@ value:
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file)
 
-### [range field](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+### range field
 
 <div class="flex flex-col space-y-0.5">
 
@@ -176,6 +263,8 @@ value:
 
 </div>
 
+[MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range)
+
 ### number field
 
 <div class="flex flex-col space-y-0.5">
@@ -242,8 +331,8 @@ value:
 ```html
 <label for="message">Mensagem:</label><br />
 <textarea name="message" id="message" rows="3" cols="60">
-digite uma mensagem</textarea
->
+  digite uma mensagem
+</textarea>
 ```
 
 </div>
@@ -253,25 +342,45 @@ digite uma mensagem</textarea
 ### combobox field
 
 <div class="flex flex-col space-y-0.5">
-<HtmlPreview src="/codes/css/form/elements/select.html" />
-<CodePreview src="/codes/css/form/elements/select.html" lang="html" hideTitle={true} />
+
+<HtmlPreview>
+<div>
+  <label for="place">Estado:</label>
+  <select name="place" id="place">
+    <option value="PB">Paraíba</option>
+    <option value="PE">Pernambuco</option>
+  </select>
+</div>
+</HtmlPreview>
+
+```html
+<div>
+  <label for="place">Estado:</label>
+  <select name="place" id="place">
+    <option value="PB">Paraíba</option>
+    <option value="PE">Pernambuco</option>
+  </select>
+</div>
+```
+
 </div>
 
 [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)
 
 ## Formulário
 
-### Estrutura do Formulário
-
+### Formulário sem estilo
 
 <CodeHtmlPreview src="/codes/css/form/simple-form" />
 
 ### Formulário com Boostrap
 
-<div class="flex flex-col space-y-6">
-
 <CodeHtmlPreview src="/codes/css/form/bootstrap-form" />
 
-<CodeHtmlPreview src="/codes/css/form/bootstrap-grid-form" />
+[Bootstrap | Sign-in](https://getbootstrap.com/docs/5.3/examples/sign-in/)
 
-</div>
+### Formulário com Tailwind
+
+<CodeHtmlPreview src="/codes/css/form/tailwind-form" />
+
+[Tailwind UI | Sign-in and Registration](https://tailwindui.com/components/application-ui/forms/sign-in-forms)