Function Querystring

packages/docs/src/components/querystring.tsx:10–43

({
  path,
  value,
  keepKeys,
  ...props
}: QuerystringProps)

}

export function Querystring({
  path,
  value,
  keepKeys,
  ...props
}: QuerystringProps) {
  const search = useMemo(
    () => filterQueryKeys(value, keepKeys),
    [value, keepKeys]
  )
  return (
    <QuerystringSkeleton {...props}>
      {path && <span className="text-zinc-500">{path}</span>}
      {Array.from(search.entries()).map(([key, value], i) => (
        <Fragment key={key + i}>
          <span className="text-zinc-500">
            {i === 0 ? (
              '?'
            ) : (
              <>
                <wbr />&
              </>
            )}
          </span>
          <span className="text-[#005CC5] dark:text-[#79B8FF]">{key}</span>=
          <span className="text-[#D73A49] dark:text-[#F97583]">{value}</span>
        </Fragment>
      ))}
      {search.size === 0 && (
        <span className="text-zinc-500 italic">{'<empty query>'}</span>
      )}
    </QuerystringSkeleton>
  )
}

export function QuerystringSkeleton({
  children,