【nuqs】NextJs & nqus 【#3 Create Search Filters】

【#3 Create Search Filters】

YouTube: https://youtu.be/xrAwqBGvUG8
https://youtu.be/xrAwqBGvUG8

今回はparamsを設定するための入力フォーム等を実装します。

npx shadcn@latest add command
npx shadcn@latest add input

src/app/page.tsx

import { SearchFilters } from "@/components/search-filters";

export default function Home() {
  // void queryClient.prefetchQuery(
  //   trpc.getMany.queryOptions({
  //     ...qStrings,
  //   })
  // )

  return (
    <div className="w-full h-full flex flex-col justify-center items-center p-10 gap-y-3">
      <h1 className="text-3xl font-black">Search Filters</h1>
      <SearchFilters />
    </div>
  );
}

src/components/search-filters.tsx

"use client";

import { Colors, useQueryStrings } from "@/hooks/use-query-strings";
import { Input } from "@/components/ui/input";
import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
} from "@/components/ui/command";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";

export const SearchFilters = () => {
  const [qStrings, setQStrings] = useQueryStrings();

  // const { data } = useSuspenseQuery(
  //   trpc.meetings.getMany.queryOptions({
  //     ...qStrings,
  //   })
  // )

  return (
    <div className="flex flex-col justify-center items-center gap-y-3">
      <Input
        placeholder="Filter by search"
        className="h-9 bg-white w-[200px] pl-7"
        value={qStrings.search}
        onChange={(e) => setQStrings({ search: e.target.value })}
      />

      <Input
        placeholder="Filter by page"
        className="h-9 bg-white w-[200px] pl-7"
        type="number"
        value={qStrings.page}
        onChange={(e) => setQStrings({ page: Number(e.target.value) })}
      />

      <Command className="w-[200px] border rounded-lg">
        <CommandInput placeholder="Select a color..." />
        <CommandList>
          <CommandEmpty>No colors found.</CommandEmpty>
          <CommandGroup heading="Colors">
            {Object.values(Colors).map((color) => (
              <CommandItem
                key={color}
                value={color}
                onSelect={(value) => {
                  setQStrings({ color: value as Colors });
                }}
              >
                <CheckIcon
                  className={cn(
                    "mr-2 h-4 w-4",
                    qStrings.color === color ? "opacity-100" : "opacity-0"
                  )}
                />

                <span
                  className="w-3 h-3 mr-2 rounded-full"
                  style={{
                    backgroundColor: color,
                  }}
                />
                {color}
              </CommandItem>
            ))}
          </CommandGroup>
        </CommandList>
      </Command>
    </div>
  );
};