@activecollab/components
Version:
ActiveCollab Components
35 lines (34 loc) • 2.46 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SuggestSubtasksButton = void 0;
var _react = _interopRequireDefault(require("react"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _Icons = require("../../components/Icons");
var _Trigger = require("../../components/Trigger");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
/**
* "Suggest Subtasks" AI button, replicated from `new-activecollab-front`
* (`AiButton` + `SubtasksBodyWithoutItems`): a Trigger wrapping a
* `.gradient-button` that shows a Spark icon + label, with the AI gradient
* border appearing on hover. Translated from the app's Tailwind/CSS into
* styled-components for the Presentation Storybook.
*/
var StyledSuggestButton = (0, _styledComponents.default)(_Trigger.Trigger).withConfig({
displayName: "SuggestSubtasksButton__StyledSuggestButton",
componentId: "sc-19n02su-0"
})([".gradient-button{position:relative;display:inline-flex;align-items:center;gap:6px;color:var(--color-theme-700);fill:var(--color-theme-700);border:1px solid var(--color-theme-500);background-color:transparent;padding:3px 5px;font-weight:500;font-size:12px;letter-spacing:0.5px;line-height:16px;border-radius:6px;transition:background 0.5s,color 0.5s;}&:hover .gradient-button{border:none;padding:4px 6px;}&:hover .gradient-button span{color:var(--color-theme-900);}&:hover .gradient-button svg{fill:var(--color-theme-900);}&:hover .gradient-button::before{content:\"\";position:absolute;inset:0;border-radius:6px;padding:1px;background:var(--ai-gradient);-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);mask-composite:exclude;pointer-events:none;}"]);
var SuggestSubtasksButton = exports.SuggestSubtasksButton = function SuggestSubtasksButton() {
return /*#__PURE__*/_react.default.createElement(StyledSuggestButton, {
type: "button"
}, /*#__PURE__*/_react.default.createElement("span", {
className: "gradient-button"
}, /*#__PURE__*/_react.default.createElement(_Icons.SparkIcon, {
width: 16,
height: 16,
fill: "var(--color-theme-700)"
}), /*#__PURE__*/_react.default.createElement("span", null, "Suggest Subtasks")));
};
SuggestSubtasksButton.displayName = "SuggestSubtasksButton";
//# sourceMappingURL=SuggestSubtasksButton.js.map