Message branches

"use client"

import * as React from "react"
import { MessageBranches } from "@/components/message-branches"

const versions = [
  "The migration adds a nullable region column to orders, so it’s safe to run on Production.",
  "The migration adds a nullable region column to orders. It takes a brief lock, so run it outside peak hours.",
  "The migration adds region to orders. Backfill it on Staging first; the table has 1.2M rows.",
]

export default function Example() {
  const [index, setIndex] = React.useState(versions.length - 1)
  return (
    <div className="flex max-w-lg flex-col gap-2">
      <p className="text-sm">{versions[index]}</p>
      <MessageBranches index={index} count={versions.length} onChange={setIndex} />
    </div>
  )
}