Artifact panel

"use client"

import * as React from "react"
import { FileText, Sheet } from "lucide-react"
import { ArtifactPanel } from "@/components/artifact-panel"
import { SidePanel } from "@/components/side-panel"
import type { Artifact } from "@/lib/work"

const report: Artifact = {
  id: "report",
  title: "Pricing review",
  state: "Checked",
  formats: [
    { id: "docx", label: "Word" },
    { id: "pdf", label: "PDF" },
  ],
  // Markdown text is read into safe blocks; <b>tags</b> stay text and links aren't made.
  text: `# Pricing review

Three plans cover **92%** of last quarter's revenue. The other four can merge into them.

## What changes

- Starter and Basic become one plan at the Starter price.
- Team keeps its price; seats above 20 move to Business.

## What stays

Annual discounts and every grandfathered contract.`,
}

const data: Artifact = {
  id: "data",
  title: "Revenue by plan",
  state: "Not yet checked",
  file: { id: "csv", name: "revenue-by-plan.csv", mediaType: "text/csv", size: 184_000 },
}

export default function Example() {
  const [wide, setWide] = React.useState(false)
  const [downloaded, setDownloaded] = React.useState("")
  const download = (id: string, format?: string) => setDownloaded(`${id}${format ? ` as ${format}` : ""}`)
  const panel = (a: Artifact) => <ArtifactPanel artifact={a} onDownload={download} fullWidth={wide} onFullWidthChange={setWide} className="-m-4 h-[calc(100%+2rem)]" />
  return (
    <div className="flex max-w-2xl flex-col gap-2">
      <div className={wide ? "h-[26rem] overflow-hidden rounded-lg border bg-background" : "h-[26rem] max-w-md overflow-hidden rounded-lg border bg-chrome"}>
        <SidePanel
          tabs={[
            { id: "report", label: "Pricing review", Icon: FileText, content: panel(report) },
            { id: "data", label: "Revenue by plan", Icon: Sheet, content: panel(data) },
          ]}
        />
      </div>
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {downloaded && `Your app would download ${downloaded}.`}
      </p>
    </div>
  )
}