import React from 'react'; import { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from '@patternfly/react-core'; export const SelectableCard: React.FunctionComponent = () => { const [isChecked1, setIsChecked1] = React.useState(false); const [isChecked2, setIsChecked2] = React.useState(false); const [isChecked3, setIsChecked3] = React.useState(false); const [isSecondary, setIsSecondary] = React.useState(false); const id1 = 'selectable-card-input-1'; const id2 = 'selectable-card-input-2'; const id3 = 'selectable-card-input-3'; const onChange = (event: React.FormEvent, checked: boolean) => { const name = event.currentTarget.name; switch (name) { case id1: setIsChecked1(checked); break; case id2: setIsChecked2(checked); break; case id3: setIsChecked3(checked); break; } }; const toggleVariant = (checked: boolean) => { setIsSecondary(checked); }; return ( <> toggleVariant(checked)} id="toggle-variant-selectable" name="toggle-variant" />
First card This card is selectable. Second card This card is selectable. Third card This card is selectable but disabled.
); };