@dotss/tictoccroc 0.0.11 → 0.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.ts +1 -0
- package/dist/index.mjs +86 -70
- package/dist/shared/components/Carousel/Carousel.mjs +1 -1
- package/dist/shared/components/Swiper/Swiper.mjs +16 -16
- package/dist/teacher/home/components/BannerAccount/BannerAccount.d.ts +12 -0
- package/dist/teacher/home/components/BannerAccount/BannerAccount.fallback.d.ts +2 -0
- package/dist/teacher/home/components/BannerAccount/BannerAccount.fallback.mjs +12 -0
- package/dist/teacher/home/components/BannerAccount/BannerAccount.mjs +86 -0
- package/dist/teacher/home/components/BannerAccount/index.d.ts +4 -0
- package/dist/teacher/home/components/BannerAccount/index.mjs +7 -0
- package/dist/teacher/home/components/Carousel1Account/Carousel1Account.d.ts +13 -0
- package/dist/teacher/home/components/Carousel1Account/Carousel1Account.fallback.d.ts +2 -0
- package/dist/teacher/home/components/Carousel1Account/Carousel1Account.fallback.mjs +67 -0
- package/dist/teacher/home/components/Carousel1Account/Carousel1Account.mjs +59 -0
- package/dist/teacher/home/components/Carousel1Account/index.d.ts +4 -0
- package/dist/teacher/home/components/Carousel1Account/index.mjs +7 -0
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.d.ts +15 -0
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.fallback.d.ts +2 -0
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.fallback.mjs +94 -0
- package/dist/teacher/home/components/Carousel2Account/Carousel2Account.mjs +62 -0
- package/dist/teacher/home/components/Carousel2Account/index.d.ts +4 -0
- package/dist/teacher/home/components/Carousel2Account/index.mjs +7 -0
- package/dist/teacher/home/components/TextAccount/TextAccount.d.ts +13 -0
- package/dist/teacher/home/components/TextAccount/TextAccount.fallback.d.ts +2 -0
- package/dist/teacher/home/components/TextAccount/TextAccount.fallback.mjs +98 -0
- package/dist/teacher/home/components/TextAccount/TextAccount.mjs +96 -0
- package/dist/teacher/home/components/TextAccount/index.d.ts +4 -0
- package/dist/teacher/home/components/TextAccount/index.mjs +7 -0
- package/dist/teacher/home/components/index.d.ts +14 -0
- package/dist/teacher/home/components/index.mjs +18 -0
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
import { default as
|
|
2
|
-
import { default as
|
|
1
|
+
import { default as t } from "./shared/components/Scheduler/Scheduler.mjs";
|
|
2
|
+
import { default as r } from "./shared/components/Scheduler/ScheduleEvent/ScheduleEvent.mjs";
|
|
3
3
|
import { default as l } from "./shared/components/Scheduler/ScheduleBlock/ScheduleBlock.mjs";
|
|
4
|
-
import { getAvailableDateRange as
|
|
5
|
-
import { default as
|
|
6
|
-
import { default as
|
|
4
|
+
import { getAvailableDateRange as u } from "./shared/components/Scheduler/Scheduler.utils.mjs";
|
|
5
|
+
import { default as m } from "./shared/components/MediaDialog/MediaDialog.mjs";
|
|
6
|
+
import { default as x } from "./shared/components/MediaDialog/MediaBlock/MediaBlock.mjs";
|
|
7
7
|
import { default as c } from "./shared/components/MediaDialog/MediaDialogContent/MediaDialogContent.mjs";
|
|
8
8
|
import { default as g } from "./shared/components/MediaDialog/MediaDialogFooter/MediaDialogFooter.mjs";
|
|
9
|
-
import { default as
|
|
10
|
-
import { default as
|
|
11
|
-
import { default as
|
|
12
|
-
import { default as
|
|
13
|
-
import { default as
|
|
14
|
-
import { default as
|
|
15
|
-
import { default as
|
|
16
|
-
import { default as
|
|
17
|
-
import { default as
|
|
18
|
-
import { default as
|
|
9
|
+
import { default as C } from "./shared/components/MediaDialog/MediaDialogToolbar/MediaDialogToolbar.mjs";
|
|
10
|
+
import { default as y } from "./shared/components/Swiper/Swiper.mjs";
|
|
11
|
+
import { default as k } from "./shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
|
|
12
|
+
import { default as v } from "./shared/components/Carousel/Carousel.mjs";
|
|
13
|
+
import { default as h } from "./shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
|
|
14
|
+
import { default as T } from "./shared/components/TimePicker/TimePicker.mjs";
|
|
15
|
+
import { default as P } from "./shared/components/Roller/Roller.mjs";
|
|
16
|
+
import { default as w } from "./shared/components/Roller/RollerBlock/RollerBlock.mjs";
|
|
17
|
+
import { default as E } from "./shared/components/Image/Image.mjs";
|
|
18
|
+
import { default as L } from "./shared/components/Calendar/Calendar.mjs";
|
|
19
19
|
import { default as N } from "./shared/components/Masonry/Masonry.mjs";
|
|
20
20
|
import { default as j } from "./shared/components/Masonry/MasonryBlock/MasonryBlock.mjs";
|
|
21
21
|
import { default as V } from "./shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
|
|
@@ -25,24 +25,24 @@ import { default as W } from "./shared/utils/isServer/isServer.mjs";
|
|
|
25
25
|
import { default as Y } from "./shared/utils/getTimeRange/getTimeRange.mjs";
|
|
26
26
|
import { default as _ } from "./shared/utils/getDateRange/getDateRange.mjs";
|
|
27
27
|
import { default as ee } from "./shared/utils/isAndroid/isAndroid.mjs";
|
|
28
|
-
import { default as
|
|
29
|
-
import { default as
|
|
28
|
+
import { default as te } from "./shared/utils/isApp/isApp.mjs";
|
|
29
|
+
import { default as re } from "./shared/utils/isDesktop/isDesktop.mjs";
|
|
30
30
|
import { default as le } from "./shared/utils/birthDateToAge/birthDateToAge.mjs";
|
|
31
|
-
import { default as
|
|
32
|
-
import { default as
|
|
33
|
-
import { default as
|
|
31
|
+
import { default as ue } from "./shared/utils/objectToQueryString/objectToQueryString.mjs";
|
|
32
|
+
import { default as me } from "./shared/utils/getVimeoId/getVimeoId.mjs";
|
|
33
|
+
import { default as xe } from "./shared/utils/parseQueryString/parseQueryString.mjs";
|
|
34
34
|
import { default as ce } from "./shared/utils/share/share.mjs";
|
|
35
35
|
import { default as ge } from "./shared/utils/dayFlagToDay/dayFlagToDay.mjs";
|
|
36
|
-
import { default as
|
|
37
|
-
import { default as
|
|
38
|
-
import { default as
|
|
39
|
-
import { default as
|
|
40
|
-
import { default as
|
|
41
|
-
import { default as
|
|
42
|
-
import { default as
|
|
43
|
-
import { default as
|
|
44
|
-
import { default as
|
|
45
|
-
import { default as
|
|
36
|
+
import { default as Ce } from "./teacher/profile/components/ProfileSummary/ProfileSummary.mjs";
|
|
37
|
+
import { default as ye } from "./teacher/profile/components/StatBadgeCollection/StatBadgeCollection.mjs";
|
|
38
|
+
import { default as ke } from "./teacher/profile/components/StatBadgeCollection/StatBadge/StatBadge.mjs";
|
|
39
|
+
import { default as ve } from "./teacher/profile/components/ActivityGallery/ActivityGallery.mjs";
|
|
40
|
+
import { default as he } from "./teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
|
|
41
|
+
import { default as Te } from "./teacher/profile/components/CertificateSection/CertificateSection.mjs";
|
|
42
|
+
import { default as Pe } from "./teacher/profile/components/CertificateSection/CertificateItem/CertificateItem.mjs";
|
|
43
|
+
import { default as we } from "./teacher/profile/components/CareerSection/CareerSection.mjs";
|
|
44
|
+
import { default as Ee } from "./teacher/profile/components/CareerSection/CareerItem/CareerItem.mjs";
|
|
45
|
+
import { default as Le } from "./teacher/profile/components/EducationSection/EducationSection.mjs";
|
|
46
46
|
import { default as Ne } from "./teacher/profile/components/EducationSection/EducationItem/EducationItem.mjs";
|
|
47
47
|
import { default as je } from "./teacher/profile/components/PreferredActivityKeywordGroup/PreferredActivityKeywordGroup.mjs";
|
|
48
48
|
import { default as Ve } from "./teacher/profile/components/PreferredAgeGroup/PreferredAgeGroup.mjs";
|
|
@@ -51,68 +51,84 @@ import { default as Je } from "./teacher/profile/components/AbilityCollection/Ab
|
|
|
51
51
|
import { default as We } from "./teacher/profile/components/AbilityCollection/AbilityBadge/AbilityBadge.mjs";
|
|
52
52
|
import { getAbilityCollection as Ye } from "./teacher/profile/components/AbilityCollection/AbilityCollection.utils.mjs";
|
|
53
53
|
import { default as _e } from "./teacher/profile/components/AvailableScheduleSection/AvailableScheduleSection.mjs";
|
|
54
|
-
import { default as
|
|
55
|
-
import { default as
|
|
56
|
-
import { default as
|
|
57
|
-
import { getChildLabel as
|
|
58
|
-
import { default as
|
|
54
|
+
import { default as eo } from "./teacher/profile/components/ClassNotesSection/ClassNotesSection.mjs";
|
|
55
|
+
import { default as to } from "./teacher/profile/components/ClassNotesSection/ClassNote/ClassNote.mjs";
|
|
56
|
+
import { default as ro } from "./teacher/profile/components/ParentReviewSection/ParentReviewSection.mjs";
|
|
57
|
+
import { getChildLabel as lo } from "./teacher/profile/components/ParentReviewSection/ParentReviewSection.utils.mjs";
|
|
58
|
+
import { default as so } from "./teacher/profile/components/ParentReviewSection/ParentReviewCard/ParentReviewCard.mjs";
|
|
59
|
+
import { default as po } from "./teacher/home/components/TextAccount/TextAccount.mjs";
|
|
60
|
+
import { default as io } from "./teacher/home/components/TextAccount/TextAccount.fallback.mjs";
|
|
61
|
+
import { default as no } from "./teacher/home/components/Carousel1Account/Carousel1Account.mjs";
|
|
62
|
+
import { default as Ao } from "./teacher/home/components/Carousel1Account/Carousel1Account.fallback.mjs";
|
|
63
|
+
import { default as So } from "./teacher/home/components/Carousel2Account/Carousel2Account.mjs";
|
|
64
|
+
import { default as bo } from "./teacher/home/components/Carousel2Account/Carousel2Account.fallback.mjs";
|
|
65
|
+
import { default as Bo } from "./teacher/home/components/BannerAccount/BannerAccount.mjs";
|
|
66
|
+
import { default as Do } from "./teacher/home/components/BannerAccount/BannerAccount.fallback.mjs";
|
|
59
67
|
export {
|
|
60
68
|
We as AbilityBadge,
|
|
61
69
|
Je as AbilityCollection,
|
|
62
|
-
|
|
63
|
-
|
|
70
|
+
ve as ActivityGallery,
|
|
71
|
+
he as ActivityGalleryItem,
|
|
64
72
|
_e as AvailableScheduleSection,
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
73
|
+
Bo as BannerAccount,
|
|
74
|
+
Do as BannerAccountFallback,
|
|
75
|
+
L as Calendar,
|
|
76
|
+
Ee as CareerItem,
|
|
77
|
+
we as CareerSection,
|
|
78
|
+
v as Carousel,
|
|
79
|
+
no as Carousel1Account,
|
|
80
|
+
Ao as Carousel1AccountFallback,
|
|
81
|
+
So as Carousel2Account,
|
|
82
|
+
bo as Carousel2AccountFallback,
|
|
83
|
+
h as CarouselSlide,
|
|
84
|
+
Pe as CertificateItem,
|
|
85
|
+
Te as CertificateSection,
|
|
86
|
+
to as ClassNote,
|
|
87
|
+
eo as ClassNotesSection,
|
|
74
88
|
Ne as EducationItem,
|
|
75
|
-
|
|
76
|
-
|
|
89
|
+
Le as EducationSection,
|
|
90
|
+
E as Image,
|
|
77
91
|
V as LoadingAnnouncer,
|
|
78
92
|
N as Masonry,
|
|
79
93
|
j as MasonryBlock,
|
|
80
|
-
|
|
81
|
-
|
|
94
|
+
x as MediaBlock,
|
|
95
|
+
m as MediaDialog,
|
|
82
96
|
c as MediaDialogContent,
|
|
83
97
|
g as MediaDialogFooter,
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
98
|
+
C as MediaDialogToolbar,
|
|
99
|
+
so as ParentReviewCard,
|
|
100
|
+
ro as ParentReviewSection,
|
|
87
101
|
je as PreferredActivityKeywordGroup,
|
|
88
102
|
Ve as PreferredAgeGroup,
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
103
|
+
Ce as ProfileSummary,
|
|
104
|
+
P as Roller,
|
|
105
|
+
w as RollerBlock,
|
|
92
106
|
l as ScheduleBlock,
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
107
|
+
r as ScheduleEvent,
|
|
108
|
+
t as Scheduler,
|
|
109
|
+
ke as StatBadge,
|
|
110
|
+
ye as StatBadgeCollection,
|
|
111
|
+
y as Swiper,
|
|
112
|
+
k as SwiperBlock,
|
|
113
|
+
po as TextAccount,
|
|
114
|
+
io as TextAccountFallback,
|
|
115
|
+
T as TimePicker,
|
|
100
116
|
le as birthDateToAge,
|
|
101
117
|
ge as dayFlagToDay,
|
|
102
118
|
Ye as getAbilityCollection,
|
|
103
|
-
|
|
104
|
-
|
|
119
|
+
u as getAvailableDateRange,
|
|
120
|
+
lo as getChildLabel,
|
|
105
121
|
_ as getDateRange,
|
|
106
122
|
J as getImageUrl,
|
|
107
123
|
ze as getPreferredAgeKeywords,
|
|
108
124
|
Y as getTimeRange,
|
|
109
|
-
|
|
125
|
+
me as getVimeoId,
|
|
110
126
|
ee as isAndroid,
|
|
111
|
-
|
|
112
|
-
|
|
127
|
+
te as isApp,
|
|
128
|
+
re as isDesktop,
|
|
113
129
|
W as isServer,
|
|
114
|
-
|
|
115
|
-
|
|
130
|
+
ue as objectToQueryString,
|
|
131
|
+
xe as parseQueryString,
|
|
116
132
|
ce as share,
|
|
117
133
|
z as useIsomorphicLayoutEffect
|
|
118
134
|
};
|
|
@@ -118,7 +118,7 @@ function Ee({
|
|
|
118
118
|
k.current && cancelAnimationFrame(k.current);
|
|
119
119
|
}, []), C(() => {
|
|
120
120
|
const e = u.current, t = (n) => {
|
|
121
|
-
L.current || n.stopPropagation();
|
|
121
|
+
L.current || (n.stopPropagation(), n.preventDefault());
|
|
122
122
|
};
|
|
123
123
|
return e == null || e.addEventListener("click", t), () => {
|
|
124
124
|
e == null || e.removeEventListener("click", t);
|
|
@@ -4,9 +4,9 @@ import { Flexbox as K } from "@dotss/ui";
|
|
|
4
4
|
import I from "../MediaDialog/MediaBlock/MediaBlock.mjs";
|
|
5
5
|
import { createSwipeEvent as b } from "./Swiper.utils.mjs";
|
|
6
6
|
import U from "./SwiperBlock/SwiperBlock.mjs";
|
|
7
|
-
function
|
|
7
|
+
function vr({
|
|
8
8
|
children: j,
|
|
9
|
-
initialPage:
|
|
9
|
+
initialPage: E = 0,
|
|
10
10
|
onSwipe: u,
|
|
11
11
|
onSwiping: T,
|
|
12
12
|
loop: y = !1,
|
|
@@ -15,7 +15,7 @@ function hr({
|
|
|
15
15
|
inlineCSS: S,
|
|
16
16
|
...w
|
|
17
17
|
}) {
|
|
18
|
-
const [P, R] = _(
|
|
18
|
+
const [P, R] = _(E), [s, rr] = _(0), t = f(null), X = f(0), W = f(0), q = f(0), Y = f(0), o = f(!1), d = f(!0), N = f(""), n = f(E), H = f(!1), l = f(null), p = x.count(j), m = x.toArray(j).filter(G).filter((r) => r.type === U || r.type === I), D = p > 1 && !O, tr = x.toArray(m == null ? void 0 : m[0]).filter(G).filter((r) => r.type === U || r.type === I), er = x.toArray(m == null ? void 0 : m[(m == null ? void 0 : m.length) - 1]).filter(G).filter((r) => r.type === U || r.type === I), J = (r, e, i) => {
|
|
19
19
|
!t.current || !D || (N.current = t.current.style.transform, W.current = r, X.current = r + t.current.offsetWidth * (i + 1), q.current = e);
|
|
20
20
|
}, C = (r, e, i) => {
|
|
21
21
|
if (!t.current || !D || !o.current || !d.current)
|
|
@@ -38,10 +38,10 @@ function hr({
|
|
|
38
38
|
n.current = s - 1, u == null || u(
|
|
39
39
|
b({ realPage: n.current, totalPages: s, lastPage: 0, isLoop: !0 })
|
|
40
40
|
), t.current.style.transform = "translate3d(0, 0, 0)", l.current = (M) => {
|
|
41
|
-
var
|
|
41
|
+
var v, h, L;
|
|
42
42
|
if (M.propertyName === "transform") {
|
|
43
43
|
if (!t.current) return;
|
|
44
|
-
t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${s}), 0, 0)`, R(s - 1), o.current = !1, d.current = !0, (L = (
|
|
44
|
+
t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${s}), 0, 0)`, R(s - 1), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[s]) == null || L.focus();
|
|
45
45
|
}
|
|
46
46
|
}, t.current.addEventListener("transitionend", l.current);
|
|
47
47
|
return;
|
|
@@ -54,10 +54,10 @@ function hr({
|
|
|
54
54
|
isLoop: !0
|
|
55
55
|
})
|
|
56
56
|
), t.current.style.transform = `translate3d(calc(-100% * ${a + 2}), 0, 0)`, l.current = (M) => {
|
|
57
|
-
var
|
|
57
|
+
var v, h, L;
|
|
58
58
|
if (M.propertyName === "transform") {
|
|
59
59
|
if (!t.current) return;
|
|
60
|
-
t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", R(0), o.current = !1, d.current = !0, (L = (
|
|
60
|
+
t.current.style.transition = "none", t.current.style.transform = "translate3d(-100%, 0, 0)", R(0), o.current = !1, d.current = !0, (L = (h = (v = t.current) == null ? void 0 : v.children) == null ? void 0 : h[1]) == null || L.focus();
|
|
61
61
|
}
|
|
62
62
|
}, t.current.addEventListener("transitionend", l.current);
|
|
63
63
|
return;
|
|
@@ -84,13 +84,13 @@ function hr({
|
|
|
84
84
|
isLoop: !1
|
|
85
85
|
})
|
|
86
86
|
), t.current.style.transform = N.current), l.current = (M) => {
|
|
87
|
-
var
|
|
87
|
+
var v;
|
|
88
88
|
if (M.propertyName === "transform") {
|
|
89
89
|
o.current = !1, d.current = !0;
|
|
90
|
-
const
|
|
90
|
+
const h = Array.from(((v = t.current) == null ? void 0 : v.children) ?? []).find(
|
|
91
91
|
(L) => L.getAttribute("aria-current") === "page"
|
|
92
92
|
);
|
|
93
|
-
|
|
93
|
+
h && h.focus();
|
|
94
94
|
}
|
|
95
95
|
}, t.current.addEventListener("transitionend", l.current);
|
|
96
96
|
}, nr = (r) => {
|
|
@@ -163,7 +163,7 @@ function hr({
|
|
|
163
163
|
};
|
|
164
164
|
}, [D, T, y, s]), k(() => {
|
|
165
165
|
const r = t.current, e = (i) => {
|
|
166
|
-
d.current || i.stopPropagation();
|
|
166
|
+
d.current || (i.stopPropagation(), i.preventDefault());
|
|
167
167
|
};
|
|
168
168
|
return r == null || r.addEventListener("click", e), () => {
|
|
169
169
|
r == null || r.removeEventListener("click", e);
|
|
@@ -174,10 +174,10 @@ function hr({
|
|
|
174
174
|
l.current && r && (r.removeEventListener("transitionend", l.current), l.current = null);
|
|
175
175
|
};
|
|
176
176
|
}, []), k(() => {
|
|
177
|
-
rr(
|
|
178
|
-
}, [
|
|
179
|
-
t.current && !H.current && (H.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${
|
|
180
|
-
}, [
|
|
177
|
+
rr(p);
|
|
178
|
+
}, [p]), k(() => {
|
|
179
|
+
t.current && !H.current && (H.current = !0, t.current.style.transition = "none", t.current.style.transform = `translate3d(calc(-100% * ${p < E + 1 ? p : E + 1}), 0, 0)`);
|
|
180
|
+
}, [E, p]), /* @__PURE__ */ Z(
|
|
181
181
|
K,
|
|
182
182
|
{
|
|
183
183
|
flexGrow: 1,
|
|
@@ -241,5 +241,5 @@ function hr({
|
|
|
241
241
|
);
|
|
242
242
|
}
|
|
243
243
|
export {
|
|
244
|
-
|
|
244
|
+
vr as default
|
|
245
245
|
};
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { SyntheticEvent } from 'react';
|
|
2
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
|
+
import { BannerProps } from '..';
|
|
4
|
+
export interface BannerAccountProps extends Omit<FlexboxProps, 'title'> {
|
|
5
|
+
id: string;
|
|
6
|
+
banners: Array<BannerProps & {
|
|
7
|
+
image?: string;
|
|
8
|
+
}>;
|
|
9
|
+
onClickBanner?: (url: string, e: SyntheticEvent) => void;
|
|
10
|
+
}
|
|
11
|
+
declare function BannerAccount({ id, banners, onClickBanner }: BannerAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
12
|
+
export default BannerAccount;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsxs as r, Fragment as e, jsx as n } from "react/jsx-runtime";
|
|
2
|
+
import { Flexbox as i, Skeleton as o } from "@dotss/ui";
|
|
3
|
+
import t from "../../../../shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
|
|
4
|
+
function c() {
|
|
5
|
+
return /* @__PURE__ */ r(e, { children: [
|
|
6
|
+
/* @__PURE__ */ n(t, {}),
|
|
7
|
+
/* @__PURE__ */ n(i, { inlineCSS: { width: "100%" }, children: /* @__PURE__ */ n(o, { height: 100, borderRadius: 12, inlineCSS: { width: "100%" } }) })
|
|
8
|
+
] });
|
|
9
|
+
}
|
|
10
|
+
export {
|
|
11
|
+
c as default
|
|
12
|
+
};
|
|
@@ -0,0 +1,86 @@
|
|
|
1
|
+
import { jsxs as c, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import t from "@dotss/ui/Flexbox";
|
|
3
|
+
import s from "@dotss/ui/Typography";
|
|
4
|
+
import { useTheme as f } from "@emotion/react";
|
|
5
|
+
import u from "../../../../shared/components/Image/Image.mjs";
|
|
6
|
+
import b from "../../../../shared/components/Swiper/Swiper.mjs";
|
|
7
|
+
import g from "../../../../shared/components/Swiper/SwiperBlock/SwiperBlock.mjs";
|
|
8
|
+
function j({ id: o, banners: a, onClickBanner: n }) {
|
|
9
|
+
const { palette: l } = f(), d = (i) => (r) => {
|
|
10
|
+
n && typeof n == "function" && (r.stopPropagation(), r.preventDefault(), n(i, r));
|
|
11
|
+
}, p = ({ page: i, totalPages: r }) => r <= 1 ? null : /* @__PURE__ */ e(
|
|
12
|
+
t,
|
|
13
|
+
{
|
|
14
|
+
alignItems: "center",
|
|
15
|
+
justifyContent: "center",
|
|
16
|
+
pt: 1,
|
|
17
|
+
pb: 1,
|
|
18
|
+
pl: 2,
|
|
19
|
+
pr: 2,
|
|
20
|
+
inlineCSS: {
|
|
21
|
+
position: "absolute",
|
|
22
|
+
right: 8,
|
|
23
|
+
bottom: 8,
|
|
24
|
+
minWidth: 36,
|
|
25
|
+
minHeight: 20,
|
|
26
|
+
borderRadius: 24,
|
|
27
|
+
backgroundColor: l.etc.dimmed02
|
|
28
|
+
},
|
|
29
|
+
children: /* @__PURE__ */ c(
|
|
30
|
+
s,
|
|
31
|
+
{
|
|
32
|
+
tag: "p",
|
|
33
|
+
variant: "c5R",
|
|
34
|
+
color: "grey.white",
|
|
35
|
+
inlineCSS: {
|
|
36
|
+
"& > span": {
|
|
37
|
+
fontWeight: 700
|
|
38
|
+
}
|
|
39
|
+
},
|
|
40
|
+
"aria-label": `${r} 중 ${i + 1}`,
|
|
41
|
+
children: [
|
|
42
|
+
/* @__PURE__ */ e("span", { children: i + 1 }),
|
|
43
|
+
"/",
|
|
44
|
+
r
|
|
45
|
+
]
|
|
46
|
+
}
|
|
47
|
+
)
|
|
48
|
+
}
|
|
49
|
+
);
|
|
50
|
+
return /* @__PURE__ */ c(t, { inlineCSS: { width: "100%" }, children: [
|
|
51
|
+
/* @__PURE__ */ e(t, { id: `tictoccroc-banner-${o}`, visuallyHidden: !0, children: "배너" }),
|
|
52
|
+
/* @__PURE__ */ e(
|
|
53
|
+
b,
|
|
54
|
+
{
|
|
55
|
+
renderPagination: p,
|
|
56
|
+
loop: !0,
|
|
57
|
+
inlineCSS: { borderRadius: 12, overflow: "hidden" },
|
|
58
|
+
"aria-describedby": `tictoccroc-banner-${o}`,
|
|
59
|
+
children: a.map(({ id: i, url: r, image: h }, m) => /* @__PURE__ */ e(g, { children: /* @__PURE__ */ e(
|
|
60
|
+
t,
|
|
61
|
+
{
|
|
62
|
+
tag: "a",
|
|
63
|
+
href: r,
|
|
64
|
+
draggable: !1,
|
|
65
|
+
onClick: d(r),
|
|
66
|
+
inlineCSS: { width: "100%" },
|
|
67
|
+
children: /* @__PURE__ */ e(
|
|
68
|
+
u,
|
|
69
|
+
{
|
|
70
|
+
src: h || "",
|
|
71
|
+
alt: `배너 ${m + 1}`,
|
|
72
|
+
height: 100,
|
|
73
|
+
draggable: !1,
|
|
74
|
+
wrapperProps: { inlineCSS: { width: "100%" } },
|
|
75
|
+
style: { width: "100%", objectFit: "cover" }
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
}
|
|
79
|
+
) }, `tictoccroc-banner-account-${i}`))
|
|
80
|
+
}
|
|
81
|
+
)
|
|
82
|
+
] });
|
|
83
|
+
}
|
|
84
|
+
export {
|
|
85
|
+
j as default
|
|
86
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
|
+
import { BannerProps } from '..';
|
|
4
|
+
export interface Carousel1AccountProps extends Omit<FlexboxProps, 'title'> {
|
|
5
|
+
id: string;
|
|
6
|
+
title: ReactNode;
|
|
7
|
+
banners: Array<BannerProps & {
|
|
8
|
+
image?: string;
|
|
9
|
+
}>;
|
|
10
|
+
onClickBanner?: (url: string, e: SyntheticEvent) => void;
|
|
11
|
+
}
|
|
12
|
+
declare function Carousel1Account({ id, title, banners, onClickBanner, ...props }: Carousel1AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default Carousel1Account;
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import { jsxs as n, Fragment as l, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import d from "@dotss/ui/core/useTheme";
|
|
3
|
+
import r from "@dotss/ui/Flexbox";
|
|
4
|
+
import e from "@dotss/ui/Skeleton";
|
|
5
|
+
import h from "../../../../shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
|
|
6
|
+
function s() {
|
|
7
|
+
const { spacing: t } = d();
|
|
8
|
+
return /* @__PURE__ */ n(l, { children: [
|
|
9
|
+
/* @__PURE__ */ i(h, {}),
|
|
10
|
+
/* @__PURE__ */ n(
|
|
11
|
+
r,
|
|
12
|
+
{
|
|
13
|
+
tag: "section",
|
|
14
|
+
flexDirection: "column",
|
|
15
|
+
inlineCSS: { width: "100%", overflow: "hidden" },
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ i(
|
|
18
|
+
e,
|
|
19
|
+
{
|
|
20
|
+
height: 30,
|
|
21
|
+
inlineCSS: {
|
|
22
|
+
width: "50%",
|
|
23
|
+
marginBottom: t.content(2),
|
|
24
|
+
marginLeft: t.content(4)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
),
|
|
28
|
+
/* @__PURE__ */ n(r, { flexDirection: "row", gap: 5, ml: 4, children: [
|
|
29
|
+
/* @__PURE__ */ n(r, { flexDirection: "column", gap: 5, children: [
|
|
30
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
31
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
32
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
33
|
+
] }),
|
|
34
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
35
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
36
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
37
|
+
] })
|
|
38
|
+
] }),
|
|
39
|
+
/* @__PURE__ */ n(r, { flexDirection: "column", gap: 5, children: [
|
|
40
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
41
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
42
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
43
|
+
] }),
|
|
44
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
45
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
46
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
47
|
+
] })
|
|
48
|
+
] }),
|
|
49
|
+
/* @__PURE__ */ n(r, { flexDirection: "column", gap: 5, children: [
|
|
50
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
51
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
52
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
53
|
+
] }),
|
|
54
|
+
/* @__PURE__ */ n(r, { gap: 4, alignItems: "center", inlineCSS: { width: 264 }, children: [
|
|
55
|
+
/* @__PURE__ */ i(e, { width: 140, height: 98, borderRadius: 12 }),
|
|
56
|
+
/* @__PURE__ */ i(e, { height: 48, borderRadius: 12, inlineCSS: { flex: 1 } })
|
|
57
|
+
] })
|
|
58
|
+
] })
|
|
59
|
+
] })
|
|
60
|
+
]
|
|
61
|
+
}
|
|
62
|
+
)
|
|
63
|
+
] });
|
|
64
|
+
}
|
|
65
|
+
export {
|
|
66
|
+
s as default
|
|
67
|
+
};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as r, Fragment as h, jsxs as n } from "react/jsx-runtime";
|
|
2
|
+
import f from "@dotss/ui/core/useTheme";
|
|
3
|
+
import a from "@dotss/ui/Flexbox";
|
|
4
|
+
import c from "@dotss/ui/Typography";
|
|
5
|
+
import C from "../../../../shared/components/Carousel/Carousel.mjs";
|
|
6
|
+
import S from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
|
|
7
|
+
import x from "../../../../shared/components/Image/Image.mjs";
|
|
8
|
+
function D({ id: l, title: p, banners: d, onClickBanner: e, ...m }) {
|
|
9
|
+
const { spacing: i } = f(), s = (o) => (t) => {
|
|
10
|
+
e && typeof e == "function" && (t.stopPropagation(), t.preventDefault(), e(o, t));
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ r(h, { children: /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", ...m, children: [
|
|
13
|
+
/* @__PURE__ */ r(
|
|
14
|
+
c,
|
|
15
|
+
{
|
|
16
|
+
id: `banner-account-carousel1-${l}`,
|
|
17
|
+
variant: "h2B",
|
|
18
|
+
inlineCSS: {
|
|
19
|
+
paddingLeft: i.content(4),
|
|
20
|
+
paddingRight: i.content(4),
|
|
21
|
+
marginBottom: i.content(2)
|
|
22
|
+
},
|
|
23
|
+
children: p
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ r(C, { rowCount: 2, step: 1, spacing: 5, children: d.map(({ id: o, title: t, url: u, image: g }) => /* @__PURE__ */ r(S, { children: /* @__PURE__ */ n(
|
|
27
|
+
a,
|
|
28
|
+
{
|
|
29
|
+
alignItems: "center",
|
|
30
|
+
gap: 4,
|
|
31
|
+
onClick: s(u),
|
|
32
|
+
inlineCSS: { width: 264 },
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ r(
|
|
35
|
+
x,
|
|
36
|
+
{
|
|
37
|
+
src: g || "",
|
|
38
|
+
width: 140,
|
|
39
|
+
height: 98,
|
|
40
|
+
alt: `${t} 이미지`,
|
|
41
|
+
"aria-hidden": !0,
|
|
42
|
+
draggable: !1,
|
|
43
|
+
wrapperProps: {
|
|
44
|
+
inlineCSS: {
|
|
45
|
+
borderRadius: 12
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
style: { objectFit: "cover" }
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ r(c, { tag: "p", variant: "b2M", lineClamp: 2, children: t })
|
|
52
|
+
]
|
|
53
|
+
}
|
|
54
|
+
) }, `tictoccroc-carousel1-account-${o}`)) })
|
|
55
|
+
] }) });
|
|
56
|
+
}
|
|
57
|
+
export {
|
|
58
|
+
D as default
|
|
59
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { default as Carousel1Account, Carousel1AccountProps } from './Carousel1Account';
|
|
2
|
+
import { default as Carousel1AccountFallback } from './Carousel1Account.fallback';
|
|
3
|
+
export { Carousel1Account, Carousel1AccountFallback, type Carousel1AccountProps };
|
|
4
|
+
export default Carousel1Account;
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
|
+
import { BannerProps } from '..';
|
|
4
|
+
export interface Carousel2AccountProps extends Omit<FlexboxProps, 'title'> {
|
|
5
|
+
id: string;
|
|
6
|
+
title: ReactNode;
|
|
7
|
+
banners: Array<BannerProps & {
|
|
8
|
+
image?: string;
|
|
9
|
+
subtitle?: ReactNode;
|
|
10
|
+
}>;
|
|
11
|
+
onClickBanner?: (url: string, e: SyntheticEvent) => void;
|
|
12
|
+
bannerWidth?: number;
|
|
13
|
+
}
|
|
14
|
+
declare function Carousel2Account({ id, title, banners, onClickBanner, ...props }: Carousel2AccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
15
|
+
export default Carousel2Account;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
import { jsxs as t, Fragment as r, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import d from "@dotss/ui/core/useTheme";
|
|
3
|
+
import o from "@dotss/ui/Flexbox";
|
|
4
|
+
import n from "@dotss/ui/Skeleton";
|
|
5
|
+
import h from "../../../../shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
|
|
6
|
+
function u() {
|
|
7
|
+
const { spacing: e } = d();
|
|
8
|
+
return /* @__PURE__ */ t(r, { children: [
|
|
9
|
+
/* @__PURE__ */ i(h, {}),
|
|
10
|
+
/* @__PURE__ */ t(
|
|
11
|
+
o,
|
|
12
|
+
{
|
|
13
|
+
tag: "section",
|
|
14
|
+
flexDirection: "column",
|
|
15
|
+
inlineCSS: { width: "100%", overflow: "hidden" },
|
|
16
|
+
children: [
|
|
17
|
+
/* @__PURE__ */ i(
|
|
18
|
+
n,
|
|
19
|
+
{
|
|
20
|
+
height: 30,
|
|
21
|
+
inlineCSS: {
|
|
22
|
+
width: "50%",
|
|
23
|
+
marginBottom: e.content(2),
|
|
24
|
+
marginLeft: e.content(4)
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
),
|
|
28
|
+
/* @__PURE__ */ t(o, { flexDirection: "row", gap: 3, ml: 4, children: [
|
|
29
|
+
/* @__PURE__ */ t(o, { flexDirection: "column", children: [
|
|
30
|
+
/* @__PURE__ */ i(n, { width: 240, height: 168, borderRadius: 12 }),
|
|
31
|
+
/* @__PURE__ */ i(
|
|
32
|
+
n,
|
|
33
|
+
{
|
|
34
|
+
height: 24,
|
|
35
|
+
borderRadius: 12,
|
|
36
|
+
inlineCSS: { width: "100%", marginTop: e.content(3) }
|
|
37
|
+
}
|
|
38
|
+
),
|
|
39
|
+
/* @__PURE__ */ i(
|
|
40
|
+
n,
|
|
41
|
+
{
|
|
42
|
+
height: 20,
|
|
43
|
+
borderRadius: 12,
|
|
44
|
+
inlineCSS: { width: "80%", marginTop: e.content(1) }
|
|
45
|
+
}
|
|
46
|
+
)
|
|
47
|
+
] }),
|
|
48
|
+
/* @__PURE__ */ t(o, { flexDirection: "column", children: [
|
|
49
|
+
/* @__PURE__ */ i(n, { width: 240, height: 168, borderRadius: 12 }),
|
|
50
|
+
/* @__PURE__ */ i(
|
|
51
|
+
n,
|
|
52
|
+
{
|
|
53
|
+
height: 24,
|
|
54
|
+
borderRadius: 12,
|
|
55
|
+
inlineCSS: { width: "100%", marginTop: e.content(3) }
|
|
56
|
+
}
|
|
57
|
+
),
|
|
58
|
+
/* @__PURE__ */ i(
|
|
59
|
+
n,
|
|
60
|
+
{
|
|
61
|
+
height: 20,
|
|
62
|
+
borderRadius: 12,
|
|
63
|
+
inlineCSS: { width: "80%", marginTop: e.content(1) }
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
] }),
|
|
67
|
+
/* @__PURE__ */ t(o, { flexDirection: "column", children: [
|
|
68
|
+
/* @__PURE__ */ i(n, { width: 240, height: 168, borderRadius: 12 }),
|
|
69
|
+
/* @__PURE__ */ i(
|
|
70
|
+
n,
|
|
71
|
+
{
|
|
72
|
+
height: 24,
|
|
73
|
+
borderRadius: 12,
|
|
74
|
+
inlineCSS: { width: "100%", marginTop: e.content(3) }
|
|
75
|
+
}
|
|
76
|
+
),
|
|
77
|
+
/* @__PURE__ */ i(
|
|
78
|
+
n,
|
|
79
|
+
{
|
|
80
|
+
height: 20,
|
|
81
|
+
borderRadius: 12,
|
|
82
|
+
inlineCSS: { width: "80%", marginTop: e.content(1) }
|
|
83
|
+
}
|
|
84
|
+
)
|
|
85
|
+
] })
|
|
86
|
+
] })
|
|
87
|
+
]
|
|
88
|
+
}
|
|
89
|
+
)
|
|
90
|
+
] });
|
|
91
|
+
}
|
|
92
|
+
export {
|
|
93
|
+
u as default
|
|
94
|
+
};
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
import { jsxs as n, jsx as i } from "react/jsx-runtime";
|
|
2
|
+
import g from "@dotss/ui/core/useTheme";
|
|
3
|
+
import a from "@dotss/ui/Flexbox";
|
|
4
|
+
import c from "@dotss/ui/Typography";
|
|
5
|
+
import C from "../../../../shared/components/Carousel/Carousel.mjs";
|
|
6
|
+
import x from "../../../../shared/components/Carousel/CarouselSlide/CarouselSlide.mjs";
|
|
7
|
+
import S from "../../../../shared/components/Image/Image.mjs";
|
|
8
|
+
function $({ id: l, title: p, banners: d, onClickBanner: r, ...m }) {
|
|
9
|
+
const { spacing: e } = g(), s = (o) => (t) => {
|
|
10
|
+
r && typeof r == "function" && (t.stopPropagation(), t.preventDefault(), r(o, t));
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ n(a, { tag: "section", flexDirection: "column", ...m, children: [
|
|
13
|
+
/* @__PURE__ */ i(
|
|
14
|
+
c,
|
|
15
|
+
{
|
|
16
|
+
id: `banner-account-carousel2-${l}`,
|
|
17
|
+
variant: "h2B",
|
|
18
|
+
inlineCSS: {
|
|
19
|
+
paddingLeft: e.content(4),
|
|
20
|
+
paddingRight: e.content(4),
|
|
21
|
+
marginBottom: e.content(2)
|
|
22
|
+
},
|
|
23
|
+
children: p
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ i(C, { rowCount: 1, step: 1, spacing: 3, children: d.map(({ id: o, title: t, subtitle: u, url: h, image: f }) => /* @__PURE__ */ i(x, { children: /* @__PURE__ */ n(
|
|
27
|
+
a,
|
|
28
|
+
{
|
|
29
|
+
flexDirection: "column",
|
|
30
|
+
gap: 3,
|
|
31
|
+
onClick: s(h),
|
|
32
|
+
inlineCSS: { width: 240 },
|
|
33
|
+
children: [
|
|
34
|
+
/* @__PURE__ */ i(
|
|
35
|
+
S,
|
|
36
|
+
{
|
|
37
|
+
src: f || "",
|
|
38
|
+
width: 240,
|
|
39
|
+
height: 168,
|
|
40
|
+
alt: `${t} 이미지`,
|
|
41
|
+
"aria-hidden": !0,
|
|
42
|
+
draggable: !1,
|
|
43
|
+
wrapperProps: {
|
|
44
|
+
inlineCSS: {
|
|
45
|
+
borderRadius: 12
|
|
46
|
+
}
|
|
47
|
+
},
|
|
48
|
+
style: { objectFit: "cover" }
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ n(a, { flexDirection: "column", gap: 1, children: [
|
|
52
|
+
/* @__PURE__ */ i(c, { tag: "p", variant: "h4B", lineClamp: 1, children: t }),
|
|
53
|
+
/* @__PURE__ */ i(c, { tag: "p", variant: "b4R", lineClamp: 1, color: "grey.70", children: u })
|
|
54
|
+
] })
|
|
55
|
+
]
|
|
56
|
+
}
|
|
57
|
+
) }, `tictoccroc-carousel2-account-${o}`)) })
|
|
58
|
+
] });
|
|
59
|
+
}
|
|
60
|
+
export {
|
|
61
|
+
$ as default
|
|
62
|
+
};
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import { default as Carousel2Account, Carousel2AccountProps } from './Carousel2Account';
|
|
2
|
+
import { default as Carousel2AccountFallback } from './Carousel2Account.fallback';
|
|
3
|
+
export { Carousel2Account, Carousel2AccountFallback, type Carousel2AccountProps };
|
|
4
|
+
export default Carousel2Account;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { ReactNode, SyntheticEvent } from 'react';
|
|
2
|
+
import { FlexboxProps } from 'node_modules/@dotss/ui/Flexbox/Flexbox';
|
|
3
|
+
import { BannerProps } from '..';
|
|
4
|
+
export interface TextAccountProps extends Omit<FlexboxProps, 'title'> {
|
|
5
|
+
id: string;
|
|
6
|
+
title: ReactNode;
|
|
7
|
+
banners: Array<BannerProps & {
|
|
8
|
+
image?: string;
|
|
9
|
+
}>;
|
|
10
|
+
onClickBanner?: (url: string, e: SyntheticEvent) => void;
|
|
11
|
+
}
|
|
12
|
+
declare function TextAccount({ id, title, banners, onClickBanner, ...props }: TextAccountProps): import("@emotion/react/jsx-runtime").JSX.Element;
|
|
13
|
+
export default TextAccount;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
import { jsxs as e, Fragment as d, jsx as t } from "react/jsx-runtime";
|
|
2
|
+
import r from "@dotss/ui/core/useTheme";
|
|
3
|
+
import n from "@dotss/ui/Flexbox";
|
|
4
|
+
import i from "@dotss/ui/Skeleton";
|
|
5
|
+
import m from "../../../../shared/components/LoadingAnnouncer/LoadingAnnouncer.mjs";
|
|
6
|
+
function s() {
|
|
7
|
+
const { spacing: h } = r();
|
|
8
|
+
return /* @__PURE__ */ e(d, { children: [
|
|
9
|
+
/* @__PURE__ */ t(m, {}),
|
|
10
|
+
/* @__PURE__ */ e(n, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, children: [
|
|
11
|
+
/* @__PURE__ */ t(
|
|
12
|
+
i,
|
|
13
|
+
{
|
|
14
|
+
height: 30,
|
|
15
|
+
inlineCSS: {
|
|
16
|
+
width: "50%",
|
|
17
|
+
marginBottom: h.content(2),
|
|
18
|
+
marginLeft: h.content(4)
|
|
19
|
+
}
|
|
20
|
+
}
|
|
21
|
+
),
|
|
22
|
+
/* @__PURE__ */ e(
|
|
23
|
+
n,
|
|
24
|
+
{
|
|
25
|
+
p: 4,
|
|
26
|
+
gap: 3,
|
|
27
|
+
alignItems: "center",
|
|
28
|
+
justifyContent: "space-between",
|
|
29
|
+
inlineCSS: { width: "100%" },
|
|
30
|
+
children: [
|
|
31
|
+
/* @__PURE__ */ t(i, { width: 100, minWidth: 100, height: 78, borderRadius: 8 }),
|
|
32
|
+
/* @__PURE__ */ t(i, { width: "100%", height: 48 }),
|
|
33
|
+
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
34
|
+
]
|
|
35
|
+
}
|
|
36
|
+
),
|
|
37
|
+
/* @__PURE__ */ e(
|
|
38
|
+
n,
|
|
39
|
+
{
|
|
40
|
+
p: 4,
|
|
41
|
+
gap: 3,
|
|
42
|
+
alignItems: "center",
|
|
43
|
+
justifyContent: "space-between",
|
|
44
|
+
inlineCSS: { width: "100%" },
|
|
45
|
+
children: [
|
|
46
|
+
/* @__PURE__ */ t(i, { width: "100%", maxWidth: 300, textHeight: "b2R" }),
|
|
47
|
+
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
48
|
+
]
|
|
49
|
+
}
|
|
50
|
+
),
|
|
51
|
+
/* @__PURE__ */ e(
|
|
52
|
+
n,
|
|
53
|
+
{
|
|
54
|
+
p: 4,
|
|
55
|
+
gap: 3,
|
|
56
|
+
alignItems: "center",
|
|
57
|
+
justifyContent: "space-between",
|
|
58
|
+
inlineCSS: { width: "100%" },
|
|
59
|
+
children: [
|
|
60
|
+
/* @__PURE__ */ t(i, { width: "100%", maxWidth: 200, textHeight: "b2R" }),
|
|
61
|
+
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
),
|
|
65
|
+
/* @__PURE__ */ e(
|
|
66
|
+
n,
|
|
67
|
+
{
|
|
68
|
+
p: 4,
|
|
69
|
+
gap: 3,
|
|
70
|
+
alignItems: "center",
|
|
71
|
+
justifyContent: "space-between",
|
|
72
|
+
inlineCSS: { width: "100%" },
|
|
73
|
+
children: [
|
|
74
|
+
/* @__PURE__ */ t(i, { width: "100%", maxWidth: 300, textHeight: "b2R" }),
|
|
75
|
+
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
76
|
+
]
|
|
77
|
+
}
|
|
78
|
+
),
|
|
79
|
+
/* @__PURE__ */ e(
|
|
80
|
+
n,
|
|
81
|
+
{
|
|
82
|
+
p: 4,
|
|
83
|
+
gap: 3,
|
|
84
|
+
alignItems: "center",
|
|
85
|
+
justifyContent: "space-between",
|
|
86
|
+
inlineCSS: { width: "100%" },
|
|
87
|
+
children: [
|
|
88
|
+
/* @__PURE__ */ t(i, { width: "100%", maxWidth: 200, textHeight: "b2R" }),
|
|
89
|
+
/* @__PURE__ */ t(i, { width: 16, height: 16, minWidth: 16 })
|
|
90
|
+
]
|
|
91
|
+
}
|
|
92
|
+
)
|
|
93
|
+
] })
|
|
94
|
+
] });
|
|
95
|
+
}
|
|
96
|
+
export {
|
|
97
|
+
s as default
|
|
98
|
+
};
|
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
import { jsxs as h, jsx as e } from "react/jsx-runtime";
|
|
2
|
+
import S from "@dotss/ui/core/useTheme";
|
|
3
|
+
import i from "@dotss/ui/Flexbox";
|
|
4
|
+
import { useCheckHoverPossible as x } from "@dotss/ui/hooks";
|
|
5
|
+
import C from "@dotss/ui/Icon";
|
|
6
|
+
import m from "@dotss/ui/Typography";
|
|
7
|
+
import b from "../../../../shared/components/Image/Image.mjs";
|
|
8
|
+
function D({ id: c, title: p, banners: s, onClickBanner: n, ...g }) {
|
|
9
|
+
const { spacing: o, palette: l } = S(), { isHoverPossible: f } = x(), u = (r) => (t) => {
|
|
10
|
+
n && typeof n == "function" && (t.stopPropagation(), t.preventDefault(), n(r, t));
|
|
11
|
+
};
|
|
12
|
+
return /* @__PURE__ */ h(i, { tag: "section", flexDirection: "column", inlineCSS: { width: "100%" }, ...g, children: [
|
|
13
|
+
/* @__PURE__ */ e(
|
|
14
|
+
m,
|
|
15
|
+
{
|
|
16
|
+
id: `banner-account-text-${c}`,
|
|
17
|
+
variant: "h2B",
|
|
18
|
+
inlineCSS: {
|
|
19
|
+
paddingLeft: o.content(4),
|
|
20
|
+
paddingRight: o.content(4),
|
|
21
|
+
marginBottom: o.content(2)
|
|
22
|
+
},
|
|
23
|
+
children: p
|
|
24
|
+
}
|
|
25
|
+
),
|
|
26
|
+
/* @__PURE__ */ e(i, { tag: "ul", flexDirection: "column", "aria-labelledby": `banner-account-text-${c}`, children: s.map(({ id: r, title: t, url: a, image: d }) => /* @__PURE__ */ e(i, { tag: "li", alignItems: "center", children: /* @__PURE__ */ h(
|
|
27
|
+
i,
|
|
28
|
+
{
|
|
29
|
+
tag: "a",
|
|
30
|
+
href: a,
|
|
31
|
+
p: 4,
|
|
32
|
+
gap: 3,
|
|
33
|
+
alignItems: "center",
|
|
34
|
+
onClick: u(a),
|
|
35
|
+
inlineCSS: {
|
|
36
|
+
width: "100%",
|
|
37
|
+
"&:focus-within": {
|
|
38
|
+
backgroundColor: l.grey[10]
|
|
39
|
+
},
|
|
40
|
+
...f ? {
|
|
41
|
+
"&:hover": {
|
|
42
|
+
backgroundColor: l.grey[10]
|
|
43
|
+
}
|
|
44
|
+
} : {}
|
|
45
|
+
},
|
|
46
|
+
children: [
|
|
47
|
+
d && /* @__PURE__ */ e(
|
|
48
|
+
i,
|
|
49
|
+
{
|
|
50
|
+
inlineCSS: {
|
|
51
|
+
minWidth: 100,
|
|
52
|
+
borderRadius: 8,
|
|
53
|
+
overflow: "hidden"
|
|
54
|
+
},
|
|
55
|
+
children: /* @__PURE__ */ e(
|
|
56
|
+
b,
|
|
57
|
+
{
|
|
58
|
+
width: 100,
|
|
59
|
+
height: 78,
|
|
60
|
+
src: d,
|
|
61
|
+
alt: `${t} 이미지`,
|
|
62
|
+
"aria-hidden": !0,
|
|
63
|
+
lazy: !0
|
|
64
|
+
}
|
|
65
|
+
)
|
|
66
|
+
}
|
|
67
|
+
),
|
|
68
|
+
/* @__PURE__ */ e(
|
|
69
|
+
m,
|
|
70
|
+
{
|
|
71
|
+
tag: "p",
|
|
72
|
+
variant: "b2R",
|
|
73
|
+
lineClamp: a ? 2 : 1,
|
|
74
|
+
inlineCSS: {
|
|
75
|
+
flexGrow: 1
|
|
76
|
+
},
|
|
77
|
+
children: t
|
|
78
|
+
}
|
|
79
|
+
),
|
|
80
|
+
/* @__PURE__ */ e(
|
|
81
|
+
i,
|
|
82
|
+
{
|
|
83
|
+
inlineCSS: {
|
|
84
|
+
whiteSpace: "nowrap"
|
|
85
|
+
},
|
|
86
|
+
children: /* @__PURE__ */ e(C, { name: "ChevronRightLine", size: "xSmall", color: "grey.50" })
|
|
87
|
+
}
|
|
88
|
+
)
|
|
89
|
+
]
|
|
90
|
+
}
|
|
91
|
+
) }, `tictoccroc-story-${r}`)) })
|
|
92
|
+
] });
|
|
93
|
+
}
|
|
94
|
+
export {
|
|
95
|
+
D as default
|
|
96
|
+
};
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { ReactNode } from 'react';
|
|
2
|
+
export interface BannerProps {
|
|
3
|
+
id: number;
|
|
4
|
+
title: ReactNode;
|
|
5
|
+
url: string;
|
|
6
|
+
}
|
|
7
|
+
export { default as TextAccount } from './TextAccount';
|
|
8
|
+
export { default as Carousel1Account } from './Carousel1Account';
|
|
9
|
+
export { default as Carousel2Account } from './Carousel2Account';
|
|
10
|
+
export { default as BannerAccount } from './BannerAccount';
|
|
11
|
+
export * from './TextAccount';
|
|
12
|
+
export * from './Carousel1Account';
|
|
13
|
+
export * from './Carousel2Account';
|
|
14
|
+
export * from './BannerAccount';
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import { default as t } from "./TextAccount/TextAccount.mjs";
|
|
2
|
+
import { default as r } from "./TextAccount/TextAccount.fallback.mjs";
|
|
3
|
+
import { default as l } from "./Carousel1Account/Carousel1Account.mjs";
|
|
4
|
+
import { default as f } from "./Carousel1Account/Carousel1Account.fallback.mjs";
|
|
5
|
+
import { default as s } from "./Carousel2Account/Carousel2Account.mjs";
|
|
6
|
+
import { default as d } from "./Carousel2Account/Carousel2Account.fallback.mjs";
|
|
7
|
+
import { default as p } from "./BannerAccount/BannerAccount.mjs";
|
|
8
|
+
import { default as b } from "./BannerAccount/BannerAccount.fallback.mjs";
|
|
9
|
+
export {
|
|
10
|
+
p as BannerAccount,
|
|
11
|
+
b as BannerAccountFallback,
|
|
12
|
+
l as Carousel1Account,
|
|
13
|
+
f as Carousel1AccountFallback,
|
|
14
|
+
s as Carousel2Account,
|
|
15
|
+
d as Carousel2AccountFallback,
|
|
16
|
+
t as TextAccount,
|
|
17
|
+
r as TextAccountFallback
|
|
18
|
+
};
|
package/package.json
CHANGED