@activecollab/components
Version:
ActiveCollab Components
27 lines (26 loc) • 2.04 kB
JavaScript
import React from "react";
import styled from "styled-components";
import { SparkIcon } from "../../components/Icons";
import { Trigger } from "../../components/Trigger";
/**
* "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.
*/
const StyledSuggestButton = styled(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;}"]);
export const SuggestSubtasksButton = () => /*#__PURE__*/React.createElement(StyledSuggestButton, {
type: "button"
}, /*#__PURE__*/React.createElement("span", {
className: "gradient-button"
}, /*#__PURE__*/React.createElement(SparkIcon, {
width: 16,
height: 16,
fill: "var(--color-theme-700)"
}), /*#__PURE__*/React.createElement("span", null, "Suggest Subtasks")));
SuggestSubtasksButton.displayName = "SuggestSubtasksButton";
//# sourceMappingURL=SuggestSubtasksButton.js.map