ವಿಷಯಕ್ಕೆ ಹೋಗಿ
Yuvashadcn
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

ಮುಂದೆ →Yuva chat