gitfor/platform

import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const STEPS = 3;
const INTERVAL_MS = 1500;

const LINES = [
  { kind: "ctx", n: 41, text: "export function rank(items: Item[], query: string) {" },
  { kind: "del", n: 42, text: "  return items.filter((item) => item.name.includes(query));" },
  { kind: "add", n: 42, text: "  return items.filter((item) => fuzzy(item.name, query));" },
  { kind: "ctx", n: 43, text: "}" },
] as const;

const LINE_STYLES = {
  ctx: "text-kumo-subtle",
  del: "bg-danger-950/40 text-kumo-danger",
  add: "bg-success-950/40 text-kumo-success",
} as const;

const SIGN = { ctx: " ", del: "-", add: "+" } as const;

export function ReviewDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  return (
    <DemoWindow
      title="src/palette/rank.ts"
      label="An inline review comment with a suggested change that the author applies"
      className={className}
    >
      <div className="font-mono text-xs">
        {LINES.map((line) => (
          <div key={`${line.kind}${line.n}`} className={cn("flex gap-3 px-4 py-1", LINE_STYLES[line.kind])}>
            <span className="w-6 shrink-0 text-right text-kumo-inactive">{line.n}</span>
            <span className="shrink-0">{SIGN[line.kind]}</span>
            <span className="truncate">{line.text}</span>
          </div>
        ))}