સામગ્રી પર જાઓ
Yuvashadcn
shadcn/ui માટે Yuvaમેનૂ

shadcn/ui માટે Yuva

લાઇવ ચેટ, દસ્તાવેજ પૃષ્ઠોની ચર્ચાઓ અને મેઇલિંગ લિસ્ટ સાઇન-અપ માટે React કમ્પોનન્ટ, જે તમારા shadcn/ui પ્રોજેક્ટમાં કૉપિ થાય છે.

Yuva રજિસ્ટ્રી કમ્પોનન્ટ અને hooks નો સમૂહ છે જેને shadcn CLI તમારા પ્રોજેક્ટમાં કૉપિ કરે છે. તે તમારી થીમ વાપરે છે, 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