Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 | 4x 4x 4x 4x 4x 64x | /*---------------------------------------------------------------------------------------------
* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
* See LICENSE.md in the project root for license terms and full copyright notice.
*--------------------------------------------------------------------------------------------*/
import type { ReactNode } from "react";
import React from "react";
import { Text } from "@itwin/itwinui-react";
import "./HorizontalTile.scss";
import classNames from "classnames";
interface HorizontalTileProps extends React.ComponentPropsWithoutRef<"div"> {
title: string;
button: ReactNode;
subText?: string;
onClickTitle?: () => void;
titleTooltip?: string;
subtextToolTip?: string;
selected: boolean;
}
export const HorizontalTile = ({ title, subText, onClickTitle, titleTooltip, subtextToolTip, button, selected, ...rest }: HorizontalTileProps) => {
return (
<div
className={classNames("ec3w-horizontal-tile-container", { "ec3w-horizontal-tile-container-selected": selected })}
data-testid="ec3-horizontal-tile"
onClick={rest.onClick}
>
<div className="ec3w-body">
<Text className={`ec3w-body-text ${onClickTitle ? "iui-anchor" : ""}`} onClick={onClickTitle} variant="body" title={titleTooltip}>
{title}
</Text>
{subText && (
<Text className="ec3w-body-text" isMuted={true} title={subtextToolTip} variant="small">
{subText}
</Text>
)}
</div>
<div className="ec3w-action-button" data-testid="ec3-tile-action-button">
{button}
</div>
</div>
);
};
|