Line data    Source code

       1              : /*
       2              :  * Copyright (C) 2019 Red Hat, Inc.
       3              :  * SPDX-License-Identifier: LGPL-2.1-or-later
       4              :  */
       5              : 
       6            5 : import React from "react";
       7              : 
       8              : import { Button } from "@patternfly/react-core/dist/esm/components/Button/index.js";
       9              : import { Card, CardBody, CardFooter, CardHeader, CardTitle } from '@patternfly/react-core/dist/esm/components/Card/index.js';
      10              : import { Gallery, GalleryItem } from "@patternfly/react-core/dist/esm/layouts/Gallery/index.js";
      11              : 
      12            5 : export const CardsDemo = () => {
      13            5 :     const cards = [
      14            5 :         <Card isCompact key="card1">
      15            5 :             <CardBody>I'm a card in a gallery</CardBody>
      16            5 :         </Card>,
      17            5 :         <Card isCompact key="card2">
      18            5 :             <CardBody>I'm a card in a gallery</CardBody>
      19            5 :             <CardFooter>I have a footer</CardFooter>
      20            5 :         </Card>,
      21            5 :         <Card isCompact key="card3">
      22            5 :             <CardBody>I'm a card in a gallery</CardBody>
      23            5 :         </Card>,
      24            5 :         <Card isCompact key="card4">
      25            5 :             <CardTitle>I have a header too</CardTitle>
      26            5 :             <CardBody>I'm a card in a gallery</CardBody>
      27            5 :         </Card>,
      28            5 :         <Card key="card5">
      29            5 :             <CardHeader actions={{
      30            5 :                 actions: <><input type="checkbox" />
      31            5 :                     <Button className="btn">click</Button></>,
      32            5 :             }} />
      33            5 :             <CardTitle>This is a card header</CardTitle>
      34            5 :             <CardBody>I'm a card in a gallery</CardBody>
      35            5 :         </Card>,
      36            5 :         <GalleryItem key="card6">
      37              :             I'm not a card, but I'm in the gallery too, as a generic GalleryItem.
      38            5 :         </GalleryItem>,
      39            5 :     ];
      40            5 :     return (
      41            5 :         <Gallery hasGutter>
      42            5 :             { cards }
      43            5 :         </Gallery>
      44              :     );
      45            5 : };