உள்ளடக்கத்துக்குச் செல்
shadcn/ui-க்கான Yuvaமெனு

shadcn/ui-க்கான Yuva

நேரலை அரட்டை, ஆவணப் பக்க விவாதங்கள், அஞ்சல் பட்டியல் பதிவு ஆகியவற்றுக்கான React கூறுகள், உங்கள் shadcn/ui திட்டத்தில் நகலெடுக்கப்படும்.

Yuva பதிவகம் என்பது shadcn CLI உங்கள் திட்டத்தில் நகலெடுக்கும் கூறுகள் மற்றும் hooks-இன் தொகுப்பு. அவை உங்கள் தீமைப் பயன்படுத்துகின்றன, 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