AppCakes
87 lines
2.0 KiB
TypeScript
87 lines
2.0 KiB
TypeScript
import React from 'react';
|
|
import { IonIcon } from '@ionic/react';
|
|
import { searchOutline, optionsOutline } from 'ionicons/icons';
|
|
|
|
interface ListSearchRowProps {
|
|
value: string;
|
|
onChange: (val: string) => void;
|
|
placeholder?: string;
|
|
onFilterClick?: () => void;
|
|
showFilter?: boolean;
|
|
}
|
|
|
|
const ListSearchRow: React.FC<ListSearchRowProps> = ({
|
|
value,
|
|
onChange,
|
|
placeholder = 'Search...',
|
|
onFilterClick,
|
|
showFilter = false,
|
|
}) => {
|
|
return (
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: '12px',
|
|
margin: '0 20px 12px',
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
flex: 1,
|
|
backgroundColor: '#ffffff',
|
|
borderRadius: '16px',
|
|
padding: '0 16px',
|
|
height: '48px',
|
|
}}
|
|
>
|
|
<IonIcon
|
|
icon={searchOutline}
|
|
style={{ fontSize: '20px', color: '#9ca3af', flexShrink: 0 }}
|
|
/>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => onChange(e.target.value)}
|
|
placeholder={placeholder}
|
|
style={{
|
|
flex: 1,
|
|
border: 'none',
|
|
outline: 'none',
|
|
backgroundColor: 'transparent',
|
|
padding: '0 12px',
|
|
fontSize: '15px',
|
|
color: '#111827',
|
|
}}
|
|
/>
|
|
</div>
|
|
{showFilter && (
|
|
<button
|
|
onClick={onFilterClick}
|
|
style={{
|
|
width: '48px',
|
|
height: '48px',
|
|
borderRadius: '16px',
|
|
backgroundColor: '#ffffff',
|
|
border: 'none',
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
cursor: 'pointer',
|
|
}}
|
|
>
|
|
<IonIcon
|
|
icon={optionsOutline}
|
|
style={{ fontSize: '20px', color: '#6d28d9' }}
|
|
/>
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ListSearchRow;
|