text: import React, { Component } from 'react';
  import Alert from 'react-bootstrap/Alert';
  import Button from 'react-bootstrap/Button';
  import Card from 'react-bootstrap/Card';
  import CardDeck from 'react-bootstrap/CardDeck';
  
  export class Counter extends Component {
    static displayName = Counter.name;
  
    constructor(props) {
      super(props);
      this.state = { currentCount: 0 };
      this.incrementCounter = this.incrementCounter.bind(this);
    }
  
    incrementCounter() {
      this.setState({
        currentCount: this.state.currentCount + 1
      });
    }
  
    render() {
      return (
        <div>
          <h1>Counter</h1>
          
          <Alert key="1" variant="primary">
            This is a primary alert with{' '}
            <Alert.Link href="#">an example link</Alert.Link>. Give it a click if you
            like.
          </Alert>     
          
          <Button variant="primary">Primary</Button>{' '}
          <Button variant="secondary">Secondary</Button>{' '}
          <Button variant="success">Success</Button>{' '}
          <Button variant="warning">Warning</Button>{' '}
          <Button variant="danger">Danger</Button> <Button variant="info">Info</Button>{' '}
          <Button variant="light">Light</Button> <Button variant="dark">Dark</Button>{' '}
          <Button variant="link">Link</Button>
          <hr/>
          <CardDeck>
            <Card>
              <Card.Img variant="top" src="/img/char11.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This is a wider card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
            <Card>
              <Card.Img variant="top" src="/img/char12.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This card has supporting text below as a natural lead-in to additional
                  content.{' '}
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
            <Card>
              <Card.Img variant="top" src="/img/char13.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This is a wider card with supporting text below as a natural lead-in to
                  additional content. This card has even longer content than the first to
                  show that equal height action.
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
          </CardDeck>  
          <CardDeck>  
            <Card>
              <Card.Img variant="top" src="/img/char21.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This is a wider card with supporting text below as a natural lead-in to
                  additional content. This content is a little bit longer.
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
            <Card>
              <Card.Img variant="top" src="/img/char22.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This card has supporting text below as a natural lead-in to additional
                  content.{' '}
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>
            <Card>
              <Card.Img variant="top" src="/img/char23.jpg" />
              <Card.Body>
                <Card.Title>Card title</Card.Title>
                <Card.Text>
                  This is a wider card with supporting text below as a natural lead-in to
                  additional content. This card has even longer content than the first to
                  show that equal height action.
                </Card.Text>
              </Card.Body>
              <Card.Footer>
                <small className="text-muted">Last updated 3 mins ago</small>
              </Card.Footer>
            </Card>          
          </CardDeck>                
  
          <p>This is a simple example of a React component.</p>
          <p aria-live="polite">Current count: <strong>{this.state.currentCount}</strong></p>
  
          <button className="btn btn-primary" onClick={this.incrementCounter}>Increment</button>
  
        </div>
      );
    }
  }
  
  