27 lines
1.3 KiB
TypeScript
27 lines
1.3 KiB
TypeScript
import { useTranslation } from 'react-i18next';
|
|
import IconPlus from '../../../components/Icon/IconPlus';
|
|
import { useState } from 'react';
|
|
import { CreateProductCollectionModal } from './CreateProductCollectionModal';
|
|
|
|
export const ProductCollectionListHeader = ({ search, setSearch }: { search: string | null; setSearch: (v: string | null) => void }) => {
|
|
const { t } = useTranslation();
|
|
const [isOpenModalCreateCollection, setIsOpenModalCreateCollection] = useState(false);
|
|
|
|
return (
|
|
<>
|
|
<div className="mb-4.5 px-5 flex md:items-center md:flex-row flex-col gap-5">
|
|
<div className="ltr:mr-auto rtl:ml-auto">
|
|
<input type="text" className="form-input w-auto" placeholder={t('search')} value={search || ''} onChange={(e) => setSearch(e.target.value || null)} />
|
|
</div>
|
|
<div className="flex items-center gap-2">
|
|
<button className="btn btn-primary gap-2" onClick={() => setIsOpenModalCreateCollection(true)}>
|
|
<IconPlus />
|
|
{t('add_product_collection')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<CreateProductCollectionModal isOpen={isOpenModalCreateCollection} onClose={() => setIsOpenModalCreateCollection(false)} />
|
|
</>
|
|
);
|
|
};
|