github.com/minio/console@v1.4.1/web-app/src/screens/Console/EventDestinations/TargetTitle.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 styled from "styled-components";
    20  import { Box } from "mds";
    21  
    22  interface ITargetTitle {
    23    logoSrc: string;
    24    title: string;
    25  }
    26  
    27  const TargetBase = styled.div(({ theme }) => ({
    28    background: get(theme, "boxBackground", "#fff"),
    29    border: `${get(theme, "borderColor", "#E5E5E5")} 1px solid`,
    30    borderRadius: 5,
    31    height: 80,
    32    display: "flex",
    33    alignItems: "center",
    34    justifyContent: "start",
    35    marginBottom: 16,
    36    cursor: "pointer",
    37    padding: 0,
    38    overflow: "hidden",
    39    "& .logoButton": {
    40      height: "80px",
    41    },
    42    "& .imageContainer": {
    43      backgroundColor: get(theme, "bgColor", "#fff"),
    44      display: "flex",
    45      alignItems: "center",
    46      justifyContent: "center",
    47      width: 80,
    48      height: 80,
    49  
    50      "& img": {
    51        maxWidth: 46,
    52        maxHeight: 46,
    53        filter: "drop-shadow(1px 1px 8px #fff)",
    54      },
    55    },
    56    "& .titleBox": {
    57      color: get(theme, "fontColor", "#000"),
    58      fontSize: 16,
    59      fontFamily: "Inter,sans-serif",
    60      paddingLeft: 18,
    61    },
    62  }));
    63  
    64  const TargetTitle = ({ logoSrc, title }: ITargetTitle) => {
    65    return (
    66      <TargetBase>
    67        <Box className={"imageContainer"}>
    68          <img src={logoSrc} className={"logoButton"} alt={title} />
    69        </Box>
    70  
    71        <Box className={"titleBox"}>
    72          <b>{title} Event Destination</b>
    73        </Box>
    74      </TargetBase>
    75    );
    76  };
    77  
    78  export default TargetTitle;