github.com/minio/console@v1.4.1/web-app/src/screens/Console/HelpItem.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 { DocItem } from "./HelpMenu.types";
    19  import MoreLink from "../../common/MoreLink";
    20  import placeholderImg from "../../placeholderimage.png";
    21  
    22  interface IHelpItemProps {
    23    item: DocItem;
    24    displayImage?: boolean;
    25  }
    26  
    27  const HelpItem = ({ item, displayImage = true }: IHelpItemProps) => {
    28    return (
    29      <Fragment>
    30        <div
    31          style={{
    32            display: "flex",
    33            flexDirection: "row",
    34          }}
    35        >
    36          {displayImage && (
    37            <div style={{ paddingLeft: 16 }}>
    38              <a href={item.url} target={"_blank"}>
    39                <img
    40                  src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
    41                  alt={item.title}
    42                  style={{
    43                    width: 208,
    44                    height: 116,
    45                    backgroundImage: `url(${item.img}), url(${placeholderImg})`,
    46                    backgroundPosition: "center center",
    47                    backgroundSize: "cover",
    48                    backgroundRepeat: "no-repeat",
    49                  }}
    50                />
    51              </a>
    52            </div>
    53          )}
    54          <div style={{ flexGrow: 1, flexBasis: "auto", paddingLeft: 16 }}>
    55            <div
    56              style={{
    57                width: "100%",
    58                font: "normal normal bold 16px/28px Inter",
    59                whiteSpace: "pre-wrap",
    60              }}
    61            >
    62              {item.title}
    63            </div>
    64            <div
    65              style={{
    66                width: "100%",
    67                whiteSpace: "pre-line",
    68                lineHeight: "1.5em",
    69                height: "3em",
    70                overflow: "hidden",
    71                textOverflow: "ellipsis",
    72              }}
    73            >
    74              {item.body}
    75            </div>
    76            <MoreLink text={"Learn more"} link={item.url} color={"#3874A6"} />
    77          </div>
    78        </div>
    79      </Fragment>
    80    );
    81  };
    82  
    83  export default HelpItem;