Something went wrong. Try again.
Monorepo for Tangled
Something went wrong. Try again.
Svelte
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106<script lang="ts"> import { resolve } from '$app/paths'; import Search from '$icon/search';
interface Props { class?: string; }
let { class: className = '' }: Props = $props();
const appPath = (path: string) => resolve(path as '/');</script>
<form action={appPath('/search')} method="GET" class={`relative hidden md:block ${className}`}> <label class="sr-only" for="topbar-search">Search</label> <div class="search-box"> <Search class="size-4 shrink-0 text-fg-faint" aria-hidden="true" /> <input id="topbar-search" name="q" type="search" placeholder="Search..." class="search-input" /> <kbd class="search-kbd">Ctrl+K</kbd> </div></form>
<style> .search-box { --topbar-search-surface: #ffffff; --topbar-search-fg: #1f2937; --topbar-search-placeholder: #9ca3af; --topbar-search-kbd-fg: #9ca3af; --topbar-search-kbd-border: #e5e7eb; position: relative; display: flex; max-height: 30px; width: 20rem; align-items: center; gap: 0.5rem; border: 1px solid var(--color-border); border-radius: 0.25rem; background: var(--topbar-search-surface); padding: 1rem 0.375rem 1rem 0.5rem; }
@media (prefers-color-scheme: dark) { .search-box { --topbar-search-surface: #111827; --topbar-search-fg: #e5e7eb; --topbar-search-placeholder: #4b5563; --topbar-search-kbd-fg: #6b7280; --topbar-search-kbd-border: #4b5563; } }
@media (min-width: 1024px) { .search-box { width: 24rem; } }
.search-box:focus-within { z-index: 51; outline: 2px solid var(--color-ring); outline-offset: 1px; }
.search-input { min-width: 0; flex: 1; border: 0; border-radius: 0; background: transparent; padding: 0; color: var(--topbar-search-fg); font-size: 0.875rem; line-height: 1.25rem; outline: none; }
.search-input:focus { box-shadow: none; outline: none; }
.search-input::placeholder { color: var(--topbar-search-placeholder); }
.search-kbd { display: flex; align-items: center; border: 1px solid var(--topbar-search-kbd-border); border-bottom-width: 2px; border-radius: 0.25rem; padding: 0 0.25rem; font-family: var(--font-sans); color: var(--topbar-search-kbd-fg); font-size: 0.75rem; line-height: 1.25rem; pointer-events: none; }
.search-input:focus + .search-kbd, .search-box:focus-within .search-kbd, .search-input:not(:placeholder-shown) + .search-kbd { display: none; }</style>