import React from 'react'; import { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from '@patternfly/react-core'; export const CardClickable: React.FunctionComponent = () => { const [isChecked1, setIsChecked1] = React.useState(false); const [isChecked2, setIsChecked2] = React.useState(false); const [isChecked3, setIsChecked3] = React.useState(false); const [isClicked, setIsClicked] = React.useState(false); const [isSecondary, setIsSecondary] = React.useState(false); const id1 = 'clickable-selectable-card-input-1'; const id2 = 'clickable-selectable-card-input-2'; const id3 = 'clickable-selectable-card-input-3'; const onClick = () => { setIsClicked((prevState) => !prevState); }; 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)} aria-label="add secondary styling" id="toggle-variant-clickable-selectable" name="toggle-variant" />
This card performs an action upon clicking the card title and is selectable. Second Card This card is selectable and has a link in the card body that navigates to{' '}
.
This card is clickable and selectable, but disabled.
); };