1 files changed, 67 insertions, 0 deletions
diff --git a/src/components/templates/Search.astro b/src/components/templates/Search.astro
new file mode 100644
index 0000000..5245643
--- /dev/null
+++ b/src/components/templates/Search.astro
@@ -0,0 +1,67 @@
+---
+const { site } = Astro;
+---
+
+<search>
+  <link rel="dns-prefetch" href="https://www.google.com/search">
+  <form
+    action="https://www.google.com/search"
+    target="_blank"
+    rel="external noreferrer search"
+    role="search"
+    autocomplete="on"
+    name="search"
+  >
+    <details>
+      <summary>Pesquisar no website</summary>
+      <div class="details">
+        <p>
+          <label>Barra de pesquisa <input
+              name="q"
+              type="search"
+              placeholder={`site:${site} consulta de pesquisa`}
+              value={`site:${site} `}
+              required
+              title={`"site:${site} " é usado para que os resultados da pesquisa fiquem restritos a este website`}
+              pattern={`site:${site} .+`}
+              size={`site:${site} .+`.length}
+            /></label>
+        </p>
+        <p class="mute">
+          <small>Esta pesquisa é efectuada pelo Google e <strong>utiliza
+              software proprietário.</strong></small>
+        </p>
+        <p><button type="submit">🔍 Pesquisar</button></p>
+      </div>
+    </details>
+  </form>
+</search>
+
+<style>
+  search {
+    padding-block-end: calc(var(--size-4) * 1em);
+  }
+
+  summary {
+    font-size: calc(var(--size-3) * 1rem);
+    font-weight: bolder;
+  }
+
+  .details {
+    border-radius: calc(var(--size-1) * 1em);
+    border: 1px solid var(--color-light);
+    margin-block-start: calc(var(--size-1) * 1em);
+    font-size: calc(var(--size-3) * 1rem);
+    padding-inline: calc(var(--size-4) * 1em);
+    padding-block: calc(var(--size-2) * 1em);
+
+    & > p {
+      margin-block: calc(var(--size-2) * 1em);
+      line-height: calc(var(--size-8) * 1rem);
+    }
+
+    & input[type="search"] {
+      width: 100%;
+    }
+  }
+</style>