github.com/quickfeed/quickfeed@v0.0.0-20240507093252-ed8ca812a09c/public/src/components/Card.tsx (about)

     1  import React from "react"
     2  import { useHistory } from "react-router"
     3  import { Color } from "../Helpers"
     4  
     5  
     6  export interface Notification {
     7      color: Color,
     8      text: string,
     9  }
    10  
    11  /**  This component displays a card with a header, a body and a button in the footer
    12   * @param title: The title of the card
    13   * @param text: The text in body of the card 
    14   * @param buttonText: The text of the button in the footer
    15   * @param notification: (optional) Notification to display. Floats right of title. 
    16   * @param to: (Optional) The path to navigate to when the button is clicked 
    17   * @param onclick: (Optional) The function to call when the button is clicked 
    18   */
    19  const Card = (props: { title: string, text: string, buttonText: string, notification?: Notification,  to?: string, onclick?: () => void }): JSX.Element => {
    20      const history = useHistory()
    21  
    22      const notification = props.notification ? <i className={`badge badge-${props.notification.color} float-right`}>{props.notification.text}</i> : null
    23  
    24      // TODO: Maybe support both onclick and to, rather than having to choose one. Not sure where it would be used though.
    25      /* Runs the provided function, or redirect, on button click. If both 'to' and 'onclick' are provided, 'onclick' takes precedence */
    26      const onClick = () => {
    27          if (props.onclick) {
    28              props.onclick()
    29          } else if (props.to) {
    30              history.push(props.to) // Redirect to the given URL
    31          }
    32      }
    33      return (
    34          <div className="col-sm-6" style={{ marginBottom: "10px" }}>
    35              <div className="card">
    36                  <div className="card-body">
    37                      <h5 className="card-title">
    38                          {props.title}
    39                          {" "}
    40                          {notification}
    41                      </h5>
    42                      <p className="card-text">
    43                          {props.text}
    44                      </p>
    45                      <div className="btn btn-primary" onClick={onClick}>
    46                          {props.buttonText}
    47                      </div>
    48                  </div>
    49              </div>
    50          </div>
    51      )
    52  }
    53  
    54  export default Card