github.com/minio/console@v1.4.1/web-app/src/screens/Console/EventDestinations/DestinationButton.tsx (about)

     1  // This file is part of MinIO Console Server
     2  // Copyright (c) 2023 MinIO, Inc.
     3  //
     4  // This program is free software: you can redistribute it and/or modify
     5  // it under the terms of the GNU Affero General Public License as published by
     6  // the Free Software Foundation, either version 3 of the License, or
     7  // (at your option) any later version.
     8  //
     9  // This program is distributed in the hope that it will be useful,
    10  // but WITHOUT ANY WARRANTY; without even the implied warranty of
    11  // MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
    12  // GNU Affero General Public License for more details.
    13  //
    14  // You should have received a copy of the GNU Affero General Public License
    15  // along with this program.  If not, see <http://www.gnu.org/licenses/>.
    16  
    17  import React from "react";
    18  import get from "lodash/get";
    19  import { useNavigate } from "react-router-dom";
    20  import styled from "styled-components";
    21  import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
    22  
    23  interface IDestinationButton {
    24    destinationType: string;
    25    srcImage: string;
    26    title: string;
    27  }
    28  
    29  const DestinationButtonBase = styled.button(({ theme }) => ({
    30    background: get(theme, "boxBackground", "#FFF"),
    31    border: `${get(theme, "borderColor", "#E2E2E2")} 1px solid`,
    32    borderRadius: 5,
    33    width: 250,
    34    height: 80,
    35    display: "flex",
    36    alignItems: "center",
    37    justifyContent: "start",
    38    marginBottom: 16,
    39    marginRight: 8,
    40    cursor: "pointer",
    41    overflow: "hidden",
    42    "&:hover": {
    43      backgroundColor: get(theme, "buttons.regular.hover.background", "#ebebeb"),
    44    },
    45    "& .imageContainer": {
    46      width: 80,
    47      "& .logoButton": {
    48        maxWidth: 46,
    49        maxHeight: 46,
    50        filter: "drop-shadow(1px 1px 8px #fff)",
    51      },
    52    },
    53    "& .lambdaNotifTitle": {
    54      color: get(theme, "buttons.callAction.enabled.background", "#07193E"),
    55      fontSize: 16,
    56      fontFamily: "Inter,sans-serif",
    57      paddingLeft: 18,
    58      fontWeight: "bold",
    59    },
    60  }));
    61  
    62  const DestinationButton = ({
    63    destinationType,
    64    srcImage,
    65    title,
    66  }: IDestinationButton) => {
    67    const navigate = useNavigate();
    68  
    69    return (
    70      <DestinationButtonBase
    71        onClick={() => {
    72          navigate(`${IAM_PAGES.EVENT_DESTINATIONS_ADD}/${destinationType}`);
    73        }}
    74      >
    75        <span className={"imageContainer"}>
    76          <img src={srcImage} className={"logoButton"} alt={title} />
    77        </span>
    78        <span className={"lambdaNotifTitle"}>{title}</span>
    79      </DestinationButtonBase>
    80    );
    81  };
    82  
    83  export default DestinationButton;