BJORK Inline AI edit

"use client";
import { ThemeProvider as BjorkDemoThemeProvider } from "next-themes";
import { useState } from "react";
import { InlineAiEdit, SAMPLE_DOCUMENT, mockRewrite } from "@/components/ui/bjork-inline-ai-edit";

const POSED = "It is a lot more faster then before and it actually understands what you mean";

const POSE_START = SAMPLE_DOCUMENT.indexOf(POSED);

const POSE = {
  start: POSE_START,
  end: POSE_START + POSED.length,
  proposal: "It is much faster, and it understands what you mean",
  label: "Improve",
};

function Demo({
  doc,
  setDoc,
  run,
}: {
  doc: string;
  setDoc: (doc: string) => void;
  run: number;
}) {
  const isPreview = false;

  if (isPreview) {
    return (
      <div className="w-[min(600px,calc(100vw-56px))] pb-12">
        <InlineAiEdit defaultValue={SAMPLE_DOCUMENT} pose={POSE} />
      </div>
    );
  }

  return (
    <div className="flex w-[min(600px,calc(100vw-56px))] flex-col items-stretch gap-6 pb-10">
      <InlineAiEdit key={run} value={doc} onValueChange={setDoc} onRewrite={mockRewrite} />
      <div className="flex flex-wrap items-center justify-center gap-3">
        <span className="font-mono text-[11px] text-[color:var(--bjork-text-faint)]">Select text, or click a paragraph and press ⌘K</span>
      </div>
    </div>
  );
}
function SourceDemo(){
const [doc, setDoc] = useState(SAMPLE_DOCUMENT);
const [run, setRun] = useState(0);
const reset = () => {
    setDoc(SAMPLE_DOCUMENT);
    setRun((r) => r + 1);
  };
return <>

      <Demo doc={doc} setDoc={setDoc} run={run} />
    
</>;
}
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>}