Line data    Source code

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