import React from 'react'; import { DashboardWrapper } from '@patternfly/react-core/src/demos/DashboardWrapper'; import { PageSection, TextContent, Text, Gallery, Card, CardBody, CardTitle, PageSectionVariants, Modal, ModalVariant, Tab, Tabs, TabTitleText, List, ListItem, Grid, GridItem, TabContent } from '@patternfly/react-core'; interface Product { id: number; name: string; description: string; } const products: Product[] = [ { id: 0, name: 'PatternFly', description: 'PatternFly is a community project that promotes design commonality and improves user experience.' }, { id: 1, name: 'ActiveMQ', description: 'The ActiveMQ component allows messages to be sent to a JMS Queue or Topic; or messages to be consumed from a JMS Queue or Topic using Apache ActiveMQ.' }, { id: 2, name: 'Apache Spark', description: 'This documentation page covers the Apache Spark component for the Apache Camel.' } ]; export const ModalTabs: React.FunctionComponent = () => { const [isModalOpen, setIsModalOpen] = React.useState(true); const [selectedProduct, setSelectedProduct] = React.useState(products[0]); const [activeTabKey, setActiveTabKey] = React.useState(0); const onCardClick = React.useCallback( (product: Product) => () => { setSelectedProduct(product); setIsModalOpen(true); }, [] ); const onCardKeyPress = React.useCallback( (product: Product) => (event: React.KeyboardEvent) => { if (event.key === 'Enter' || event.key === ' ') { onCardClick(product)(); } }, [] ); const closeModal = React.useCallback(() => { setSelectedProduct(undefined); setIsModalOpen(false); setActiveTabKey(0); }, []); const onTabSelect = React.useCallback( (_event: React.MouseEvent, tabIndex: string | number) => setActiveTabKey(tabIndex), [] ); return ( Projects Click any project card to view Tabs within Modals. {products.map((product) => ( onCardClick(product)()} onKeyPress={onCardKeyPress(product)} > {product.name} {product.description} ))} {selectedProduct && ( Details} /> Documentation} /> {selectedProduct.description} Doc link 1 Doc link 2 Doc link 3 )} ); };