github.com/minio/console@v1.4.1/web-app/src/screens/Console/IDP/AddIDPConfigurationHelpbox.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, { Fragment } from "react";
    18  import { HelpIconFilled, Box } from "mds";
    19  
    20  interface IContent {
    21    icon: React.ReactNode;
    22    text: string;
    23    iconDescription: string;
    24  }
    25  
    26  interface IAddIDPConfigurationHelpBoxProps {
    27    helpText: string;
    28    docLink: string;
    29    docText: string;
    30    contents: IContent[];
    31  }
    32  
    33  const FeatureItem = ({
    34    icon,
    35    description,
    36  }: {
    37    icon: any;
    38    description: string;
    39  }) => {
    40    return (
    41      <Box
    42        sx={{
    43          display: "flex",
    44          "& .min-icon": {
    45            marginRight: "10px",
    46            height: "23px",
    47            width: "23px",
    48            marginBottom: "10px",
    49          },
    50        }}
    51      >
    52        {icon}{" "}
    53        <div style={{ fontSize: "14px", fontStyle: "italic", color: "#5E5E5E" }}>
    54          {description}
    55        </div>
    56      </Box>
    57    );
    58  };
    59  
    60  const AddIDPConfigurationHelpBox = ({
    61    helpText,
    62    docLink,
    63    docText,
    64    contents,
    65  }: IAddIDPConfigurationHelpBoxProps) => {
    66    return (
    67      <Box
    68        sx={{
    69          flex: 1,
    70          border: "1px solid #eaeaea",
    71          borderRadius: "2px",
    72          display: "flex",
    73          flexFlow: "column",
    74          padding: "20px",
    75        }}
    76      >
    77        <Box
    78          sx={{
    79            fontSize: "16px",
    80            fontWeight: 600,
    81            display: "flex",
    82            alignItems: "center",
    83            marginBottom: "16px",
    84            paddingBottom: "20px",
    85  
    86            "& .min-icon": {
    87              height: "21px",
    88              width: "21px",
    89              marginRight: "15px",
    90            },
    91          }}
    92        >
    93          <HelpIconFilled />
    94          <div>{helpText}</div>
    95        </Box>
    96        <Box sx={{ fontSize: "14px", marginBottom: "15px" }}>
    97          {contents.map((content, index) => (
    98            <Fragment key={`feature-item-${index}`}>
    99              {content.icon && (
   100                <Box sx={{ paddingBottom: "20px" }}>
   101                  <FeatureItem
   102                    icon={content.icon}
   103                    description={content.iconDescription}
   104                  />
   105                </Box>
   106              )}
   107              <Box sx={{ paddingBottom: "20px" }}>{content.text}</Box>
   108            </Fragment>
   109          ))}
   110          <Box sx={{ paddingBottom: "20px" }}>
   111            <a href={docLink} target="_blank" rel="noopener">
   112              {docText}
   113            </a>
   114          </Box>
   115        </Box>
   116      </Box>
   117    );
   118  };
   119  
   120  export default AddIDPConfigurationHelpBox;