Edit View

import type { CollectionConfig } from 'frogbot'

export const Posts: CollectionConfig = {
  slug: 'posts',
  admin: {
    components: {
      edit: {
        beforeDocumentControls: ['/components/ReviewState#ReviewState'],
        editMenuItems: ['/components/EditActions#EditActions'],
        SaveButton: '/components/Save#Save',
      },
    },
  },
  fields: [],
}

import type { BeforeDocumentControlsServerProps } from 'frogbot'

export function ReviewState(_props: BeforeDocumentControlsServerProps) {
  return <span>Editorial review enabled</span>
}

'use client'

import type { EditMenuItemsClientProps } from 'frogbot'
import { DropdownMenuItem } from '@frogbotai/ui'
import { useDocumentInfo } from '@frogbotai/ui/admin'

export function EditActions(_props: EditMenuItemsClientProps) {
  const { id } = useDocumentInfo()

  return <DropdownMenuItem asChild><a href={`/review/${id}`}>Open review</a></DropdownMenuItem>
}

'use client'

import type { SaveButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Save(_props: SaveButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit()}>Save</Button>
}

'use client'

import type { SaveDraftButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function SaveDraft(_props: SaveDraftButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'draft' } })}>Save draft</Button>
}

'use client'

import type { PublishButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Publish(_props: PublishButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'published' } })}>Publish</Button>
}

'use client'

import type { UnpublishButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useForm } from '@frogbotai/ui/admin'

export function Unpublish(_props: UnpublishButtonClientProps) {
  const { submit } = useForm()

  return <Button onClick={() => void submit({ overrides: { _status: 'draft' } })}>Unpublish</Button>
}

'use client'

import type { PreviewButtonClientProps } from 'frogbot'
import { Button } from '@frogbotai/ui'
import { useDocumentInfo } from '@frogbotai/ui/admin'

export function Preview(_props: PreviewButtonClientProps) {
  const { collectionSlug, id } = useDocumentInfo()

  const openPreview = () => {
    const search = new URLSearchParams({ collection: collectionSlug ?? '', id: String(id ?? '') })

    window.open(`/preview?${search}`, '_blank', 'noopener,noreferrer')
  }

  return <Button onClick={openPreview}>Preview</Button>
}