Yuva help search

A search field over the help center with live results: the matched words highlighted in the title and excerpt, and the click counted for the report.

ਪ੍ਰੀਵਿਊ ਨਮੂਨਾ ਡੇਟਾ ਉੱਤੇ ਚੱਲਦਾ ਹੈ। ਇਸ ਨੂੰ ਨੈੱਟਵਰਕ ਜਾਂ ਚੈਨਲ ਦੀ ਲੋੜ ਨਹੀਂ।

tsx

import { YuvaHelpSearch } from "@/components/yuva-help-search"

export function Search() {
  return (
    <YuvaHelpSearch
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
      onSelect={(article, query) => console.log(article.title, query)}
    />
  )
}

ਇੰਸਟਾਲੇਸ਼ਨ

ਇਸ ਨੂੰ ਇੱਕ shadcn ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਚਲਾਓ। ਫ਼ਾਈਲਾਂ ਤੁਹਾਡੇ ਆਪਣੇ ਕੋਡ ਵਿੱਚ ਕਾਪੀ ਹੋ ਜਾਂਦੀਆਂ ਹਨ।

Shell

npx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

pnpm dlx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

yarn dlx shadcn@latest add https://useyuva.com/r/yuva-help-search.json

Shell

bunx --bun shadcn@latest add https://useyuva.com/r/yuva-help-search.json

ਵਰਤੋਂ

tsx

import { YuvaHelpSearch } from "@/components/yuva-help-search"

<YuvaHelpSearch server={server} channel={channel} onSelect={(article) => setId(article.id)} />

Props

`YuvaHelpSearchProps`

Prop	ਕਿਸਮ
`server?`	`string`
`channel?`	`string`
`client?`	`YuvaClient`
`identityToken?`	`IdentityTokenSource \| null`
`locale?`	`string`
`help?`	`YuvaHelpState`
`query?`	`string`
`onQueryChange?`	`(query: string) => void`
`onSelect?`	`(article: ClientHelpArticleSummary, query: string) => void`
`labels?`	`Partial<YuvaHelpLabels>`
`className?`	`string`

ਲੇਬਲ

ਲੇਬਲ Yuva help ਪੰਨੇ ਉੱਤੇ ਸੂਚੀਬੱਧ ਹਨ।

ਨਿਰਭਰਤਾਵਾਂ

ਇਸ ਆਈਟਮ ਨੂੰ ਇੰਸਟਾਲ ਕਰਨ ਨਾਲ ਹੇਠਾਂ ਦਿੱਤੇ ਵੀ ਜੁੜ ਜਾਂਦੇ ਹਨ।

Yuva help search

ਇੰਸਟਾਲੇਸ਼ਨ

ਵਰਤੋਂ

Props

YuvaHelpSearchProps

ਲੇਬਲ

ਨਿਰਭਰਤਾਵਾਂ

shadcn/ui ਦੇ ਕੰਪੋਨੈਂਟ

Yuva ਦੀਆਂ ਹੋਰ ਆਈਟਮਾਂ

npm ਪੈਕੇਜ

`YuvaHelpSearchProps`