Search Reveal

'use client';

import './SearchReveal.css';

/**
 * SearchReveal — A dynamic minimal search pod that expands smoothly into a full input field on hover or focus.
 * 
 * @param {string} id - Standard HTML ID property.
 * @param {string} placeholder - Default placeholder ("Search...").
 * @param {string} name - Standard HTML name grouping.
 */
export interface SearchRevealProps {
  id: string;
  placeholder?: string;
  name?: string;
}

export function SearchReveal({ id, placeholder = "Search...", name }: SearchRevealProps) {
  return (
    <>
      <div className="search-box" data-rk-85c2fd="">
        <input type="search" id={id} name={name} placeholder={placeholder} className="search-input" aria-label="Search content" data-rk-85c2fd="" />
        <button type="button" aria-label="Submit search" className="search-btn" data-rk-85c2fd="">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" data-rk-85c2fd="">
            <circle cx="11" cy="11" r="8" data-rk-85c2fd=""></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65" data-rk-85c2fd=""></line>
          </svg>
        </button>
      </div>
    </>
  );
}

export default SearchReveal;

/* SearchReveal — ported from astro-component-kit (forms/SearchReveal.astro) */

.search-box:where([data-rk-85c2fd]) { position: relative; width: 44px; height: 44px; transition: 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.search-box:hover:where([data-rk-85c2fd]), .search-box:focus-within:where([data-rk-85c2fd]) { width: 250px; }
.search-input:where([data-rk-85c2fd]) { 
  width: 100%; height: 100%; box-sizing: border-box;
  background: var(--c-bg-elev, #1e293b); 
  border: 1px solid var(--c-border, rgba(255,255,255,0.1)); 
  border-radius: var(--r-full, 100px); 
  padding: 0 45px 0 20px; 
  color: var(--c-text-1, #fff); outline: none; opacity: 0; transition: 0.3s; 
}
.search-box:hover:where([data-rk-85c2fd]) .search-input:where([data-rk-85c2fd]), .search-box:focus-within:where([data-rk-85c2fd]) .search-input:where([data-rk-85c2fd]) { opacity: 1; }
.search-input:where([data-rk-85c2fd])::placeholder { color: var(--c-text-muted, #64748b); }

.search-btn:where([data-rk-85c2fd]) { 
  position: absolute; right: 0; top: 0;
  width: 44px; height: 44px; 
  background: var(--c-primary, #6366f1); border: none; 
  border-radius: 50%; color: #fff; cursor: pointer; 
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s;
}
.search-btn:hover:where([data-rk-85c2fd]) { background: var(--c-primary-light, #818cf8); }