"use client"
import * as React from 'react';
import Card from '@mui/material/Card';
import InputAdornment from '@mui/material/InputAdornment';
import OutlinedInput from '@mui/material/OutlinedInput';
import { MagnifyingGlass as MagnifyingGlassIcon } from '@phosphor-icons/react/dist/ssr/MagnifyingGlass';
import Tabs from '@mui/material/Tabs';
import Tab from '@mui/material/Tab';
import Box from '@mui/material/Box';
interface TabPanelProps {
children?: React.ReactNode;
index: number;
value: number;
}
interface AboutFiltersProps {
value: number;
onChange: (event: React.SyntheticEvent, newValue: number) => void;
onSearchChange: (query: string) => void;
onSearchChange1: (query: string) => void;
}
function CustomTabPanel(props: TabPanelProps) {
const { children, value, index, ...other } = props;
return (
{value === index && {children}}
);
}
function a11yProps(index: number) {
return {
id: `simple-tab-${index}`,
'aria-controls': `simple-tabpanel-${index}`,
};
}
export function AboutFilters({value,onChange,onSearchChange,onSearchChange1}:AboutFiltersProps): React.JSX.Element {
const [searchText, setSearchText] = React.useState('');
const [searchText1, setSearchText1] = React.useState('');
React.useEffect(() => {
const delayDebounceFn = setTimeout(() => {
onSearchChange(searchText);
onSearchChange1(searchText1);
}, 300);
return () => clearTimeout(delayDebounceFn);
}, [searchText, onSearchChange, searchText1, onSearchChange1]);
const handleSearchChange = (event: React.ChangeEvent) => {
setSearchText(event.target.value);
};
const handleSearchChange1 = (event: React.ChangeEvent) => {
setSearchText1(event.target.value);
};
return (
{
if (value === 1) {
handleSearchChange(event);
} else if (value === 2) {
handleSearchChange1(event);
}
}}
fullWidth
placeholder="Search..."
startAdornment={
}
sx={{ maxWidth: '500px', borderRadius:'35px',height:'45px', '& .MuiOutlinedInput-notchedOutline': {
borderColor: 'none', // Default border color
},
'&.Mui-focused .MuiOutlinedInput-notchedOutline': {
borderColor: 'black', // Yellow border color on focus
}, }}
/>
);
}