"use client" import * as React from "react" import { RiSearchLine } from "@remixicon/react" import { Badge } from "@/components/ui/badge" import { Input } from "@/components/ui/input" type Result = { title: string snippet: string type: string updated: string } const results: Result[] = [ { title: "Getting started with Acme", snippet: "Install the CLI, create your first project, and ship a page in under five minutes with copy-paste blocks.", type: "Docs", updated: "Jun 12, 2026", }, { title: "Authentication and sessions", snippet: "Connect a provider, protect your routes, and read the current session on the server or the client.", type: "Guide", updated: "May 30, 2026", }, { title: "Theming and design tokens", snippet: "Every block is theme-aware. Override semantic tokens once and every component updates automatically.", type: "Docs", updated: "Jun 18, 2026", }, { title: "Deploying to production", snippet: "A checklist for going live: environment variables, build caching, and zero-downtime releases.", type: "Guide", updated: "Jun 02, 2026", }, ] export default function SearchBlock() { const [query, setQuery] = React.useState("") const q = query.trim().toLowerCase() const filtered = q ? results.filter((r) => `${r.title} ${r.snippet} ${r.type}`.toLowerCase().includes(q) ) : results return (

{filtered.length} {filtered.length === 1 ? "Result" : "Results"}

{filtered.length === 0 ? (

No results for “{query}”.

) : (

{result.type} Updated {result.updated}
{result.title}
{result.snippet}

)}

) }

Misc - Resources Blocks

Select an Item to view its code