Response compare is a production-ready ai component from BJORK UI, packaged for shadcn registries.
Loading preview...
"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { ResponseCompare, SAMPLE_COMPARISON, type CompareVote } from "@/components/ui/bjork-response-compare";
const POSED_VOTE: CompareVote = {
choice: "a",
rubric: {
Accuracy: { a: true, b: false },
Helpfulness: { a: true, b: false },
Tone: { a: true, b: true },
},
};
const DEFAULT_BLIND = true;
function Demo({
blind,
run,
vote,
onVote,
}: {
blind: boolean;
run: number;
vote: CompareVote | null;
onVote: (vote: CompareVote | null) => void;
}) {
const isPreview = false;
if (isPreview) {
return (
<div className="w-[min(700px,calc(100vw-56px))]">
<ResponseCompare {...SAMPLE_COMPARISON} rubric={[]} defaultValue={POSED_VOTE} />
</div>
);
}
return (
<div className="flex w-[min(700px,calc(100vw-56px))] flex-col items-stretch gap-6">
<ResponseCompare key={`${run}-${blind}`} {...SAMPLE_COMPARISON} blind={blind} onVote={onVote} />
<p className="text-center font-mono text-[11px] text-[color:var(--bjork-text-faint)]">
{vote ? `onVote → ${vote.choice}` : "Arrow keys move between choices"}
</p>
</div>
);
}
function SourceDemo(){
const [blind, setBlind] = useState(DEFAULT_BLIND);
const [run, setRun] = useState(0);
const [vote, setVote] = useState<CompareVote | null>(null);
const reset = () => {
setBlind(DEFAULT_BLIND);
setVote(null);
setRun((r) => r + 1);
};
return <>
<Demo blind={blind} run={run} vote={vote} onVote={setVote} />
</>;
}
export default function BjorkRegistryPreview(){return <BjorkDemoThemeProvider attribute="class" defaultTheme="dark" enableSystem={false} storageKey="bjork-review-demo-theme"><div data-component-demo className="dark flex min-h-screen w-full items-center justify-center bg-[var(--bjork-bg)] p-8 text-[var(--bjork-text)]"><div className="w-full max-w-[850px]"><SourceDemo/></div></div></BjorkDemoThemeProvider>}