github.com/cockroachdb/cockroach@v20.2.0-alpha.1+incompatible/pkg/ui/src/components/empty/empty.tsx (about)

     1  // Copyright 2019 The Cockroach Authors.
     2  //
     3  // Use of this software is governed by the Business Source License
     4  // included in the file licenses/BSL.txt.
     5  //
     6  // As of the Change Date specified in that file, in accordance with
     7  // the Business Source License, use of this software will be governed
     8  // by the Apache License, Version 2.0, included in the file
     9  // licenses/APL.txt.
    10  
    11  import heroBannerLp from "assets/heroBannerLp.png";
    12  import React from "react";
    13  import { Anchor, Button, Text, TextTypes } from "src/components";
    14  import "./empty.styl";
    15  
    16  export interface IEmptyProps {
    17    title?: string;
    18    description?: string;
    19    label?: React.ReactNode;
    20    link?: string;
    21    anchor?: string;
    22    backgroundImage?: string;
    23    onClick?: () => void;
    24    btnType?: "button" | "anchor";
    25  }
    26  
    27  export const Empty = ({
    28    title,
    29    description,
    30    anchor,
    31    label,
    32    onClick,
    33    link,
    34    backgroundImage,
    35  }: IEmptyProps) => (
    36    <div className="cl-empty-view" style={{ backgroundImage: `url(${backgroundImage})` }}>
    37      <Text
    38        className="cl-empty-view__title"
    39        textType={TextTypes.Heading3}
    40      >
    41        {title}
    42      </Text>
    43      <div className="cl-empty-view__content">
    44        <main className="cl-empty-view__main">
    45          <Text
    46            textType={TextTypes.Body}
    47          >
    48            {description}
    49            {link && <Anchor href={link}>{anchor}</Anchor>}
    50          </Text>
    51        </main>
    52        <footer className="cl-empty-view__footer">
    53          <Button
    54            type="primary"
    55            onClick={onClick}
    56          >
    57            {label}
    58          </Button>
    59        </footer>
    60      </div>
    61    </div>
    62  );
    63  
    64  Empty.defaultProps = {
    65    onClick: () => {},
    66    backgroundImage: heroBannerLp,
    67    anchor: "Learn more",
    68    label: "Learn more",
    69    title: "No results",
    70  };