The preview runs on sample data. It needs no network and no channel.
tsx
import { YuvaDiscussions } from "@/components/yuva-discussions"
export function PageDiscussions({ title }: { title: string }) {
return (
<YuvaDiscussions
server={process.env.NEXT_PUBLIC_YUVA_SERVER}
channel={process.env.NEXT_PUBLIC_YUVA_CHANNEL}
pageTitle={title}
/>
)
}Installation
Run this in a shadcn project. The files are copied into your own code.
Shell
npx shadcn@latest add https://useyuva.com/r/yuva-discussions.jsonShell
pnpm dlx shadcn@latest add https://useyuva.com/r/yuva-discussions.jsonShell
yarn dlx shadcn@latest add https://useyuva.com/r/yuva-discussions.jsonShell
bunx --bun shadcn@latest add https://useyuva.com/r/yuva-discussions.jsonUsage
tsx
import { YuvaDiscussions } from "@/components/yuva-discussions"
<YuvaDiscussions server={server} channel={channel} />Props
YuvaDiscussionsProps
| Prop | Type |
|---|---|
server? | string |
channel? | string |
identityToken? | IdentityTokenSource | null |
client? | YuvaClient |
page? | string |
pageTitle? | string |
defaultSort? | DiscussionSort |
labels? | Partial<YuvaDiscussionsLabels> |
locale? | string |
className? | string |
Labels
Every label has an English default. Pass a partial labels object to change or translate them.
| Label | Default |
|---|---|
heading | "Discussions" |
sortNew | "New" |
sortTop | "Top" |
sortUnanswered | "Unanswered" |
newDiscussion | "New discussion" |
empty | "No discussions on this page yet. Start the first one." |
emptyUnanswered | "Every discussion on this page has an answer." |
loadMore | "Load more" |
loadError | "Discussions could not be loaded." |
retry | "Try again" |
back | "All discussions" |
replies | (count) => (count === 1 ? "1 reply" : `${count} replies`) |
votes | (count) => (count === 1 ? "1 vote" : `${count} votes`) |
answered | "Answered" |
acceptedAnswer | "Accepted answer" |
markAnswer | "Mark as answer" |
unmarkAnswer | "Unmark as answer" |
locked | "Locked" |
lockedNote | "This discussion is locked. It takes no new replies." |
pending | "Awaiting approval" |
pendingNote | "Only you can see this until a moderator approves it." |
upvote | "Upvote" |
removeUpvote | "Remove upvote" |
reply | "Reply" |
follow | "Follow" |
unfollow | "Unfollow" |
edit | "Edit" |
save | "Save" |
cancel | "Cancel" |
delete | "Delete" |
deleteConfirm | "Delete this post?" |
edited | "edited" |
deletedPost | "This post was deleted." |
deletedAuthor | "Deleted reader" |
deletedMember | "Deleted member" |
anonymous | "Anonymous" |
team | "Team" |
signIn | "Sign in" |
signInHint | "Sign in to start a discussion, reply and vote." |
signOut | "Sign out" |
signedInAs | (name) => `Signed in as ${name}` |
titleLabel | "Title" |
titlePlaceholder | "What is your question or idea?" |
bodyLabel | "Message" |
bodyPlaceholder | "Add the details. Markdown works." |
replyPlaceholder | "Write a reply. Markdown works." |
write | "Write" |
preview | "Preview" |
previewEmpty | "Nothing to preview." |
markdownHint | "Markdown is supported." |
startDiscussion | "Start discussion" |
postReply | "Reply" |
errorSignIn | "Sign in to post." |
errorLocked | "This discussion is locked." |
errorEditWindow | "Posts can be edited for 30 minutes after posting." |
errorRateLimited | "Too many posts. Wait a minute and try again." |
errorPopupBlocked | "Allow pop-ups for this site to sign in." |
errorOff | "Discussions are turned off." |
errorGeneric | "Something went wrong. Try again." |
feedbackQuestion | "Was this page helpful?" |
feedbackYes | "Yes" |
feedbackNo | "No" |
feedbackThanks | "Thanks for your feedback." |
Dependencies
Installing this item also adds the following.