1 estrella en GitHub = 1 componente nuevo.

Dar una estrella
Modales & Capas searchfullscreenoverlay

Fullscreen Search

Capa de búsqueda a pantalla completa con entrada de texto grande y resultados rápidos.

Start searching...
Search for components, guides, or authors

Uso

Copia y pega este código directamente en tu página de Astro:

astro 
---
import { FullscreenSearch } from 'astro-component-kit';
---

<SearchOverlayFullscreen>Content</SearchOverlayFullscreen>
--- import { FullscreenSearch } from 'astro-component-kit'; --- <SearchOverlayFullscreen>Content</SearchOverlayFullscreen>

Instalación Manual

Si no estás usando el paquete npm, crea un archivo nuevo y pega el siguiente código: src/components/lib/FullscreenSearch.astro:

astro 
---
---
<div class="search-hero">
  <div class="close">Esc</div>
  <input type="text" placeholder="Start searching..." autofocus />
  <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div>
</div>
<style>
  .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; }
  .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; }
  input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; }
  .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; }
  span { color: #818cf8; text-decoration: underline; cursor: pointer; }
  @media (max-width: 768px) { input { font-size: 1.5rem; } }
</style>
--- --- <div class="search-hero"> <div class="close">Esc</div> <input type="text" placeholder="Start searching..." autofocus /> <div class="hints">Search for <span>components</span>, <span>guides</span>, or <span>authors</span></div> </div> <style> .search-hero { position: fixed; inset: 0; background: #080b14; z-index: 5000; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem; } .close { position: absolute; top: 3rem; right: 3rem; color: #64748b; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.1); padding: 2px 8px; border-radius: 4px; font-size: 0.8rem; } input { width: 100%; max-width: 800px; background: transparent; border: none; color: #fff; font-size: 3rem; font-weight: 800; text-align: center; outline: none; } .hints { margin-top: 2rem; color: #64748b; font-size: 1rem; } span { color: #818cf8; text-decoration: underline; cursor: pointer; } @media (max-width: 768px) { input { font-size: 1.5rem; } } </style>

Información Rápida

Categoría
Modales & Capas
Nombre de archivo
FullscreenSearch.astro
Dependencias
Ninguna — Astro nativo + CSS puro
Etiquetas
searchfullscreenoverlay