Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 | 11x 48x 48x 48x 6x 2x 1x 1x | /**
* @file Buttons.tsx
* @description
* Navigation buttons component for product management actions.
*
* **Functionality:**
* - Add Product - Navigates to product creation page
* - Delete Product - Navigates to product deletion page (admin-only)
* - Search Product - Navigates to product search page
* - List Stock - Navigates to inventory listing page
*
* **Props:**
* - `hideAdminButtons` - Controls visibility of admin-specific buttons
*
* @component
* @example
* const [hideAdmin, setHideAdmin] = useState(false);
* return <Buttons hideAdminButtons={hideAdmin} />;
*/
import React from 'react';
import { useNavigate } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
/**
* Props for Buttons component
* @interface ButtonsProps
*/
interface ButtonsProps {
/** Hide admin-specific buttons (Add & Delete Product) */
hideAdminButtons?: boolean;
}
/**
* Navigation buttons for product-related actions
* @component
* @param {ButtonsProps} props - Component props
* @returns {JSX.Element} Navigation button group
*/
const Buttons: React.FC<ButtonsProps> = ({ hideAdminButtons = false }) => {
const navigate = useNavigate();
const { t } = useTranslation();
return (
<div className="flex flex-wrap gap-4">
{!hideAdminButtons && (
<>
<button
className="dashboard-button button-add"
onClick={() => navigate('/add-product')}
>
{t('buttons.addProduct')}
</button>
<button
className="dashboard-button button-delete"
onClick={() => navigate('/delete-product')}
>
{t('buttons.deleteProduct')}
</button>
</>
)}
<button
className="dashboard-button button-search"
onClick={() => navigate('/search-product')}
>
{t('buttons.searchProduct')}
</button>
<button
className="dashboard-button button-stock"
onClick={() => navigate('/list-stock')}
>
{t('buttons.listStock')}
</button>
</div>
);
};
export default Buttons;
|