bun install

bun run dev

problem:

[you may encounter bug about rpc-websockets https://www.reddit.com/r/solana/comments/1d6q7rx/solanaweb3js_rpcwebsockets_issue/]

./node_modules/@solana/web3.js/lib/index.browser.esm.js:12:0 Module not found: Can't resolve 'rpc-websockets/dist/lib/client'

https://nextjs.org/docs/messages/module-not-found

Import trace for requested module: ./src/components/provider/SolanaWalletProvider/SolanaWalletProvider.tsx ./src/pages/_app.tsx

if so, run: bun add [email protected]

storybook:

bun run storybook

Nov 4, 2024

Plan:

• add search bar from Command component.

bunx --bun shadcn@latest add command

You need to create a components.json file to add components. Proceed? … yes Which style would you like to use? › Default Which color would you like to use as the base color? › Neutral Would you like to use CSS variables for theming? … no

where is the main page?

src/pages/index.tsx

adding

import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, } from "@/components/ui/command"

to src/pages/index.tsx

homepage - search bar

old search bar: src/components/base/HeaderSearch/HeaderSearch.tsx

new search bar: src/parts/search/index.tsx

https://nextjs.org/learn/dashboard-app/adding-search-and-pagination

---

migrate the search functionality using Next.js's recommended patterns.

"use client"

import * as React from "react"
import { useRouter, useSearchParams } from "next/navigation"
import {
  CommandDialog,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command"

export function Search() {
  const [open, setOpen] = React.useState(false)
  const router = useRouter()
  const searchParams = useSearchParams()

  React.useEffect(() => {
    const down = (e: KeyboardEvent) => {
      if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
        e.preventDefault()
        setOpen((open) => !open)
      }
    }
    document.addEventListener("keydown", down)
    return () => document.removeEventListener("keydown", down)
  }, [])

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams)
    if (term) {
      params.set('query', term)
    } else {
      params.delete('query')
    }
    
    router.push(`/search?${params.toString()}`)
    setOpen(false)
  }

  return (
    <>
      <p className="text-sm text-muted-foreground">
        Press{" "}
        <kbd className="pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground opacity-100">
          <span className="text-xs">⌘</span>K
        </kbd>
      </p>
      <CommandDialog open={open} onOpenChange={setOpen}>
        <CommandInput 
          placeholder="Search..." 
          onValueChange={handleSearch}
        />
        <CommandList>
          <CommandEmpty>No results found.</CommandEmpty>
          <CommandGroup heading="Recent Searches">
            {/* Add recent searches here */}
          </CommandGroup>
        </CommandList>
      </CommandDialog>
    </>
  )
}

Then create a new search page:

import { Suspense } from 'react'

export default function SearchPage({
  searchParams,
}: {
  searchParams?: {
    query?: string
  }
}) {
  const query = searchParams?.query || ''

  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        {/* Add your search results component here */}
        <div>Search results for: {query}</div>
      </Suspense>
    </div>
  )
}

Key changes made:

1. Used Next.js's built-in useSearchParams and useRouter for handling search
2. Simplified the search component to use URL-based state
3. Created a dedicated search page that can handle server-side rendering
4. Removed the old localStorage fallback in favor of Next.js routing
5. Kept the command palette UI but integrated it with the new search system

You'll need to:

1. Update your routing configuration to handle the new search page
2. Implement the actual search results component
3. Add any loading states or error boundaries as needed

The old HeaderSearch component can be removed as its functionality is now handled by the new search implementation.

---

function handleSearch(term: string) {
  if (term) {
    router.push(`/search/${term}`)
  } else {
    router.push('/')
  }
  setOpen(false)
}

This change:

1. Removes the URL search params handling
2. Directly pushes to /search/${term} format
3. Redirects to home if search is empty

The relevant lines that need to be replaced in the original file are:

  function handleSearch(term: string) {
    const params = new URLSearchParams(searchParams)
    if (term) {
      params.set('query', term)
    } else {
      params.delete('query')
    }
    
    router.push(`/search?${params.toString()}`)
    setOpen(false)
  }

MOVE TO MAP