Components
Loading preview...
Here is Branch component
npx shadcn@latest add https://21st.dev/r/vercel/branchimport {
Branch,
BranchMessages,
BranchNext,
BranchPage,
BranchPrevious,
BranchSelector,
} from '@/components/ui/branch';
const Message = ({ from, children }) => (
<div
className={`flex w-full ${from === 'user' ? 'justify-end' : 'justify-start'} py-1`}
>
<div
className={`rounded-2xl px-3 py-2 max-w-[70%] text-sm shadow-sm break-words ${
from === 'user'
? 'bg-indigo-600 text-white'
: 'bg-gray-200 text-gray-900'
}`}
>
{children}
</div>
</div>
);
const MessageContent = ({ children }) => (
<span className="leading-relaxed">{children}</span>
);
export default function DemoOne() {
return <Branch defaultBranch={0}>
<BranchMessages>
<Message from="user">
<MessageContent>Hello</MessageContent>
</Message>
<Message from="user">
<MessageContent>Hi!</MessageContent>
</Message>
</BranchMessages>
<BranchSelector from="user">
<BranchPrevious />
<BranchPage />
<BranchNext />
</BranchSelector>
</Branch>
}