diff options
Diffstat (limited to 'src/lib/variant/components/VariantGroupCard.jsx')
| -rw-r--r-- | src/lib/variant/components/VariantGroupCard.jsx | 35 |
1 files changed, 14 insertions, 21 deletions
diff --git a/src/lib/variant/components/VariantGroupCard.jsx b/src/lib/variant/components/VariantGroupCard.jsx index fd4f9b4d..8cb1eec4 100644 --- a/src/lib/variant/components/VariantGroupCard.jsx +++ b/src/lib/variant/components/VariantGroupCard.jsx @@ -1,33 +1,26 @@ -import { useState } from "react" -import VariantCard from "./VariantCard" +import { useState } from 'react' +import VariantCard from './VariantCard' -const VariantGroupCard = ({ - variants, - ...props -}) => { - const [ showAll, setShowAll ] = useState(false) +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" + {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' } + {!showAll ? `Lihat Semua +${variants.length - variantsToShow.length}` : 'Tutup'} </button> - ) } + )} </> ) } -export default VariantGroupCard
\ No newline at end of file +export default VariantGroupCard |