// app/page.tsx  (Server Component — no directive needed)
import { db } from '@/lib/db';
import { SearchBar } from './SearchBar';

export default async function Page() {
  const users = await db.users.findMany(); // direct DB access

  return (
    <main>
      <SearchBar />  {/* client component */}
      {users.map(u => <p key={u.id}>{u.name}</p>)}
    </main>
  );
}

// app/SearchBar.tsx
'use client';  // ← marks the client boundary

import { useState } from 'react';

export function SearchBar() {
  const [query, setQuery] = useState('');
  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}