@antscorp/antsomi-ui 1.3.5-beta.2 → 1.3.5-beta.200

package/es/components/organism/Notification/styled.js

@@ -0,0 +1,150 @@
+var _a, _b, _c, _d, _e, _f, _g, _h;
+import styled from 'styled-components';
+import { Button } from '../../atoms';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { Badge } from 'antd';
+export const DivShowNotiStyled = styled.div `
+  background-color: #fff;
+  width: 348px;
+  max-height: 695px;
+  font-size: 12px;
+
+  box-sizing: border-box;
+  div,
+  p {
+    box-sizing: border-box;
+    margin: 0;
+  }
+
+  .div-loading {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .div-show-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 16px;
+    .title-noti {
+      color: #333333;
+      font-size: 16px;
+    }
+  }
+
+  .div-loading ~ .div-show-content {
+    opacity: 0.2;
+  }
+  .div-show-content {
+    position: relative;
+    max-height: 545px;
+    overflow-y: auto;
+
+    .div-left-icon-dot {
+      position: absolute;
+      top: 20px;
+      left: 18px;
+      width: 8px;
+      height: 8px;
+      background-color: #2e60a7;
+      border-radius: 999px;
+    }
+    .noti-card:last-child {
+      border: none;
+    }
+    .noti-card:hover,
+    .noti-card:has(button.antsomi-dropdown-open) {
+      background-color: ${(_a = THEME.token) === null || _a === void 0 ? void 0 : _a.blue0};
+    }
+
+    .noti-card {
+      position: relative;
+      padding: 15px 10px 15px 45px;
+      border-bottom: 1px solid ${(_b = THEME.token) === null || _b === void 0 ? void 0 : _b.blue0};
+
+      .div-title {
+        display: flex;
+        align-items: center;
+        width: 290px;
+        .div-title-text {
+          flex: 1;
+          color: #333333;
+          font-weight: bold;
+        }
+
+        margin-bottom: 7px;
+      }
+
+      .item-link {
+        margin-bottom: 12px;
+        width: 270px;
+      }
+
+      .item-desc {
+        margin-bottom: 10px;
+        color: #333333;
+        width: 250px;
+        padding: 0 10px 4px;
+
+        border-left: 1px solid #889199;
+      }
+
+      .item-desc + p {
+        font-size: 11px;
+      }
+    }
+  }
+
+  .text-link {
+    color: #1f5fac;
+    cursor: pointer;
+  }
+  .text-grey {
+    color: #999999;
+  }
+  .text-block-center {
+    height: 40px;
+    padding: 12px 0;
+    text-align: center;
+  }
+  .text-ellipsis {
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+`;
+export const ActionButton = styled(Button) `
+  /* border: none !important; */
+  background-color: transparent !important;
+  color: #666666 !important;
+  box-shadow: none !important;
+  border-radius: 10px !important;
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    color: ${(_c = THEME.token) === null || _c === void 0 ? void 0 : _c.blue7} !important;
+    background-color: ${(_d = THEME.token) === null || _d === void 0 ? void 0 : _d.blue1_1} !important;
+    border: 1px solid ${(_e = THEME.token) === null || _e === void 0 ? void 0 : _e.blue7} !important;
+  }
+`;
+export const BadgeStyled = styled(Badge) `
+  button {
+    background-color: transparent !important;
+    color: #666666 !important;
+    box-shadow: none !important;
+  }
+
+  &.antsomi-dropdown-open,
+  &.antsomi-popover-open {
+    button {
+      color: ${(_f = THEME.token) === null || _f === void 0 ? void 0 : _f.blue7} !important;
+      background-color: ${(_g = THEME.token) === null || _g === void 0 ? void 0 : _g.blue1_1} !important;
+      border: 1px solid ${(_h = THEME.token) === null || _h === void 0 ? void 0 : _h.blue7} !important;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/Banner/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { BannerProps } from '../../types';
+export declare const Banner: React.FC<BannerProps>;

package/es/components/organism/PreviewTemplateModal/components/Banner/index.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useEffect, useMemo, useState } from 'react';
+import classNames from 'classnames';
+// Styled
+import { BannerWrapper } from './styled';
+// Components
+import { MobileFrameV2 } from '@antscorp/antsomi-ui/es/components/atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+export const Banner = memo(props => {
+    const { deviceType, showSkeleton = false, children, height } = props, restOfProps = __rest(props, ["deviceType", "showSkeleton", "children", "height"]);
+    const isMobile = useMemo(() => deviceType === DEVICE_TYPE.MOBILE.value, [deviceType]);
+    // States
+    const [shouldAnimate, setShouldAnimate] = useState(false);
+    // Side effects
+    useEffect(() => {
+        setShouldAnimate(true);
+        const timerId = setTimeout(() => {
+            setShouldAnimate(false);
+        }, 1000);
+        return () => clearTimeout(timerId);
+    }, [children]);
+    return (React.createElement(BannerWrapper, Object.assign({ "$height": height }, restOfProps),
+        React.createElement("div", { className: `${isMobile ? 'mobile-wrapper animate__animated animate__zoomIn' : 'desktop-wrapper'}` },
+            React.createElement("div", { className: classNames({
+                    'content-wrapper': true,
+                    'animate__animated animate__fadeIn': shouldAnimate,
+                }) }, isMobile ? React.createElement(MobileFrameV2, null, children || null) : children || null),
+            showSkeleton && (React.createElement(React.Fragment, null,
+                React.createElement("div", { className: "skeleton" }),
+                React.createElement("div", { className: "backdrop" }))))));
+});

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.d.ts

@@ -0,0 +1,3 @@
+export declare const BannerWrapper: import("styled-components").StyledComponent<"div", any, {
+    $height?: number | undefined;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/Banner/styled.js

@@ -0,0 +1,101 @@
+import styled, { css } from 'styled-components';
+// Images
+import skeletonBackground from '../../../../../assets/images/background/skeleton-background.png';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+const THUMBNAIL_CARD_RADIUS = 5;
+export const BannerWrapper = styled.div `
+  width: 100%;
+  overflow-y: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: #0000001a;
+  border-radius: ${globalToken.borderRadius}px;
+
+  ${props => props.$height
+    ? css `
+          height: ${props.$height}px;
+
+          .mobile-wrapper {
+            width: 359px;
+            height: ${props.$height}px;
+          }
+        `
+    : css `
+          @media screen and (max-height: 1000px) {
+            height: 760px;
+            max-height: 760px;
+
+            .mobile-wrapper {
+              width: 359px;
+              height: 722.41px;
+            }
+          }
+
+          @media screen and (min-height: 1001px) {
+            height: 830px;
+            max-height: 830px;
+
+            .mobile-wrapper {
+              width: 380px;
+              height: 800px;
+            }
+          }
+        `}
+
+  .mobile-wrapper {
+    position: relative;
+    border-radius: 80px;
+    animation-duration: 0.2s !important;
+
+    .content-wrapper {
+      width: fit-content;
+      height: fit-content;
+    }
+
+    .skeleton,
+    .backdrop {
+      left: 5px;
+    }
+  }
+
+  .desktop-wrapper {
+    position: relative;
+    height: 100%;
+    width: 100%;
+    border-radius: ${THUMBNAIL_CARD_RADIUS}px;
+    transition: width 0.2s ease, height 0.2s ease;
+    .content-wrapper {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .content-wrapper {
+    position: absolute;
+    z-index: 12;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .skeleton {
+    width: 100%;
+    height: 100%;
+    background: center / cover no-repeat url(${skeletonBackground});
+    border-radius: inherit;
+  }
+
+  .backdrop {
+    border-radius: inherit;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    opacity: 0.5;
+    z-index: 10;
+    top: 0;
+    left: 0;
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/Information/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { InformationProps } from '../../types';
+export declare const Information: React.FC<InformationProps>;

package/es/components/organism/PreviewTemplateModal/components/Information/index.js

@@ -0,0 +1,30 @@
+// Libraries
+import React, { memo } from 'react';
+import Icon from '@antscorp/icons';
+// Styled
+import { CheckboxButton, InformationWrapper } from './styled';
+// Components
+import { Button, Typography, Flex } from '../../../../atoms';
+// Constants
+import { DEVICE_TYPE } from '../../constants';
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+export const Information = memo(props => {
+    var _a;
+    const { deviceType, itemName = 'Template name', buttonText = 'Use template', description, categoryListing, showDeviceRadios = true, onButtonClick, onDeviceTypeChange, } = props;
+    return (React.createElement(InformationWrapper, { gap: 20, vertical: true },
+        React.createElement("div", { style: { flexShrink: 0 }, className: "title" }, itemName),
+        React.createElement(Flex, { gap: 15, vertical: true, className: "content-information" },
+            description && React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } }, description), categoryListing === null || categoryListing === void 0 ? void 0 :
+            categoryListing.map(({ key, label, children }) => {
+                var _a;
+                return (React.createElement("div", { key: key },
+                    React.createElement("div", { style: { color: (_a = THEME.token) === null || _a === void 0 ? void 0 : _a.bw8 } },
+                        label,
+                        ":"),
+                    React.createElement("div", { style: { fontWeight: 'bold' } }, children === null || children === void 0 ? void 0 : children.map(({ label }) => label).join(', '))));
+            })),
+        React.createElement(Flex, { gap: 20, style: { flexShrink: 0 }, vertical: true },
+            showDeviceRadios && (React.createElement(Flex, { align: "center", gap: 1 }, Object.values(DEVICE_TYPE).map(({ value, label, icon }) => (React.createElement(CheckboxButton, { key: value, icon: React.createElement(Icon, { type: icon }), block: true, "$active": deviceType === value, onClick: () => onDeviceTypeChange(value), type: "text" }, label))))),
+            React.createElement(Button, { type: "primary", style: { width: '100%', flexShrink: 0 }, onClick: onButtonClick },
+                React.createElement(Typography.Text, { ellipsis: { tooltip: buttonText }, style: { maxWidth: '100%', color: 'inherit' } }, buttonText)))));
+});

package/es/components/organism/PreviewTemplateModal/components/Information/styled.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const InformationWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const CheckboxButton: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd").ButtonProps & import("react").RefAttributes<HTMLElement>> & {
+    Group: import("react").FC<import("antd/es/button").ButtonGroupProps>;
+}, any, {
+    $active?: boolean | undefined;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/Information/styled.js

@@ -0,0 +1,56 @@
+// Libraries
+import styled, { css } from 'styled-components';
+// Components
+import { Button, Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+export const InformationWrapper = styled(Flex) `
+  width: 300px;
+  flex-shrink: 0;
+  font-size: 12px;
+  height: 100%;
+  max-height: 100%;
+
+  .title {
+    font-size: 16px;
+    font-weight: 700;
+    max-width: 100%;
+    color: inherit;
+    padding-right: 25px;
+    word-break: break-all;
+  }
+
+  .antsomi-radio-group {
+    width: 100%;
+    display: flex;
+
+    .antsomi-radio-button-wrapper {
+      flex: 1 1 0%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 30px;
+
+      i {
+        height: fit-content;
+        font-size: 24px;
+      }
+    }
+  }
+
+  .content-information {
+    flex: 1 1 0%;
+    height: fit-content;
+    overflow-y: auto;
+    max-height: 682px;
+  }
+`;
+export const CheckboxButton = styled(Button) `
+  color: ${globalToken.colorText} !important;
+
+  ${p => p.$active &&
+    css `
+      color: ${globalToken.colorPrimary} !important;
+      background-color: ${globalToken.blue1_1} !important;
+    `}
+`;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { SimilarTemplateProps } from '../../types';
+export declare const SimilarTemplate: React.FC<SimilarTemplateProps>;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/index.js

@@ -0,0 +1,32 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo } from 'react';
+import { isEmpty } from 'lodash';
+// Components
+import { ThumbnailCard } from '../../../../molecules';
+// Styled
+import { SimilarTemplateWrapper, TemplateListWrapper } from './styled';
+// Constants
+import { SIMILAR_CARD_HEIGHT_DEFAULT, SIMILAR_CARD_WIDTH_DEFAULT } from '../../constants';
+const MAX_QUANTITY_TEMPLATES = 4;
+export const SimilarTemplate = memo(props => {
+    var _a;
+    const { show = true, similarTemplates = [], similarCardProps } = props;
+    const _b = similarCardProps || {}, { width = SIMILAR_CARD_WIDTH_DEFAULT, height = SIMILAR_CARD_HEIGHT_DEFAULT } = _b, restOfSimilarCardProps = __rest(_b, ["width", "height"]);
+    return show && !isEmpty(similarTemplates) ? (React.createElement(SimilarTemplateWrapper, { gap: 15, vertical: true },
+        React.createElement("div", { className: "title" }, "Similar templates"),
+        React.createElement(TemplateListWrapper, { templateQuantity: MAX_QUANTITY_TEMPLATES }, (_a = similarTemplates.slice(0, MAX_QUANTITY_TEMPLATES)) === null || _a === void 0 ? void 0 : _a.map((item, idx) => {
+            const { id, name, thumbnail } = item || {};
+            return (React.createElement(ThumbnailCard, Object.assign({ key: id, id: id || idx, name: name, width: width, height: height, thumbnail: thumbnail, actionAvailable: false, className: "thumbnail-card" }, restOfSimilarCardProps)));
+        })))) : null;
+});

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const SimilarTemplateWrapper: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("antd/es/flex/interface").FlexProps<import("antd/es/_util/type").AnyObject> & import("react").RefAttributes<HTMLElement>>, any, {}, never>;
+export declare const TemplateListWrapper: import("styled-components").StyledComponent<"div", any, {
+    templateQuantity: number;
+}, never>;

package/es/components/organism/PreviewTemplateModal/components/SimilarTemplate/styled.js

@@ -0,0 +1,26 @@
+// Libraries
+import styled from 'styled-components';
+// Components
+import { Flex } from '../../../../atoms';
+// Providers
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+export const SimilarTemplateWrapper = styled(Flex) `
+  margin-top: 15px;
+
+  .title {
+    font-weight: 400;
+    font-size: 16px;
+  }
+`;
+export const TemplateListWrapper = styled.div `
+  display: flex;
+  gap: 30px;
+
+  .thumbnail-card {
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
+  }
+`;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import 'swiper/swiper-bundle.css';
+import { ThumbnailProps } from '../../types';
+export interface ThumbnailSliderProps extends ThumbnailProps {
+}
+export declare const ThumbnailSlider: React.FC<ThumbnailSliderProps>;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/index.js

@@ -0,0 +1,80 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+// Libraries
+import React, { memo, useMemo, useRef, useState } from 'react';
+import Icon from '@antscorp/icons';
+import { Swiper } from 'swiper/react';
+import 'swiper/swiper-bundle.css';
+import { Navigation, A11y, Thumbs } from 'swiper/modules';
+import { isEmpty } from 'lodash';
+// Styled
+import { SwiperSlideWrapper, ThumbnailSliderWrapper } from './styled';
+// Components
+import { Button, Flex } from '../../../../atoms';
+import { ThumbnailCard } from '../../../../molecules';
+// Constants
+import { THUMBNAIL_HEIGHT_DEFAULT, THUMBNAIL_WIDTH_DEFAULT } from '../../constants';
+import classNames from 'classnames';
+/** Max width of list thumbnail's wrapper, it is used to show swiper if the width is greater than 990 */
+const WRAPPER_WIDTH = 990;
+const GAP_X = 10;
+const ICON_SIZE = 24;
+export const ThumbnailSlider = memo(props => {
+    const { thumbnails, width = THUMBNAIL_WIDTH_DEFAULT, height = THUMBNAIL_HEIGHT_DEFAULT, onClickThumbnail } = props, restOfThumbnailProps = __rest(props, ["thumbnails", "width", "height", "onClickThumbnail"]);
+    //  States
+    const [isSlideBeginning, setSlideBeginning] = useState(true);
+    const [isSlideEnd, setSlideEnd] = useState(false);
+    // Refs
+    const navigationPrevRef = useRef(null);
+    const navigationNextRef = useRef(null);
+    // Variables
+    /** The width of per thumbnail wrapper including thumbnail card's size, icon's size and gap */
+    const thumbnailWrapperWidth = useMemo(() => width + GAP_X * 2 + ICON_SIZE, [width]);
+    // Memo
+    const isShowSwiper = useMemo(() => {
+        const calculate = ((thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length) || 0) * thumbnailWrapperWidth;
+        return calculate > WRAPPER_WIDTH;
+    }, [thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.length, thumbnailWrapperWidth]);
+    // Renders
+    const renderThumbnail = (args) => {
+        const { thumbnail, index } = args;
+        const { id, url } = thumbnail;
+        return (React.createElement(Flex, { gap: GAP_X },
+            !!index && (React.createElement(Flex, { align: "center" },
+                React.createElement(Icon, { type: "icon-ants-expand-more", style: { fontSize: ICON_SIZE, transform: 'rotate(270deg)' } }))),
+            React.createElement(ThumbnailCard, Object.assign({ key: id, id: id, width: width, height: height, thumbnail: url, style: { flexShrink: 0 }, className: "thumbnail-animation", actionAvailable: false, onClickWrapper: () => onClickThumbnail === null || onClickThumbnail === void 0 ? void 0 : onClickThumbnail(thumbnail) }, restOfThumbnailProps))));
+    };
+    return thumbnails && !isEmpty(thumbnails) ? (React.createElement(ThumbnailSliderWrapper, null, isShowSwiper ? (React.createElement(React.Fragment, null,
+        React.createElement(Swiper, { slidesPerView: Math.floor(WRAPPER_WIDTH / thumbnailWrapperWidth), spaceBetween: GAP_X, modules: [Navigation, A11y, Thumbs], navigation: {
+                prevEl: navigationPrevRef.current,
+                nextEl: navigationNextRef.current,
+            }, onBeforeInit: swiper => {
+                setTimeout(() => {
+                    // Override prevEl & nextEl now that refs are defined
+                    if (swiper.params.navigation && typeof swiper.params.navigation !== 'boolean') {
+                        swiper.params.navigation.prevEl = navigationPrevRef.current;
+                        swiper.params.navigation.nextEl = navigationNextRef.current;
+                        // Re-init navigation
+                        swiper.navigation.destroy();
+                        swiper.navigation.init();
+                        swiper.navigation.update();
+                    }
+                });
+            }, onSlideChange: ({ isBeginning, isEnd }) => {
+                setSlideBeginning(isBeginning);
+                setSlideEnd(isEnd);
+            } }, thumbnails.map((thumbnail, index) => (React.createElement(SwiperSlideWrapper, { key: `slide-${thumbnail.id}` }, renderThumbnail({ thumbnail, index }))))),
+        React.createElement(Button, { ref: navigationPrevRef, className: classNames({ 'custom-button-prev': true, hidden: isSlideBeginning }) },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })),
+        React.createElement(Button, { ref: navigationNextRef, className: classNames({ 'custom-button-next': true, hidden: isSlideEnd }) },
+            React.createElement(Icon, { type: "icon-ants-expand-more" })))) : (React.createElement(Flex, { gap: GAP_X, style: { width: 'fit-content' } }, thumbnails === null || thumbnails === void 0 ? void 0 : thumbnails.map((thumbnail, index) => (React.createElement(React.Fragment, { key: thumbnail.id }, renderThumbnail({ thumbnail, index })))))))) : null;
+});

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare const ThumbnailSliderWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SwiperSlideWrapper: import("styled-components").StyledComponent<import("react").FunctionComponent<import("swiper/react").SwiperSlideProps>, any, {}, never>;

package/es/components/organism/PreviewTemplateModal/components/ThumbnailSlider/styled.js

@@ -0,0 +1,82 @@
+var _a;
+import { THEME } from '@antscorp/antsomi-ui/es/constants';
+import { globalToken } from '@antscorp/antsomi-ui/es/providers';
+import styled from 'styled-components';
+import { SwiperSlide } from 'swiper/react';
+export const ThumbnailSliderWrapper = styled.div `
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+
+  .swiper {
+    max-width: 1030px;
+
+    .swiper-slide {
+      width: fit-content !important;
+    }
+  }
+
+  .thumbnail-animation {
+    box-shadow: none;
+    transition: box-shadow 0.1s ease-in-out;
+    border-radius: ${globalToken.borderRadius}px;
+
+    > div {
+      border-radius: ${globalToken.borderRadius}px;
+    }
+
+    &:hover {
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1), 0 0 32px rgba(0, 0, 0, 0.04);
+    }
+  }
+
+  .custom-button-prev,
+  .custom-button-next {
+    z-index: 10;
+    position: absolute;
+    width: 24px;
+    height: 24px;
+    background-color: #ffffff;
+    box-shadow: 0px 3px 3px 0px #002e591a;
+    border-radius: 999px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    /* Remove default style of Antd button */
+    border-color: white !important;
+
+    &.antsomi-btn-default:not(:disabled):hover {
+      border-color: white !important;
+      background-color: #ffffff !important;
+    }
+  }
+
+  .custom-button-prev {
+    left: 0px;
+    transform: rotate(90deg);
+  }
+
+  .custom-button-next {
+    right: 0px;
+    transform: rotate(-90deg);
+  }
+
+  .hidden {
+    display: none !important;
+  }
+
+  i {
+    font-size: 20px;
+    color: ${(_a = THEME === null || THEME === void 0 ? void 0 : THEME.token) === null || _a === void 0 ? void 0 : _a.bw8};
+  }
+`;
+export const SwiperSlideWrapper = styled(SwiperSlide) `
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: fit-content;
+`;

package/es/components/organism/PreviewTemplateModal/components/index.d.ts

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

package/es/components/organism/PreviewTemplateModal/components/index.js

@@ -0,0 +1,4 @@
+export { Information } from './Information';
+export { Banner } from './Banner';
+export { ThumbnailSlider } from './ThumbnailSlider';
+export { SimilarTemplate } from './SimilarTemplate';

package/es/components/organism/PreviewTemplateModal/constants/dataSample.d.ts

@@ -0,0 +1,2 @@
+import { TThumbnail } from '../types';
+export declare const THUMBNAIL_SAMPLES: TThumbnail[];