ConversationSearch.tsx 1005 B

123456789101112131415161718192021222324252627282930313233343536373839
  1. "use client";
  2. interface ConversationSearchProps {
  3. value: string;
  4. onChange: (value: string) => void;
  5. }
  6. export function ConversationSearch({
  7. value,
  8. onChange,
  9. }: ConversationSearchProps) {
  10. return (
  11. <div className="p-4 border-b border-gray-200">
  12. <div className="relative">
  13. <input
  14. type="text"
  15. placeholder="Q Search"
  16. value={value}
  17. onChange={(event) => onChange(event.target.value)}
  18. className="w-full px-3 py-2 pl-9 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-400 text-sm"
  19. />
  20. <svg
  21. className="absolute left-2.5 top-2.5 w-4 h-4 text-gray-400"
  22. fill="none"
  23. stroke="currentColor"
  24. viewBox="0 0 24 24"
  25. >
  26. <path
  27. strokeLinecap="round"
  28. strokeLinejoin="round"
  29. strokeWidth={2}
  30. d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
  31. />
  32. </svg>
  33. </div>
  34. </div>
  35. );
  36. }