Relationship

import { Relationship } from "@/components/ui/relationship"

<Relationship
  items={posts}
  selectedItems={selectedPosts}
  onChange={(items) => setSelectedPosts(items)}
  multiple={true}
  max={5}
/>

interface RelationshipItem {
  id: string | number          // Unique identifier
  title: string               // Display title
  type?: string              // Content type (post, page, etc.)
  status?: "publish" | "draft" | "private"  // Publication status
  taxonomy?: string[]        // Categories, tags, etc.
  featured_image?: string    // Image URL
  excerpt?: string          // Short description
  date?: string            // Publication date
  url?: string            // Preview URL
}

const posts: RelationshipItem[] = [
  {
    id: 1,
    title: "Introduction to React Hooks",
    type: "post",
    status: "publish",
    taxonomy: ["React", "JavaScript"],
    excerpt: "Learn the fundamentals of React Hooks...",
    date: "2024-01-15",
    featured_image: "https://example.com/image.jpg",
    url: "/posts/react-hooks"
  },
  // ... more items
]

const fetchPosts = async (filter: RelationshipFilter): Promise<RelationshipItem[]> => {
  const response = await fetch('/api/posts', {
    method: 'POST',
    body: JSON.stringify(filter)
  })
  return response.json()
}

<Relationship
  onLoad={fetchPosts}
  selectedItems={selected}
  onChange={setSelected}
  postTypes={["post", "page"]}
  taxonomies={["category", "tag"]}
/>

interface RelationshipFilter {
  search?: string           // Search query
  post_type?: string[]     // Filter by post types
  post_status?: string[]   // Filter by post statuses  
  taxonomy?: string[]      // Filter by taxonomies
}

// Show all filters (default)
<Relationship showFilters={true} />

// Show only search
<Relationship showFilters={["search"]} />

// Show search and post type filters
<Relationship showFilters={["search", "post_type"]} />

// Hide all filters
<Relationship showFilters={false} />

<Relationship
  showExcerpt={true}          // Show item excerpts
  showDate={true}             // Show publication dates
  showFeaturedImage={true}    // Show featured images
  showPreview={true}          // Show preview links
  sortable={true}             // Show drag handles (UI ready)
/>

// Return full objects (default)
<Relationship
  returnFormat="object"
  onChange={(items) => {
    // items: RelationshipItem[]
    console.log(items)
  }}
/>

// Return only IDs
<Relationship
  returnFormat="id"
  onChange={(items) => {
    // items: (string | number)[]
    console.log(items) // [1, 2, 3]
  }}
/>

<Relationship
  required={true}           // Field is required
  min={1}                  // Minimum selections
  max={5}                  // Maximum selections
  error="Please select at least one item"
  variant="error"          // Error styling
/>

interface RelationshipItem {
  id: string | number          // Unique identifier
  title: string               // Display title
  type?: string              // Post type (post, page, etc.)
  status?: "publish" | "draft" | "private"  // Publication status
  taxonomy?: string[]        // Categories, tags, etc.
  featured_image?: string    // Image URL
  excerpt?: string          // Short description
  date?: string            // Publication date
  url?: string            // Preview URL
}

interface RelationshipFilter {
  search?: string           // Search query
  post_type?: string[]     // Filter by post types
  post_status?: string[]   // Filter by post statuses
  taxonomy?: string[]      // Filter by taxonomies
}

const [parentPage, setParentPage] = useState(null)

<Relationship
  items={pages}
  selectedItems={parentPage ? [parentPage] : []}
  onChange={(items) => setParentPage(items[0] || null)}
  multiple={false}
  max={1}
  required={true}
  showFilters={["search"]}
  error={errors.parent_page}
/>

const [relatedProducts, setRelatedProducts] = useState([])

<Relationship
  onLoad={fetchProducts}
  selectedItems={relatedProducts}
  onChange={setRelatedProducts}
  postTypes={["product"]}
  taxonomies={["product_cat", "product_tag"]}
  showFeaturedImage={true}
  showExcerpt={true}
  max={8}
  returnFormat="id"
/>

const [relatedPosts, setRelatedPosts] = useState([])

<Relationship
  onLoad={async (filter) => {
    const response = await fetch('/api/posts', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(filter)
    })
    return response.json()
  }}
  selectedItems={relatedPosts}
  onChange={setRelatedPosts}
  postTypes={["post", "page", "article"]}
  taxonomies={["category", "tag"]}
  showExcerpt={true}
  showFeaturedImage={true}
  max={5}
/>