import { useQueryParams } from 'manicjs';

export default function Page() {
  const searchParams = useQueryParams();
  // ...
}

import React from 'react';
import { useQueryParams } from 'manicjs';
declare const replaceUrl: (_url: string) => void;

export function SearchResults() {
  const searchParams = useQueryParams();
  
  const query = searchParams.get('q') || '';
  const page = searchParams.get('page') || '1';
  const sort = searchParams.get('sort') || 'date';
  
  return (
    <div>
      <h1>Results for "{query}"</h1>
      <p>Page {page}, sorted by {sort}</p>
    </div>
  );
}

import React from 'react';
import { useQueryParams } from 'manicjs';
declare const replaceUrl: (_url: string) => void;

export function SearchInput() {
  const searchParams = useQueryParams();
  
  const handleSearch = (term: string) => {
    const params = new URLSearchParams(searchParams);
    params.set('q', term);
    params.set('page', '1'); // Reset pagination
    
    // Update URL without navigation
    replaceUrl(`?${params.toString()}`);
  };
  
  return (
    <input
      defaultValue={searchParams.get('q') || ''}
      onChange={(e: any) => handleSearch(e.target.value)}
    />
  );
}

import React from 'react';
import { useQueryParams } from 'manicjs';
declare const replaceUrl: (_url: string) => void;

export function Paginator() {
  const searchParams = useQueryParams();
  const currentPage = parseInt(searchParams.get('page') || '1', 10);
  
  const goToPage = (page: number) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', String(page));
    replaceUrl(`?${params.toString()}`);
  };
  
  return (
    <nav>
      <button disabled={currentPage <= 1} onClick={() => goToPage(currentPage - 1)}>
        Previous
      </button>
      <span>Page {currentPage}</span>
      <button onClick={() => goToPage(currentPage + 1)}>
        Next
      </button>
    </nav>
  );
}

import React from 'react';
import { useQueryParams } from 'manicjs';
declare const replaceUrl: (_url: string) => void;

export function TagFilter() {
  const searchParams = useQueryParams();
  
  // getAll returns array for multiple values
  const tags = searchParams.getAll('tag');
  // ['react', 'typescript']
  
  const toggleTag = (tag: string) => {
    const params = new URLSearchParams(searchParams);
    const current = params.getAll('tag');
    
    if (current.includes(tag)) {
      // Remove tag
      params.delete('tag');
      current.filter(t => t !== tag).forEach(t => params.append('tag', t));
    } else {
      // Add tag
      params.append('tag', tag);
    }
    
    replaceUrl(`?${params.toString()}`);
  };
  
  return (
    <div>
      {tags.map(tag => (
        <span key={tag}>{tag}</span>
      ))}
    </div>
  );
}

import React, { useEffect, useState } from 'react';
import { useQueryParams } from 'manicjs';
declare const replaceUrl: (_url: string) => void;

export function DataFetcher() {
  const searchParams = useQueryParams();
  const [data, setData] = useState<{ items: string[] } | null>(null);
  
  // Refetch when query params change
  useEffect(() => {
    const query = searchParams.get('q');
    const page = searchParams.get('page');
    
    fetch(`/api/items?q=${query}&page=${page}`)
      .then(res => res.json())
      .then((d: any) => setData(d));
  }, [searchParams.toString()]); // Re-run when params string changes
  
  if (!data) return <div>Loading...</div>;
  
  return <div>{data.items}</div>;
}