@lanaco/lnc-react-ui
Version:
React component library
318 lines (287 loc) • 8.2 kB
JavaScript
import { jsx as r, Fragment as u, jsxs as l } from "react/jsx-runtime";
import { Suspense as v, forwardRef as y } from "react";
import { C as w } from "./index-BppfjY8h.js";
import { b as k, a as C } from "./style-NhzYtIA7.js";
import { s as h } from "./emotion-styled.browser.esm-DfbrHHed.js";
import { d as o, s as i } from "./breakpoints-BubDitvo.js";
import S from "./Button.js";
import { u as j } from "./useDetectMobile-B0Jog4jQ.js";
import { m as $ } from "./utils-BUdHa0nB.js";
const N = h(k)`
@media ${o("S")} {
& > div {
height: 100%;
aspect-ratio: 1 / 1;
}
}
`, z = ({ keyPrefix: t }) => /* @__PURE__ */ r(N, { children: /* @__PURE__ */ r(
C,
{
keyPrefix: `${t}-0`,
width: "100%",
height: "22.5rem"
}
) }), B = ({
keyPrefix: t,
isLoading: a = !1,
fallbackComponent: n = /* @__PURE__ */ r(u, {}),
children: s
}) => /* @__PURE__ */ r(v, { fallbackComponent: n, children: a === !0 ? /* @__PURE__ */ r(z, { keyPrefix: t }) : s }), M = h.div`
&:hover {
cursor: pointer;
& .react-multiple-carousel__arrow {
visibility: visible;
}
}
& .carousel-slider {
align-items: center;
}
& .carousel-item {
padding-right: 0;
&:not(.react-multi-carousel-item--active) {
& .section__card {
height: 22.5rem;
}
}
& .section__card {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
border-radius: 0.75rem;
width: 100%;
height: 22.5rem;
position: relative;
overflow: hidden;
& .section__image {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
display: block;
border-radius: inherit;
}
& .card__content {
position: absolute;
top: 0;
left: 0;
padding: 3rem;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
}
& .card__text {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 0.25rem;
}
& .card__title {
color: var(--white, #fff);
font-size: 1.75rem;
font-style: normal;
font-weight: 600;
line-height: 2.25rem;
}
& .card__description {
color: var(--white, #fff);
font-size: 1rem;
font-style: normal;
font-weight: 400;
line-height: 1.5rem;
}
& .card__action {
padding: 0.625rem 0.75rem;
background: var(--white, #fff);
color: var(--gray-950, #14161a);
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 1.25rem;
width: fit-content;
}
}
}
& .react-multiple-carousel__arrow {
width: 3rem;
height: 3rem;
padding: 0.5rem;
background: rgba(255, 255, 255, 0.8);
box-shadow: 1px 1px 4px 0 rgba(20, 22, 26, 0.08),
0 2px 16px 0 rgba(20, 22, 26, 0.16);
backdrop-filter: blur(1.25rem);
visibility: hidden;
&::before {
color: var(--gray-950, #14161a);
}
&:hover {
background: rgba(255, 255, 255, 0.5);
}
}
& .react-multiple-carousel__arrow--left {
left: 1rem;
}
& .react-multiple-carousel__arrow--right {
right: 1rem;
}
@media ${o("M")} {
& .carousel-item .section__card,
& .carousel-item:not(.react-multi-carousel-item--active) .section__card {
height: 100%;
}
& .carousel-item .section__card .section__image {
object-fit: contain;
object-position: center;
}
}
@media ${o("S")} {
& .carousel-item .section__card .section__image {
object-fit: cover;
object-position: center;
}
}
@media ${o("XS")} {
& .carousel-container {
min-height: 23.4375rem;
}
& .carousel-item {
padding-right: 1rem;
&:last-of-type {
padding-left: 1rem;
padding-right: 0;
}
&:nth-last-child(2) {
padding-right: 0;
}
&:not(.react-multi-carousel-item--active) {
& .section__card {
height: 20.625rem;
}
}
&.react-multi-carousel-item--active:not([data-index="0"]) {
& .section__card {
animation: scaleCarouselItem 500ms forwards;
}
}
& .section__card {
height: 23.4375rem;
border-radius: 0.5rem;
& .section__image {
object-fit: cover;
object-position: center;
}
& .card__content {
display: none;
}
}
}
@keyframes scaleCarouselItem {
from {
height: 20.625rem;
}
top {
height: 23.4375rem;
}
}
}
`, F = y(
({
items: t = [],
isLoading: a = !1,
deviceType: n,
partialVisible: s = !0,
fallbackComponent: p = /* @__PURE__ */ r(u, {}),
onSelectItem: f = () => {
},
onButtonAction: _ = () => {
},
carouselProps: g
}, b) => {
const x = {
desktop: {
breakpoint: { max: 3e3, min: i.M.max },
items: 1,
partialVisibilityGutter: 0
},
tablet: {
breakpoint: { max: i.M.max, min: i.S.min },
items: 1,
partialVisibilityGutter: 0
},
mobile: {
breakpoint: { max: i.XS.max, min: 0 },
items: 1,
partialVisibilityGutter: 64
}
}, d = j();
return /* @__PURE__ */ r(M, { className: "lp-section lp-bnr-section lp-banner-section-carousel banner-section-carousel-lnc", ref: b, children: /* @__PURE__ */ r(
B,
{
fallbackComponent: p,
keyPrefix: "banner-carousel-skeleton",
isLoading: a,
children: /* @__PURE__ */ r(
w,
{
responsive: x,
deviceType: n,
removeArrowOnDeviceType: ["tablet", "mobile"],
infinite: !d,
keyBoardControl: !0,
autoPlay: !0,
partialVisible: s,
customTransition: "transform 500ms ease-in-out",
sliderClass: "carousel-slider",
itemClass: "carousel-item",
containerClass: "carousel-container",
rewind: !0,
rewindWithAnimation: !0,
...g,
children: t == null ? void 0 : t.map((e, m) => /* @__PURE__ */ l(
"div",
{
className: "section__card",
onClick: () => f(e),
children: [
$(e == null ? void 0 : e.imageComponent) ? e == null ? void 0 : e.imageComponent : /* @__PURE__ */ r(
"img",
{
src: e == null ? void 0 : e.imageUrl,
alt: `Slide ${m + 1}`,
loading: "lazy",
className: "section__image"
}
),
/* @__PURE__ */ l("div", { className: "card__content", children: [
/* @__PURE__ */ l("div", { className: "card__text", children: [
(e == null ? void 0 : e.title) && /* @__PURE__ */ r("div", { className: "card__title", children: e == null ? void 0 : e.title }),
(e == null ? void 0 : e.title) && /* @__PURE__ */ r("div", { className: "card__description", children: e == null ? void 0 : e.description })
] }),
(e == null ? void 0 : e.buttonText) && /* @__PURE__ */ r(
S,
{
text: e == null ? void 0 : e.buttonText,
className: "card__action",
size: "medium",
onClick: (c) => {
c == null || c.stopPropagation(), _(e);
}
}
)
] })
]
},
`banner-section-carousel-item__${m + 1}`
))
}
)
}
) }, `banner-section-carousel__${d}`);
}
);
export {
F as default
};