Relationship

"use client"
 
import { useState } from "react"
import { Relationship, type RelationshipItem } from "@/components/ui/relationship"
 
const posts = [
  {
    id: 1,
    title: "Getting Started with React",
    type: "post",
    status: "publish" as const,
  },
  {
    id: 2,
    title: "Advanced TypeScript Patterns",
    type: "post", 
    status: "publish" as const,
  },
  {
    id: 3,
    title: "Building UIs with Tailwind CSS",
    type: "post",
    status: "draft" as const,
  },
  {
    id: 4,
    title: "State Management Guide",
    type: "guide",
    status: "publish" as const,
  },
  {
    id: 5,
    title: "API Design Best Practices",
    type: "guide",
    status: "publish" as const,
  },
  {
    id: 6,
    title: "Component Architecture",
    type: "tutorial",
    status: "publish" as const,
  },
] satisfies RelationshipItem[]
 
export function RelationshipDemo() {
  const [selectedPosts, setSelectedPosts] = useState<RelationshipItem[]>([])
 
  return (
    <div className="w-full max-w-4xl">
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold">Related Posts</h3>
          <p className="text-sm text-muted-foreground">
            Select up to 3 related posts to display
          </p>
        </div>
        
        <p className="text-sm text-muted-foreground">
          Choose posts that are related to the current content
        </p>
 
        <Relationship
          items={posts}
          selectedItems={selectedPosts}
          onChange={(items) => setSelectedPosts(items as RelationshipItem[])}
          multiple={true}
          max={3}
          showFilters={["search", "post_type", "taxonomy"]}
          postTypes={["post", "guide", "tutorial"]}
          taxonomies={["React", "JavaScript", "TypeScript", "CSS", "Tailwind"]}
          searchPlaceholder="Search posts..."
        />
        
        <div className="text-sm text-muted-foreground">
          {selectedPosts.length} selected / 3 max
        </div>
      </div>
    </div>
  )
} 

"use client"
 
import { useState } from "react"
import { Relationship, type RelationshipItem } from "@/components/ui/relationship"
 
const posts = [
  {
    id: 1,
    title: "Getting Started with React",
    type: "post",
    status: "publish" as const,
  },
  {
    id: 2,
    title: "Advanced TypeScript Patterns",
    type: "post", 
    status: "publish" as const,
  },
  {
    id: 3,
    title: "Building UIs with Tailwind CSS",
    type: "post",
    status: "draft" as const,
  },
  {
    id: 4,
    title: "State Management Guide",
    type: "guide",
    status: "publish" as const,
  },
  {
    id: 5,
    title: "API Design Best Practices",
    type: "guide",
    status: "publish" as const,
  },
  {
    id: 6,
    title: "Component Architecture",
    type: "tutorial",
    status: "publish" as const,
  },
] satisfies RelationshipItem[]
 
export function RelationshipDemo() {
  const [selectedPosts, setSelectedPosts] = useState<RelationshipItem[]>([])
 
  return (
    <div className="w-full max-w-4xl">
      <div className="space-y-4">
        <div>
          <h3 className="text-lg font-semibold">Related Posts</h3>
          <p className="text-sm text-muted-foreground">
            Select up to 3 related posts to display
          </p>
        </div>
        
        <p className="text-sm text-muted-foreground">
          Choose posts that are related to the current content
        </p>
 
        <Relationship
          items={posts}
          selectedItems={selectedPosts}
          onChange={(items) => setSelectedPosts(items as RelationshipItem[])}
          multiple={true}
          max={3}
          showFilters={["search", "post_type", "taxonomy"]}
          postTypes={["post", "guide", "tutorial"]}
          taxonomies={["React", "JavaScript", "TypeScript", "CSS", "Tailwind"]}
          searchPlaceholder="Search posts..."
        />
        
        <div className="text-sm text-muted-foreground">
          {selectedPosts.length} selected / 3 max
        </div>
      </div>
    </div>
  )
} 

"use client"
 
import { useState } from "react"
import { Relationship, type RelationshipItem, type RelationshipFilter } from "@/components/ui/relationship"
 
// Simulate a large dataset
const mockDatabase: RelationshipItem[] = [
  {
    id: 1,
    title: "Introduction to React Hooks",
    type: "post",
    status: "publish",
    taxonomy: ["React", "JavaScript", "Frontend"],
    excerpt: "Learn how to use React Hooks to manage state and side effects in functional components...",
    date: "2024-01-15",
    featured_image: "https://picsum.photos/400/300?random=1",
    url: "/posts/react-hooks-intro",
  },
  {
    id: 2,
    title: "Advanced TypeScript Patterns",
    type: "post",
    status: "publish",
    taxonomy: ["TypeScript", "Advanced", "Development"],
    excerpt: "Explore advanced TypeScript patterns including conditional types, mapped types, and template literals...",
    date: "2024-01-10",
    featured_image: "https://picsum.photos/400/300?random=2",
    url: "/posts/advanced-typescript",
  },
  {
    id: 3,
    title: "Building Responsive UIs",
    type: "tutorial",
    status: "publish",
    taxonomy: ["CSS", "Responsive", "UI"],
    excerpt: "Create beautiful, responsive user interfaces that work on all devices...",
    date: "2024-01-05",
    featured_image: "https://picsum.photos/400/300?random=3",
    url: "/tutorials/responsive-ui",
  },
  {
    id: 4,
    title: "State Management with Zustand",
    type: "guide",
    status: "publish",
    taxonomy: ["State Management", "Zustand", "React"],
    excerpt: "Learn how to manage application state efficiently with Zustand...",
    date: "2024-01-20",
    featured_image: "https://picsum.photos/400/300?random=4",
    url: "/guides/zustand-state",
  },
  {
    id: 5,
    title: "API Design Best Practices",
    type: "guide",
    status: "draft",
    taxonomy: ["API", "Backend", "REST"],
    excerpt: "Design robust and maintainable APIs that scale with your application...",
    date: "2024-01-12",
    featured_image: "https://picsum.photos/400/300?random=5",
    url: "/guides/api-design",
  },
  {
    id: 6,
    title: "Component Architecture Patterns",
    type: "tutorial",
    status: "publish",
    taxonomy: ["Architecture", "Components", "React"],
    excerpt: "Build scalable component architectures with these proven patterns...",
    date: "2024-01-08",
    featured_image: "https://picsum.photos/400/300?random=6",
    url: "/tutorials/component-architecture",
  },
  {
    id: 7,
    title: "Testing React Components",
    type: "post",
    status: "publish",
    taxonomy: ["Testing", "React", "Jest"],
    excerpt: "Write comprehensive tests for your React components using Jest and React Testing Library...",
    date: "2024-01-25",
    featured_image: "https://picsum.photos/400/300?random=7",
    url: "/posts/testing-react",
  },
  {
    id: 8,
    title: "Performance Optimization",
    type: "guide",
    status: "publish",
    taxonomy: ["Performance", "Optimization", "React"],
    excerpt: "Optimize your React applications for better performance and user experience...",
    date: "2024-01-18",
    featured_image: "https://picsum.photos/400/300?random=8",
    url: "/guides/performance-optimization",
  },
  {
    id: 9,
    title: "Server-Side Rendering with Next.js",
    type: "tutorial",
    status: "draft",
    taxonomy: ["Next.js", "SSR", "React"],
    excerpt: "Implement server-side rendering for better SEO and performance...",
    date: "2024-01-03",
    featured_image: "https://picsum.photos/400/300?random=9",
    url: "/tutorials/nextjs-ssr",
  },
  {
    id: 10,
    title: "Database Design Fundamentals",
    type: "guide",
    status: "publish",
    taxonomy: ["Database", "SQL", "Backend"],
    excerpt: "Learn the fundamentals of database design and normalization...",
    date: "2024-01-14",
    featured_image: "https://picsum.photos/400/300?random=10",
    url: "/guides/database-design",
  },
]
 
// Simulate API call with delay
const fetchPosts = async (filter: RelationshipFilter): Promise<RelationshipItem[]> => {
  // Simulate network delay
  await new Promise(resolve => setTimeout(resolve, 800))
  
  let filteredPosts = mockDatabase
  
  // Apply search filter
  if (filter.search) {
    const searchTerm = filter.search.toLowerCase()
    filteredPosts = filteredPosts.filter(post => 
      post.title.toLowerCase().includes(searchTerm) ||
      post.excerpt?.toLowerCase().includes(searchTerm) ||
      post.taxonomy?.some(tag => tag.toLowerCase().includes(searchTerm))
    )
  }
  
  // Apply post type filter
  if (filter.post_type && filter.post_type.length > 0) {
    filteredPosts = filteredPosts.filter(post => 
      filter.post_type!.includes(post.type || "")
    )
  }
  
  // Apply post status filter
  if (filter.post_status && filter.post_status.length > 0) {
    filteredPosts = filteredPosts.filter(post => 
      filter.post_status!.includes(post.status || "")
    )
  }
  
  // Apply taxonomy filter
  if (filter.taxonomy && filter.taxonomy.length > 0) {
    filteredPosts = filteredPosts.filter(post => 
      post.taxonomy?.some(tag => filter.taxonomy!.includes(tag))
    )
  }
  
  return filteredPosts
}
 
export function RelationshipAsyncDemo() {
  const [selectedPosts, setSelectedPosts] = useState<RelationshipItem[]>([])
 
  return (
    <div className="w-full max-w-4xl mx-auto space-y-4">
      <div>
        <h3 className="text-lg font-semibold mb-2">Async Content Loader</h3>
        <p className="text-sm text-muted-foreground mb-4">
          Search and filter from a large dataset with async loading
        </p>
      </div>
 
      <Relationship
        onLoad={fetchPosts}
        selectedItems={selectedPosts}
        onChange={(items) => setSelectedPosts(items as RelationshipItem[])}
        multiple={true}
        max={5}
        postTypes={["post", "guide", "tutorial"]}
        postStatuses={["publish", "draft"]}
        taxonomies={["React", "TypeScript", "CSS", "API", "Testing", "Performance"]}
        showFeaturedImage={true}
        showExcerpt={true}
        showDate={true}
        showPreview={true}
        instructions="Start typing to search through our content database"
        searchPlaceholder="Search posts by title, content, or tags..."
        loadingText="Searching content..."
      />
 
      {selectedPosts.length > 0 && (
        <div className="mt-8 p-4 bg-muted/30 rounded-lg">
          <h4 className="font-medium mb-2">Selected Content ({selectedPosts.length}):</h4>
          <div className="grid gap-2">
            {selectedPosts.map((post) => (
              <div key={post.id} className="flex items-center gap-3 p-2 bg-background rounded border">
                {post.featured_image && (
                  <img
                    src={post.featured_image}
                    alt={post.title}
                    className="w-12 h-12 rounded object-cover"
                  />
                )}
                <div className="flex-1">
                  <div className="font-medium text-sm">{post.title}</div>
                  <div className="text-xs text-muted-foreground">
                    {post.type} • {post.date}
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  )
} 

"use client"
 
import { useState } from "react"
import { Relationship, type RelationshipItem } from "@/components/ui/relationship"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 
const parentPages: RelationshipItem[] = [
  {
    id: 1,
    title: "Documentation",
    type: "page",
    status: "publish",
    taxonomy: ["Navigation"],
    excerpt: "Main documentation section containing all guides and tutorials",
    date: "2024-01-01",
    url: "/docs",
  },
  {
    id: 2,
    title: "Blog",
    type: "page",
    status: "publish",
    taxonomy: ["Content"],
    excerpt: "Blog section with articles and updates",
    date: "2024-01-01",
    url: "/blog",
  },
  {
    id: 3,
    title: "Products",
    type: "page",
    status: "publish",
    taxonomy: ["Commerce"],
    excerpt: "Product catalog and information",
    date: "2024-01-01",
    url: "/products",
  },
  {
    id: 4,
    title: "About",
    type: "page",
    status: "publish",
    taxonomy: ["Company"],
    excerpt: "Company information and team details",
    date: "2024-01-01",
    url: "/about",
  },
  {
    id: 5,
    title: "Contact",
    type: "page",
    status: "publish",
    taxonomy: ["Support"],
    excerpt: "Contact information and support channels",
    date: "2024-01-01",
    url: "/contact",
  },
  {
    id: 6,
    title: "Legal",
    type: "page",
    status: "draft",
    taxonomy: ["Legal"],
    excerpt: "Legal documents and privacy policy",
    date: "2024-01-01",
    url: "/legal",
  },
]
 
export function RelationshipSingleDemo() {
  const [selectedParent, setSelectedParent] = useState<RelationshipItem[]>([])
  const [error, setError] = useState<string>("")
  const [submitted, setSubmitted] = useState(false)
 
  const handleSubmit = () => {
    setSubmitted(true)
    if (selectedParent.length === 0) {
      setError("Please select a parent page")
      return
    }
    setError("")
    const firstParent = selectedParent[0]
    if (firstParent) {
      alert(`Form submitted with parent page: ${firstParent.title}`)
    }
  }
 
  const handleChange = (items: RelationshipItem[] | string[] | number[]) => {
    // Since we're using returnFormat="object" (default), items will be RelationshipItem[]
    const relationshipItems = items as RelationshipItem[]
    setSelectedParent(relationshipItems)
    if (submitted && relationshipItems.length > 0) {
      setError("")
    }
  }
 
  const selectedPage = selectedParent.length > 0 ? selectedParent[0] : null
 
  return (
    <div className="w-full max-w-4xl mx-auto space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Page Settings</CardTitle>
          <CardDescription>
            Configure the parent page for this content
          </CardDescription>
        </CardHeader>
        <CardContent className="space-y-4">
          <div>
            <label className="text-sm font-medium mb-2 block">
              Parent Page <span className="text-destructive">*</span>
            </label>
            <Relationship
              items={parentPages}
              selectedItems={selectedParent}
              onChange={handleChange}
              multiple={false}
              max={1}
              required={true}
              postTypes={["page"]}
              taxonomies={["Navigation", "Content", "Commerce", "Company", "Support", "Legal"]}
              showFilters={["search", "taxonomy"]}
              showExcerpt={true}
              instructions="Select the parent page where this content should be nested"
              searchPlaceholder="Search parent pages..."
              noItemsText="No parent pages found"
              noSelectedText="No parent page selected"
              error={error}
              variant={error ? "error" : "default"}
            />
          </div>
 
          <div className="flex gap-2">
            <Button onClick={handleSubmit}>
              Save Settings
            </Button>
            <Button 
              variant="outline" 
              onClick={() => {
                setSelectedParent([])
                setError("")
                setSubmitted(false)
              }}
            >
              Reset
            </Button>
          </div>
        </CardContent>
      </Card>
 
      {selectedPage && (
        <Card>
          <CardHeader>
            <CardTitle>Selected Parent Page</CardTitle>
          </CardHeader>
          <CardContent>
            <div className="flex items-center gap-4 p-4 bg-muted/30 rounded-lg">
              <div className="flex-1">
                <h4 className="font-medium">{selectedPage.title}</h4>
                <p className="text-sm text-muted-foreground mt-1">
                  {selectedPage.excerpt}
                </p>
                <div className="flex items-center gap-2 mt-2">
                  <span className="text-xs bg-primary/10 text-primary px-2 py-1 rounded">
                    {selectedPage.type}
                  </span>
                  <span className="text-xs text-muted-foreground">
                    {selectedPage.url}
                  </span>
                </div>
              </div>
            </div>
          </CardContent>
        </Card>
      )}
    </div>
  )
} 

"use client"
 
import { useState } from "react"
import { Relationship, type RelationshipItem } from "@/components/ui/relationship"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
 
const fullDataset: RelationshipItem[] = [
  {
    id: 1,
    title: "React Performance Optimization",
    type: "post",
    status: "publish",
    taxonomy: ["React", "Performance", "JavaScript"],
    excerpt: "Learn advanced techniques to optimize React applications for better performance and user experience...",
    date: "2024-01-15",
    featured_image: "https://picsum.photos/400/300?random=1",
    url: "/posts/react-performance",
  },
  {
    id: 2,
    title: "TypeScript Best Practices",
    type: "post",
    status: "publish",
    taxonomy: ["TypeScript", "Best Practices", "Development"],
    excerpt: "Comprehensive guide to TypeScript best practices and coding patterns for enterprise applications...",
    date: "2024-01-10",
    featured_image: "https://picsum.photos/400/300?random=2",
    url: "/posts/typescript-best-practices",
  },
  {
    id: 3,
    title: "CSS Grid Mastery",
    type: "tutorial",
    status: "publish",
    taxonomy: ["CSS", "Grid", "Layout"],
    excerpt: "Master CSS Grid layout with practical examples and real-world use cases...",
    date: "2024-01-05",
    featured_image: "https://picsum.photos/400/300?random=3",
    url: "/tutorials/css-grid",
  },
  {
    id: 4,
    title: "Next.js 14 Features",
    type: "guide",
    status: "publish",
    taxonomy: ["Next.js", "React", "Framework"],
    excerpt: "Explore the latest features in Next.js 14 and how to use them in your projects...",
    date: "2024-01-20",
    featured_image: "https://picsum.photos/400/300?random=4",
    url: "/guides/nextjs-14",
  },
  {
    id: 5,
    title: "Database Optimization",
    type: "guide",
    status: "draft",
    taxonomy: ["Database", "Performance", "SQL"],
    excerpt: "Optimize database queries and improve application performance with these proven techniques...",
    date: "2024-01-12",
    featured_image: "https://picsum.photos/400/300?random=5",
    url: "/guides/database-optimization",
  },
  {
    id: 6,
    title: "Microservices Architecture",
    type: "tutorial",
    status: "publish",
    taxonomy: ["Architecture", "Microservices", "Backend"],
    excerpt: "Build scalable microservices architecture with Docker and Kubernetes...",
    date: "2024-01-08",
    featured_image: "https://picsum.photos/400/300?random=6",
    url: "/tutorials/microservices",
  },
  {
    id: 7,
    title: "GraphQL API Design",
    type: "post",
    status: "publish",
    taxonomy: ["GraphQL", "API", "Backend"],
    excerpt: "Design efficient GraphQL APIs with proper schema design and resolver patterns...",
    date: "2024-01-25",
    featured_image: "https://picsum.photos/400/300?random=7",
    url: "/posts/graphql-api",
  },
  {
    id: 8,
    title: "Testing Strategies",
    type: "guide",
    status: "publish",
    taxonomy: ["Testing", "QA", "Development"],
    excerpt: "Comprehensive testing strategies for modern web applications...",
    date: "2024-01-18",
    featured_image: "https://picsum.photos/400/300?random=8",
    url: "/guides/testing-strategies",
  },
  {
    id: 9,
    title: "DevOps Fundamentals",
    type: "tutorial",
    status: "private",
    taxonomy: ["DevOps", "CI/CD", "Infrastructure"],
    excerpt: "Learn DevOps fundamentals including CI/CD pipelines and infrastructure as code...",
    date: "2024-01-03",
    featured_image: "https://picsum.photos/400/300?random=9",
    url: "/tutorials/devops",
  },
  {
    id: 10,
    title: "Security Best Practices",
    type: "guide",
    status: "publish",
    taxonomy: ["Security", "Web Security", "Best Practices"],
    excerpt: "Essential security best practices for web applications and APIs...",
    date: "2024-01-14",
    featured_image: "https://picsum.photos/400/300?random=10",
    url: "/guides/security",
  },
]
 
export function RelationshipAdvancedDemo() {
  const [selectedItems, setSelectedItems] = useState<RelationshipItem[]>([])
  const [returnFormat, setReturnFormat] = useState<"object" | "id">("object")
  const [showAllFeatures, setShowAllFeatures] = useState(false)
  const [minItems, setMinItems] = useState(2)
  const [maxItems, setMaxItems] = useState(5)
  const [isRequired, setIsRequired] = useState(true)
  const [error, setError] = useState<string>("")
 
  const handleChange = (items: RelationshipItem[] | string[] | number[]) => {
    if (returnFormat === "object") {
      setSelectedItems(items as RelationshipItem[])
    } else {
      // Convert IDs back to objects for display
      const ids = items as (string | number)[]
      const objects = fullDataset.filter(item => ids.includes(item.id))
      setSelectedItems(objects)
    }
    
    // Clear error when valid selection is made
    if (isRequired && (items as any[]).length >= minItems) {
      setError("")
    }
  }
 
  const handleValidate = () => {
    if (isRequired && selectedItems.length < minItems) {
      setError(`Minimum ${minItems} items required`)
      return false
    }
    setError("")
    return true
  }
 
  const handleSave = () => {
    if (handleValidate()) {
      alert(`Saved ${selectedItems.length} items with return format: ${returnFormat}`)
    }
  }
 
  return (
    <div className="w-full max-w-6xl mx-auto space-y-6">
      <Card>
        <CardHeader>
          <CardTitle>Advanced Relationship Configuration</CardTitle>
          <CardDescription>
            Comprehensive example showcasing all relationship features
          </CardDescription>
        </CardHeader>
        <CardContent>
          <Tabs defaultValue="relationship" className="w-full">
            <TabsList className="grid w-full grid-cols-3">
              <TabsTrigger value="relationship">Relationship</TabsTrigger>
              <TabsTrigger value="settings">Settings</TabsTrigger>
              <TabsTrigger value="output">Output</TabsTrigger>
            </TabsList>
            
            <TabsContent value="relationship" className="space-y-4">
              <div className="flex items-center space-x-2 mb-4">
                <Switch
                  id="all-features"
                  checked={showAllFeatures}
                  onCheckedChange={setShowAllFeatures}
                />
                <Label htmlFor="all-features">Show all display features</Label>
              </div>
 
              <Relationship
                items={fullDataset}
                selectedItems={selectedItems}
                onChange={handleChange}
                multiple={true}
                min={minItems}
                max={maxItems}
                required={isRequired}
                returnFormat={returnFormat}
                postTypes={["post", "guide", "tutorial"]}
                postStatuses={["publish", "draft", "private"]}
                taxonomies={["React", "TypeScript", "CSS", "Next.js", "Database", "GraphQL", "Testing", "Security"]}
                showFilters={true}
                showFeaturedImage={showAllFeatures}
                showExcerpt={true}
                showDate={showAllFeatures}
                showPreview={showAllFeatures}
                sortable={showAllFeatures}
                instructions="Select content items for your collection. Use filters to narrow down results."
                searchPlaceholder="Search by title, content, or tags..."
                error={error}
                variant={error ? "error" : "default"}
              />
 
              <div className="flex gap-2">
                <Button onClick={handleSave}>
                  Save Selection
                </Button>
                <Button 
                  variant="outline" 
                  onClick={() => {
                    setSelectedItems([])
                    setError("")
                  }}
                >
                  Clear All
                </Button>
                <Button 
                  variant="outline" 
                  onClick={handleValidate}
                >
                  Validate
                </Button>
              </div>
            </TabsContent>
 
            <TabsContent value="settings" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div className="space-y-4">
                  <div>
                    <Label htmlFor="return-format">Return Format</Label>
                    <select
                      id="return-format"
                      value={returnFormat}
                      onChange={(e) => setReturnFormat(e.target.value as "object" | "id")}
                      className="w-full mt-1 p-2 border rounded"
                    >
                      <option value="object">Object Array</option>
                      <option value="id">ID Array</option>
                    </select>
                  </div>
 
                  <div>
                    <Label htmlFor="min-items">Minimum Items</Label>
                    <input
                      id="min-items"
                      type="number"
                      min="0"
                      max="10"
                      value={minItems}
                      onChange={(e) => setMinItems(parseInt(e.target.value))}
                      className="w-full mt-1 p-2 border rounded"
                    />
                  </div>
 
                  <div>
                    <Label htmlFor="max-items">Maximum Items</Label>
                    <input
                      id="max-items"
                      type="number"
                      min="1"
                      max="20"
                      value={maxItems}
                      onChange={(e) => setMaxItems(parseInt(e.target.value))}
                      className="w-full mt-1 p-2 border rounded"
                    />
                  </div>
                </div>
 
                <div className="space-y-4">
                  <div className="flex items-center space-x-2">
                    <Switch
                      id="required"
                      checked={isRequired}
                      onCheckedChange={setIsRequired}
                    />
                    <Label htmlFor="required">Required Field</Label>
                  </div>
 
                  <div className="flex items-center space-x-2">
                    <Switch
                      id="features"
                      checked={showAllFeatures}
                      onCheckedChange={setShowAllFeatures}
                    />
                    <Label htmlFor="features">Enhanced Display</Label>
                  </div>
 
                  <div className="p-3 bg-muted/30 rounded">
                    <h4 className="font-medium text-sm mb-2">Current Settings</h4>
                    <div className="space-y-1 text-xs">
                      <div>Min: {minItems}, Max: {maxItems}</div>
                      <div>Required: {isRequired ? 'Yes' : 'No'}</div>
                      <div>Return: {returnFormat}</div>
                      <div>Features: {showAllFeatures ? 'All' : 'Basic'}</div>
                    </div>
                  </div>
                </div>
              </div>
            </TabsContent>
 
            <TabsContent value="output" className="space-y-4">
              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                <div>
                  <h4 className="font-medium mb-2">Selected Items ({selectedItems.length})</h4>
                  <div className="space-y-2 max-h-80 overflow-y-auto">
                    {selectedItems.map((item) => (
                      <div key={item.id} className="flex items-center gap-3 p-2 border rounded">
                        {showAllFeatures && item.featured_image && (
                          <img
                            src={item.featured_image}
                            alt={item.title}
                            className="w-10 h-10 rounded object-cover"
                          />
                        )}
                        <div className="flex-1">
                          <div className="font-medium text-sm">{item.title}</div>
                          <div className="flex items-center gap-2 mt-1">
                            <Badge variant="outline" className="text-xs">
                              {item.type}
                            </Badge>
                            <Badge variant="secondary" className="text-xs">
                              {item.status}
                            </Badge>
                          </div>
                        </div>
                      </div>
                    ))}
                    {selectedItems.length === 0 && (
                      <p className="text-muted-foreground text-sm text-center py-8">
                        No items selected
                      </p>
                    )}
                  </div>
                </div>
 
                <div>
                  <h4 className="font-medium mb-2">Raw Output</h4>
                  <div className="bg-muted/30 p-3 rounded text-xs font-mono max-h-80 overflow-y-auto">
                    <pre>
                      {JSON.stringify(
                        returnFormat === "object" 
                          ? selectedItems.map(item => ({
                              id: item.id,
                              title: item.title,
                              type: item.type,
                              status: item.status
                            }))
                          : selectedItems.map(item => item.id),
                        null,
                        2
                      )}
                    </pre>
                  </div>
                </div>
              </div>
            </TabsContent>
          </Tabs>
        </CardContent>
      </Card>
    </div>
  )
}