what is the meaning of the colons in between { placeholder }: { placeholder: string } in the props of the Search component? This also shows up later in the code in the main Page component….

Is it to say that the expected placeholder prop is to be of string datatype? Or is it some sort of destructuring?

export default function Search({ placeholder }: { placeholder: string }) {
  const searchParams = useSearchParams();
  const pathname = usePathname();

  return (
      <input
        className="red"
        placeholder={placeholder}
        onChange={(e) => {
          handleSearch(e.target.value)
        }}
      />
  );
}

export default async function Page({
  searchParams,
}: {
  searchParams?: {
    query?: string;
    page?: string;
  }

}) {
  const query = searchParams?.query || "";
  const currentPage = Number(searchParams?.page) || 1;
  
  return (
     <>
       <Search placeholder="Search invoices..." />
       <Suspense key={query + currentPage} fallback={<InvoicesTableSkeleton />}>
          <Table query={query} currentPage={currentPage} />
        </Suspense>
     </>

  );
}