@helpwave/hightide
Version:
helpwave's component and theming library
61 lines • 1.77 kB
JavaScript
// src/components/layout-and-navigation/Tile.tsx
import clsx from "clsx";
import { Check } from "lucide-react";
import { jsx, jsxs } from "react/jsx-runtime";
var Tile = ({
title,
titleClassName,
description,
descriptionClassName,
onClick,
isSelected = false,
disabled = false,
prefix,
suffix,
normalClassName = "hover:bg-primary/40 cursor-pointer",
selectedClassName = "bg-primary/20",
disabledClassName = "text-disabled-text bg-disabled-background cursor-not-allowed",
className
}) => {
return /* @__PURE__ */ jsxs(
"div",
{
className: clsx(
"flex-row-2 w-full items-center",
{
[normalClassName]: onClick && !disabled,
[selectedClassName]: isSelected && !disabled,
[disabledClassName]: disabled
},
className
),
onClick: disabled ? void 0 : onClick,
children: [
prefix,
/* @__PURE__ */ jsxs("div", { className: "flex-col-0 w-full", children: [
/* @__PURE__ */ jsx("span", { className: clsx(titleClassName ?? "textstyle-title-normal"), children: title }),
!!description && /* @__PURE__ */ jsx("span", { className: clsx(descriptionClassName ?? "textstyle-description"), children: description })
] }),
suffix ?? (isSelected ? /* @__PURE__ */ jsx(Check, { size: 24 }) : void 0)
]
}
);
};
var ListTile = ({
...props
}) => {
return /* @__PURE__ */ jsx(
Tile,
{
...props,
titleClassName: props.titleClassName ?? "font-semibold",
className: clsx("px-2 py-1 rounded-md", props.className),
disabledClassName: props.disabledClassName ?? "text-disabled-text cursor-not-allowed"
}
);
};
export {
ListTile,
Tile
};
//# sourceMappingURL=Tile.mjs.map