Untitled

import React, { useState } from 'react';

const DataFilter = () => {
  const [searchTerm, setSearchTerm] = useState('');
  
  // Sample data structure - replace with your actual data
  const initialData = [{
    value: "uuid",
    key: "sadf",
    title: "bcd",
    id: "uuid",
    children: [{
      value: "uuid",
      key: "sadf",
      title: "bcd",
      id: "uuid",
      children: []
    }]
  }];

  // Recursive function to search through nested data
  const filterNestedData = (items, term) => {
    return items.reduce((filtered, item) => {
      // Create a copy of the current item
      let itemCopy = { ...item };
      
      // Check if the current item's title matches the search term
      const matchesSearch = item.title.toLowerCase().includes(term.toLowerCase());
      
      // If there are children, recursively filter them
      if (item.children && item.children.length > 0) {
        itemCopy.children = filterNestedData(item.children, term);
      }
      
      // Include item if it matches search or has matching children
      if (matchesSearch || (itemCopy.children && itemCopy.children.length > 0)) {
        filtered.push(itemCopy);
      }
      
      return filtered;
    }, []);
  };

  // Handle search input change
  const handleSearch = (e) => {
    setSearchTerm(e.target.value);
  };

  // Filter data based on search term
  const filteredData = searchTerm 
    ? filterNestedData(initialData, searchTerm)
    : initialData;

  // Recursive component to render nested data
  const RenderItem = ({ item }) => (
    <div className="pl-4 border-l border-gray-200">
      <div className="py-2">
        <span className="font-medium">{item.title}</span>
      </div>
      {item.children && item.children.length > 0 && (
        <div className="ml-4">
          {item.children.map((child, index) => (
            <RenderItem key={child.id || index} item={child} />
          ))}
        </div>
      )}
    </div>
  );

  return (
    <div className="max-w-2xl mx-auto p-4">
      <input
        type="text"
        placeholder="Search by title..."
        value={searchTerm}
        onChange={handleSearch}
        className="w-full p-2 mb-4 border rounded"
      />
      <div className="space-y-2">
        {filteredData.map((item, index) => (
          <RenderItem key={item.id || index} item={item} />
        ))}
      </div>
    </div>
  );
};

export default DataFilter;