diff options
| author | IT Fixcomart <it@fixcomart.co.id> | 2023-03-01 09:18:52 +0000 |
|---|---|---|
| committer | IT Fixcomart <it@fixcomart.co.id> | 2023-03-01 09:18:52 +0000 |
| commit | a7abbf4ddc70068620e9f44b74dc162ce2e16ee2 (patch) | |
| tree | 74f66253717515d364ce74bd8275015c1f829cbc /src/lib/variant/components/VariantGroupCard.jsx | |
| parent | 90e1edab9b6a8ccc09a49fed3addbec2cbc4e4c3 (diff) | |
| parent | a1b9b647a6c4bda1f5db63879639d44543f9557e (diff) | |
Merged in refactor (pull request #1)
Refactor
Diffstat (limited to 'src/lib/variant/components/VariantGroupCard.jsx')
| -rw-r--r-- | src/lib/variant/components/VariantGroupCard.jsx | 30 |
1 files changed, 30 insertions, 0 deletions
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx new file mode 100644 index 00000000..e5f5c7fc --- /dev/null +++ b/src/lib/variant/components/VariantGroupCard.jsx @@ -0,0 +1,30 @@ +import { useState } from 'react' +import VariantCard from './VariantCard' + +const VariantGroupCard = ({ variants, ...props }) => { + const [showAll, setShowAll] = useState(false) + const variantsToShow = showAll ? variants : variants.slice(0, 2) + + return ( + <> + {variantsToShow?.map((variant, index) => ( + <VariantCard + key={index} + product={variant} + {...props} + /> + ))} + {variants.length > 2 && ( + <button + type='button' + className='btn-light py-2 w-full' + onClick={() => setShowAll(!showAll)} + > + {!showAll ? `Lihat Semua +${variants.length - variantsToShow.length}` : 'Tutup'} + </button> + )} + </> + ) +} + +export default VariantGroupCard |
