A live Q&A list for talks and webinars where attendees ask and upvote questions, pinned/answered ones are ordered automatically, and hosts get a moderation menu to mark answered, pin or hide a question.
"use client";
import * as React from "react";
import { QuestionQueue } from "@/components/ui/question-queue";
const now = Date.now();
const initialQuestions = [
{
id: "1",
text: "What is the single biggest change in this release?",
author: "Priya N.",
votes: 14,
voted: false,
pinned: true,
createdAt: new Date(now - 2 * 60_000),
},
{
id: "2",
text: "Will the API keep backward compatibility with v1 clients?",
votes: 9,
voted: true,
createdAt: new Date(now - 6 * 60_000),
},
{
id: "3",
text: "How do we request a feature for the roadmap?",
author: "Marcus",
votes: 5,
answered: true,
createdAt: new Date(now - 40 * 60_000),
},
{
id: "4",
text: "Is there a self-hosted option planned?",
author: "Dana",
votes: 2,
createdAt: new Date(now - 3 * 60 * 60_000),
},
];
export default function QuestionQueueDemo() {
const [questions, setQuestions] = React.useState(initialQuestions);
const handleAsk = (text, options) => {
const anonymous = options.anonymous;
setQuestions((prev) => [
...prev,
{
id: Math.random().toString(36).slice(2),
text,
author: anonymous ? undefined : "You",
votes: 0,
voted: false,
createdAt: new Date(),
},
]);
};
const handleVote = (id, voted) => {
setQuestions((prev) =>
prev.map((question) =>
question.id === id
? { ...question, voted, votes: question.votes + (voted ? 1 : -1) }
: question,
),
);
};
const handleModerate = (id, action) => {
setQuestions((prev) =>
prev.map((question) => {
if (question.id !== id) return question;
if (action === "answer") return { ...question, answered: true };
if (action === "reopen") return { ...question, answered: false };
if (action === "pin") return { ...question, pinned: true };
if (action === "unpin") return { ...question, pinned: false };
if (action === "hide") return { ...question, hidden: true };
return question;
}),
);
};
return (
<div className="flex w-full justify-center bg-canvas p-6 text-ink">
<div className="w-full max-w-xl">
<QuestionQueue
questions={questions}
onAsk={handleAsk}
onVote={handleVote}
isHost
onModerate={handleModerate}
/>
</div>
</div>
);
}