import * as React from 'react'; import { Card, CardBody, CardHeader, DescriptionList, DescriptionListDescription, DescriptionListGroup, DescriptionListTerm, Flex, FlexItem, Tab, TabContent, Tabs, TabTitleText, Title } from '@patternfly/react-core'; import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; const descriptionListData = [ { status: 'Running', resourceName: 'Resource name that is long and can wrap', detail: '121 Systems', icon: }, { status: 'Ready', resourceName: 'Resource name that is long and can wrap', detail: '123 Systems', icon: }, { status: 'Running', resourceName: 'Resource name that is long and can wrap', detail: '122 Systems', icon: }, { status: 'Ready', resourceName: 'Resource name that is long and can wrap', detail: '124 Systems', icon: } ]; export const CardStatusTabbed: React.FunctionComponent = () => { const [activeTabKey, setActiveTabKey] = React.useState(0); const handleTabClick = (_e: React.MouseEvent, tabIndex: string | number) => { setActiveTabKey(Number(tabIndex)); }; const tabContent = ( {descriptionListData.map(({ status, resourceName, detail, icon }, index) => ( {icon} {resourceName}
{detail}
))} ); return ( <> Status {[1, 2, 3].map((tab, tabIndex) => ( {`Object ${tabIndex + 1}`}} tabContentId={`tabContent${tabIndex}`} /> ))} {[1, 2, 3].map((tab, tabIndex) => ( {tabContent} ))} ); };