[V0_FILE]typescriptreact:file="category-selector.tsx" "use client" import { useState } from "react" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" // Define the Category type interface Category { name: string handle: string child_category?: Category } // Sample data const sampleCategories: Category[] = [ { name: "Electronics", handle: "electronics", child_category: { name: "Computers", handle: "computers", child_category: { name: "Laptops", handle: "laptops", child_category: { name: "Gaming Laptops", handle: "gaming-laptops", }, }, }, }, { name: "Clothing", handle: "clothing", child_category: { name: "Men's", handle: "mens", child_category: { name: "Shirts", handle: "shirts", }, }, }, { name: "Books", handle: "books", child_category: { name: "Fiction", handle: "fiction", child_category: { name: "Science Fiction", handle: "sci-fi", }, }, }, ] export default function CategorySelector() { const [selectedPath, setSelectedPath] = useState("") const [expandedCategories, setExpandedCategories] = useState>({ electronics: true, computers: true, laptops: true, }) // Toggle category expansion const toggleCategory = (handle: string) => { setExpandedCategories((prev) => ({ ...prev, [handle]: !prev[handle], })) } // Handle category selection const handleCategorySelect = (path: string) => { setSelectedPath(path) } // Recursive function to render categories const renderCategory = (category: Category, parentPath = "", level = 0) => { const currentPath = parentPath ? `${parentPath}/${category.handle}` : category.handle const hasChildren = !!category.child_category const isExpanded = expandedCategories[category.handle] || false return (

{hasChildren && ( )} {!hasChildren &&

}

{category.name}

{hasChildren && isExpanded && (

{renderCategory(category.child_category, currentPath, level + 1)}

)}

) } return (

Category Tree Selector

Select a category:

{sampleCategories.map((category) => renderCategory(category))}

{selectedPath && (

Selected path:

{selectedPath}

)}

) } [V0_FILE]typescriptreact:file="category-selector-improved.tsx" "use client" import type React from "react" import { useState } from "react" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" // Define the Category type with optional child_category interface Category { name: string handle: string child_category?: Category } // Sample data const sampleCategories: Category[] = [ { name: "Electronics", handle: "electronics", child_category: { name: "Computers", handle: "computers", child_category: { name: "Laptops", handle: "laptops", child_category: { name: "Gaming Laptops", handle: "gaming-laptops", }, }, }, }, { name: "Clothing", handle: "clothing", child_category: { name: "Men's", handle: "mens", child_category: { name: "Shirts", handle: "shirts", }, }, }, { name: "Books", handle: "books", child_category: { name: "Fiction", handle: "fiction", child_category: { name: "Science Fiction", handle: "sci-fi", }, }, }, ] // Function to flatten the category tree for easier processing const flattenCategories = (categories: Category[]) => { const result: Record = {} const processCategory = (category: Category, parentHandles: string[] = []) => { const currentHandles = [...parentHandles, category.handle] result[category.handle] = { category, parentHandles } if (category.child_category) { processCategory(category.child_category, currentHandles) } } categories.forEach((category) => processCategory(category)) return result } export default function CategorySelectorImproved() { const [selectedValue, setSelectedValue] = useState("") const [expandedCategories, setExpandedCategories] = useState>({ electronics: true, computers: true, laptops: true, }) const flattenedCategories = flattenCategories(sampleCategories) // Get formatted path for display const getFormattedPath = (handle: string): string => { if (!handle) return "" const { parentHandles } = flattenedCategories[handle] || { parentHandles: [] } const path = [...parentHandles.filter((h) => h !== handle), handle] return path.join("/") } // Toggle category expansion const toggleCategory = (handle: string, e: React.MouseEvent) => { e.stopPropagation() setExpandedCategories((prev) => ({ ...prev, [handle]: !prev[handle], })) } // Handle selection const handleSelect = (value: string) => { setSelectedValue(value) } // Recursive function to render a category and its children const renderCategory = (category: Category, level = 0) => { const hasChildren = !!category.child_category const isExpanded = expandedCategories[category.handle] || false return (

0 })}>

{category.name}

{hasChildren && isExpanded &&

{renderCategory(category.child_category, level + 1)}

}

) } return (

Category Tree Selector

Select a category:

{sampleCategories.map((category) => renderCategory(category))}

{selectedValue && (

Selected path:

{getFormattedPath(selectedValue)}

)}

) } [V0_FILE]typescriptreact:file="category-selector-final.tsx" "use client" import type React from "react" import { useState } from "react" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group" // Define the Category type interface Category { name: string handle: string child_category?: Category } // Sample data const sampleCategories: Category[] = [ { name: "Electronics", handle: "electronics", child_category: { name: "Computers", handle: "computers", child_category: { name: "Laptops", handle: "laptops", child_category: { name: "Gaming Laptops", handle: "gaming-laptops", }, }, }, }, { name: "Clothing", handle: "clothing", child_category: { name: "Men's", handle: "mens", child_category: { name: "Shirts", handle: "shirts", }, }, }, { name: "Books", handle: "books", child_category: { name: "Fiction", handle: "fiction", child_category: { name: "Science Fiction", handle: "sci-fi", }, }, }, ] // Helper function to build a map of categories with their ancestry const buildCategoryMap = (categories: Category[]) => { const map: Record = {} const processCategory = (category: Category, ancestry: string[] = []) => { const currentAncestry = [...ancestry, category.handle] map[category.handle] = { category, ancestry: currentAncestry } if (category.child_category) { processCategory(category.child_category, currentAncestry) } } categories.forEach((category) => processCategory(category)) return map } export default function CategoryTreeSelector() { const [selectedCategory, setSelectedCategory] = useState("") const [expandedCategories, setExpandedCategories] = useState>({ electronics: true, computers: true, laptops: true, }) const categoryMap = buildCategoryMap(sampleCategories) // Format the selected path for display const getFormattedPath = () => { if (!selectedCategory || !categoryMap[selectedCategory]) return "" const { ancestry } = categoryMap[selectedCategory] return ancestry.join("/") } // Toggle category expansion const toggleExpand = (handle: string, e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setExpandedCategories((prev) => ({ ...prev, [handle]: !prev[handle], })) } // Recursive function to render a category and its children const renderCategoryItem = (category: Category, depth = 0) => { const hasChildren = !!category.child_category const isExpanded = !!expandedCategories[category.handle] return (

0 })}>

{category.name}

{hasChildren && isExpanded &&

{renderCategoryItem(category.child_category, depth + 1)}

}

) } return (

Category Tree Selector

Select a category:

{sampleCategories.map((category) => renderCategoryItem(category))}

{selectedCategory && (

Selected path:

{getFormattedPath()}

)}

) } [V0_FILE]typescriptreact:file="nested-category-selector.tsx" "use client" import type React from "react" import { useState } from "react" import { ChevronDown, ChevronRight } from "lucide-react" import { cn } from "@/lib/utils" // Define the Category type interface Category { name: string handle: string child_category?: Category } // Sample data const sampleCategories: Category[] = [ { name: "Electronics", handle: "electronics", child_category: { name: "Computers", handle: "computers", child_category: { name: "Laptops", handle: "laptops", child_category: { name: "Gaming Laptops", handle: "gaming-laptops", }, }, }, }, { name: "Clothing", handle: "clothing", child_category: { name: "Men's", handle: "mens", child_category: { name: "Shirts", handle: "shirts", }, }, }, { name: "Books", handle: "books", child_category: { name: "Fiction", handle: "fiction", child_category: { name: "Science Fiction", handle: "sci-fi", }, }, }, ] // Helper function to build a map of categories with their ancestry const buildCategoryMap = (categories: Category[]) => { const map: Record = {} const processCategory = (category: Category, ancestry: string[] = []) => { const currentAncestry = [...ancestry, category.handle] map[category.handle] = { category, ancestry: currentAncestry } if (category.child_category) { processCategory(category.child_category, currentAncestry) } } categories.forEach((category) => processCategory(category)) return map } export default function NestedCategorySelector() { const [selectedPath, setSelectedPath] = useState([]) const [expandedCategories, setExpandedCategories] = useState>({ electronics: true, computers: true, laptops: true, }) const categoryMap = buildCategoryMap(sampleCategories) // Handle category selection const handleSelect = (handle: string) => { // Get the ancestry path for the selected category const ancestry = categoryMap[handle]?.ancestry || [] // Auto-expand all parent categories when selecting a category const newExpanded = { ...expandedCategories } ancestry.forEach((ancestorHandle) => { newExpanded[ancestorHandle] = true }) setExpandedCategories(newExpanded) // Set the selected path setSelectedPath(ancestry) } // Check if a category is in the selected path const isInSelectedPath = (handle: string) => { return selectedPath.includes(handle) } // Format the selected path for display const getFormattedPath = () => { return selectedPath.join("/") } // Toggle category expansion const toggleExpand = (handle: string, e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setExpandedCategories((prev) => ({ ...prev, [handle]: !prev[handle], })) } // Recursive function to render a category and its children const renderCategoryItem = (category: Category, depth = 0) => { const hasChildren = !!category.child_category const isExpanded = !!expandedCategories[category.handle] const isSelected = isInSelectedPath(category.handle) return (

= 3 }, )} >

handleSelect(category.handle)}>

{isSelected && (

)}

{category.name}

{hasChildren && isExpanded &&

{renderCategoryItem(category.child_category, depth + 1)}

}

) } return (

Category Tree Selector

Select a category:

{sampleCategories.map((category) => renderCategoryItem(category))}

{selectedPath.length > 0 && (

Selected path:

{getFormattedPath()}

)}

) } [V0_FILE]typescriptreact:file="flexible-category-selector.tsx" "use client" import type React from "react" import { useState } from "react" import { ChevronDown, ChevronRight, X } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "@/components/ui/button" // Define the Category type interface Category { name: string handle: string child_category?: Category } // Sample data const sampleCategories: Category[] = [ { name: "Electronics", handle: "electronics", child_category: { name: "Computers", handle: "computers", child_category: { name: "Laptops", handle: "laptops", child_category: { name: "Gaming Laptops", handle: "gaming-laptops", }, }, }, }, { name: "Clothing", handle: "clothing", child_category: { name: "Men's", handle: "mens", child_category: { name: "Shirts", handle: "shirts", }, }, }, { name: "Books", handle: "books", child_category: { name: "Fiction", handle: "fiction", child_category: { name: "Science Fiction", handle: "sci-fi", }, }, }, ] // Helper function to flatten the category tree const flattenCategoryTree = (categories: Category[]) => { const result: Record< string, { category: Category parentHandle?: string ancestryHandles: string[] ancestryNames: string[] } > = {} const processCategory = ( category: Category, parentHandle?: string, ancestryHandles: string[] = [], ancestryNames: string[] = [], ) => { const currentAncestryHandles = [...ancestryHandles, category.handle] const currentAncestryNames = [...ancestryNames, category.name] result[category.handle] = { category, parentHandle, ancestryHandles: currentAncestryHandles, ancestryNames: currentAncestryNames, } if (category.child_category) { processCategory(category.child_category, category.handle, currentAncestryHandles, currentAncestryNames) } } categories.forEach((category) => processCategory(category)) return result } export default function FlexibleCategorySelector() { const [selectedCategories, setSelectedCategories] = useState([]) const [expandedCategories, setExpandedCategories] = useState>({ electronics: true, computers: true, laptops: true, }) const flattenedCategories = flattenCategoryTree(sampleCategories) // Toggle category selection const toggleCategorySelection = (handle: string) => { // If already selected, remove it and all descendants if (selectedCategories.includes(handle)) { // Find all categories that have this as an ancestor const categoriesToRemove = Object.values(flattenedCategories) .filter((item) => item.ancestryHandles.includes(handle)) .map((item) => item.category.handle) setSelectedCategories((prev) => prev.filter((cat) => !categoriesToRemove.includes(cat))) } else { // Add this category and remove any categories not in its ancestry const ancestry = flattenedCategories[handle].ancestryHandles // Get the root category of this branch const rootCategory = ancestry[0] // Remove any categories from other branches const newSelectedCategories = selectedCategories.filter((cat) => { const catRoot = flattenedCategories[cat]?.ancestryHandles[0] return catRoot === rootCategory }) // Add the new category newSelectedCategories.push(handle) setSelectedCategories(newSelectedCategories) // Auto-expand parent categories const newExpanded = { ...expandedCategories } if (flattenedCategories[handle].parentHandle) { ancestry.forEach((ancestorHandle) => { newExpanded[ancestorHandle] = true }) setExpandedCategories(newExpanded) } } } // Clear all selections const clearSelection = () => { setSelectedCategories([]) } // Format the selected path for display const getFormattedPath = () => { if (selectedCategories.length === 0) return "" // Sort selected categories by their position in the hierarchy const sortedCategories = [...selectedCategories].sort((a, b) => { return flattenedCategories[a].ancestryHandles.length - flattenedCategories[b].ancestryHandles.length }) return sortedCategories.join("/") } // Toggle category expansion const toggleExpand = (handle: string, e: React.MouseEvent) => { e.preventDefault() e.stopPropagation() setExpandedCategories((prev) => ({ ...prev, [handle]: !prev[handle], })) } // Recursive function to render a category and its children const renderCategoryItem = (category: Category, depth = 0) => { const hasChildren = !!category.child_category const isExpanded = !!expandedCategories[category.handle] const isSelected = selectedCategories.includes(category.handle) return (

= 3 }, )} >

toggleCategorySelection(category.handle)} >

{isSelected && (

)}

{category.name}

{hasChildren && isExpanded &&

{renderCategoryItem(category.child_category, depth + 1)}

}

) } return (

Category Tree Selector

{selectedCategories.length > 0 && ( )}

Select a category:

{sampleCategories.map((category) => renderCategoryItem(category))}

{selectedCategories.length > 0 && (

Selected path:

{getFormattedPath()}

)}

) } [V0_FILE]typescriptreact:file="app/page.tsx" import FlexibleCategorySelector from "@/flexible-category-selector" export default function Home() { return (

) }

About

Tags

Share

About

Tags

Share

More Templates Like This

About

Tags

Share

About

Tags

Share

More Templates Like This