ഉള്ളടക്കത്തിലേക്ക് പോകുക
Yuvashadcn
shadcn/ui-ക്കുള്ള Yuvaമെനു

shadcn/ui-ക്കുള്ള Yuva

ലൈവ് ചാറ്റ്, ഡോക്യുമെന്റേഷൻ പേജ് ചർച്ചകൾ, മെയിലിംഗ് ലിസ്റ്റ് സൈൻ-അപ്പ് എന്നിവയ്ക്കുള്ള React ഘടകങ്ങൾ, നിങ്ങളുടെ shadcn/ui പ്രോജക്റ്റിലേക്ക് പകർത്തപ്പെടും.

shadcn CLI നിങ്ങളുടെ പ്രോജക്റ്റിലേക്ക് പകർത്തുന്ന ഘടകങ്ങളുടെയും hooks-ന്റെയും ഒരു ശേഖരമാണ് Yuva രജിസ്ട്രി. അവ നിങ്ങളുടെ തീം ഉപയോഗിക്കുന്നു, useyuva ക്ലയന്റ് വഴി Yuva-യുമായി സംസാരിക്കുന്നു, എഡിറ്റ് ചെയ്യുന്നത് നിങ്ങളുടെ കൈയിലാണ്.

ആവശ്യകതകൾ

  • ഇതിനകം shadcn/ui ഉപയോഗിക്കുന്ന ഒരു പ്രോജക്റ്റ്, React-ഉം Tailwind CSS-ഉം സഹിതം.
  • ഒരു Yuva ചാറ്റ് ചാനലും അതിന്റെ പൊതു കീയും (yuva_pk_…).

ഒരു ചാനൽ സജ്ജമാക്കുക

  1. Yuva പാനലിൽ ക്രമീകരണങ്ങൾ, നിങ്ങളുടെ ഇൻബോക്സ്, ചാനലുകൾ തുറന്ന് ഒരു ചാറ്റ് ചാനൽ ചേർക്കുക.
  2. ഘടകങ്ങൾ കാണിക്കുന്ന ഓരോ origin-നെയും അനുവദിച്ച origin ആയി ചേർക്കുക: നിങ്ങളുടെ സൈറ്റും ഡെവലപ്മെന്റ് സെർവറും.
  3. ചാനലിന്റെ പൊതു കീ പകർത്തുക. അത് രഹസ്യമല്ല.
  4. ചർച്ചകൾക്കായി ചാനലിന്റെ ചർച്ചാ മോഡ് moderated അല്ലെങ്കിൽ open ആക്കുക. സബ്സ്ക്രൈബ് ഫോമിനായി ഒരു പൊതു മെയിലിംഗ് ലിസ്റ്റ് ചേർക്കുക.

കീയും നിങ്ങളുടെ Yuva സെർവറിന്റെ വിലാസവും ഘടകങ്ങൾക്ക് നൽകുക, ഉദാഹരണത്തിന് എൻവയോൺമെന്റിൽ:

.env.local
NEXT_PUBLIC_YUVA_SERVER=https://support.example.com
NEXT_PUBLIC_YUVA_CHANNEL=yuva_pk_xxxxxxxxxxxxxxxx

നിങ്ങളുടെ ആദ്യ ഇനം ചേർക്കുക

ചാറ്റ് ബ്ലോക്ക് ഇൻസ്റ്റാൾ ചെയ്യുക, എന്നിട്ട് റെൻഡർ ചെയ്യുക:

Shell
npx shadcn@latest add https://useyuva.com/r/yuva-chat.json
tsx
import { YuvaChat } from "@/components/yuva-chat"

export function Support() {
  return (
    <YuvaChat
      server={process.env.NEXT_PUBLIC_YUVA_SERVER}
      channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
    />
  )
}

ഇനങ്ങൾ

രജിസ്ട്രിയിലെ എല്ലാ ഇനങ്ങളും, സൈഡ്ബാർ പോലെ ഗ്രൂപ്പ് ചെയ്തിരിക്കുന്നു.

ബ്ലോക്കുകൾ

ഘടകങ്ങൾ

Hooks

അടുത്തത് →Yuva chat