import React from 'react'; import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper'; import { PageSection, Content, Gallery, Card, CardHeader, CardBody, CardTitle, Modal, ModalBody, ModalHeader, Tab, Tabs, TabTitleText, List, ListItem, Grid, GridItem, TabContent } from '@patternfly/react-core'; interface Product { id: string; name: string; description: string; } const products: Product[] = [ { id: 'pf-card', name: 'PatternFly', description: 'PatternFly is a community project that promotes design commonality and improves user experience.' }, { id: 'mq-card', 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: 'apache-card', 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 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) => ( {product.name} {product.description} ))} {selectedProduct && ( Details} /> Documentation} /> {selectedProduct.description} Doc link 1 Doc link 2 Doc link 3 )} ); };