@lanaco/lnc-react-ui
Version:
React component library
52 lines (45 loc) • 1.98 kB
JavaScript
"use strict";const e=require("react/jsx-runtime"),o=require("react"),n=require("./utils-BK6B_Y9X.cjs"),d=require("./Button.cjs"),f=require("./styled-components.browser.esm-BaNxtZgB.cjs"),g=require("./breakpoints-CcVm-gVm.cjs"),m=f.qe.div`
display: flex;
flex-direction: column;
align-items: center;
gap: 1.5rem;
align-self: stretch;
& .feedback__content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
gap: 0.5rem;
& .feedback__title {
color: var(--gray-950, #14161a);
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 2rem;
}
& .feedback__description {
color: var(--gray-600, #676e79);
text-align: center;
font-size: 1rem;
font-style: normal;
font-weight: 500;
line-height: 1.5rem;
}
}
& .feedback__action {
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
letter-spacing: -0.09px;
background: var(--neutral-95004, rgba(20, 22, 26, 0.04));
&:hover {
color: var(--gray-950, #14161a);
background: var(--neutral-95008, rgba(20, 22, 26, 0.08));
}
}
@media ${g.down("S")} {
text-align: center;
}
`,p=o.forwardRef(({title:i,description:a,buttonText:s,onButtonAction:r=()=>{}},l)=>e.jsxs(m,{ref:l,className:"lp-section lp-general-section lp-feedback-section",children:[e.jsxs("div",{className:"feedback__content",children:[n.isDefinedNotEmptyString(i)&&e.jsx("div",{className:"feedback__title",children:e.jsx("span",{children:i})}),n.isDefinedNotEmptyString(a)&&e.jsx("div",{className:"feedback__description",children:e.jsx("span",{children:a})})]}),n.isDefinedNotEmptyString(s)&&e.jsx(d,{text:s,borderRadius:"curved",btnType:"tinted",color:"neutral",className:"feedback__action",onClick:t=>{var c;(c=t==null?void 0:t.target)==null||c.blur(),r==null||r()}})]}));module.exports=p;