@edu-tosel/design 1.0.93 → 1.0.95
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/asset/SVG.d.ts +3 -0
- package/asset/svg/Icon.d.ts +4 -0
- package/asset/svg/Icon.js +8 -0
- package/asset/svg/Icon.tsx +73 -0
- package/board/design/Board.design.js +3 -2
- package/card/template/InfoCard/PersonalInformation.d.ts +18 -3
- package/card/template/InfoCard/PersonalInformation.js +4 -5
- package/interface/Layout.d.ts +5 -3
- package/layout/template/dashboard/Header.js +5 -5
- package/layout/template/dashboard/Layout.js +1 -2
- package/layout/template/dashboard/Menu.d.ts +1 -1
- package/layout/template/dashboard/Menu.js +7 -3
- package/package.json +1 -1
- package/version.txt +1 -1
package/asset/SVG.d.ts
CHANGED
|
@@ -24,6 +24,9 @@ declare const SVG: {
|
|
|
24
24
|
Search: () => import("react/jsx-runtime").JSX.Element;
|
|
25
25
|
Browser: ({ onClick }: IconProps) => import("react/jsx-runtime").JSX.Element;
|
|
26
26
|
Gift: () => import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
Document: ({ theme }: {
|
|
28
|
+
theme: "red" | "blue";
|
|
29
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
27
30
|
};
|
|
28
31
|
Image: typeof Image;
|
|
29
32
|
Notification: typeof Notification;
|
package/asset/svg/Icon.d.ts
CHANGED
|
@@ -8,6 +8,7 @@ declare const Icon: {
|
|
|
8
8
|
Search: typeof Search;
|
|
9
9
|
Browser: typeof Browser;
|
|
10
10
|
Gift: typeof Gift;
|
|
11
|
+
Document: typeof Document;
|
|
11
12
|
};
|
|
12
13
|
export default Icon;
|
|
13
14
|
declare function Calendar(): import("react/jsx-runtime").JSX.Element;
|
|
@@ -15,3 +16,6 @@ declare function Notification(): import("react/jsx-runtime").JSX.Element;
|
|
|
15
16
|
declare function Search(): import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
declare function Browser({ onClick }: IconProps): import("react/jsx-runtime").JSX.Element;
|
|
17
18
|
declare function Gift(): import("react/jsx-runtime").JSX.Element;
|
|
19
|
+
declare function Document({ theme }: {
|
|
20
|
+
theme: "blue" | "red";
|
|
21
|
+
}): import("react/jsx-runtime").JSX.Element;
|
package/asset/svg/Icon.js
CHANGED
|
@@ -6,6 +6,7 @@ const Icon = {
|
|
|
6
6
|
Search,
|
|
7
7
|
Browser,
|
|
8
8
|
Gift,
|
|
9
|
+
Document,
|
|
9
10
|
};
|
|
10
11
|
export default Icon;
|
|
11
12
|
function Calendar() {
|
|
@@ -26,3 +27,10 @@ function Browser({ onClick }) {
|
|
|
26
27
|
function Gift() {
|
|
27
28
|
return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: "35", height: "35", viewBox: "0 0 35 35", fill: "none", children: [_jsx("path", { d: "M30.0283 19.8574H3.90128C3.62269 19.8574 3.40381 19.6384 3.40381 19.3597V14.5219C3.40381 14.2431 3.62269 14.0241 3.90128 14.0241H30.0283C30.3069 14.0241 30.5258 14.2431 30.5258 14.5219V19.3597C30.5258 19.6384 30.3069 19.8574 30.0283 19.8574ZM4.39875 18.862H29.5309V15.0196H4.39875V18.862Z", fill: "white" }), _jsx("path", { d: "M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z", fill: "white" }), _jsx("path", { d: "M28.9141 31.6831H5.03555C4.75697 31.6831 4.53809 31.4641 4.53809 31.1854V19.3794C4.53809 19.1007 4.75697 18.8817 5.03555 18.8817H28.9141C29.1926 18.8817 29.4115 19.1007 29.4115 19.3794V31.1854C29.4115 31.4641 29.1926 31.6831 28.9141 31.6831ZM5.53302 30.6877H28.4166V19.8772H5.53302V30.6877Z", fill: "white" }), _jsx("path", { d: "M16.2385 15.0392H11.4628C9.91073 15.0392 8.6571 13.7849 8.6571 12.2321C8.6571 10.6792 9.91073 9.4249 11.4628 9.4249H11.6021C12.0996 9.4249 12.5971 9.50453 13.0547 9.64389C15.2237 10.281 16.736 12.3117 16.736 14.5614C16.736 14.8401 16.5171 15.0591 16.2385 15.0591V15.0392ZM11.4628 10.4004C10.4679 10.4004 9.63214 11.2167 9.63214 12.2321C9.63214 13.2474 10.448 14.0637 11.4628 14.0637H15.7013C15.5023 12.451 14.3481 11.0574 12.7761 10.5796C12.3981 10.4602 12.0001 10.4004 11.6021 10.4004H11.4628Z", fill: "white" }), _jsx("path", { d: "M22.0091 15.0394H16.2384C15.9599 15.0394 15.741 14.8204 15.741 14.5416C15.741 11.177 18.487 8.4296 21.8499 8.4296H22.0091C22.9642 8.4296 23.8796 8.84768 24.4964 9.5644C25.0138 10.1617 25.2924 10.9381 25.2924 11.7345C25.2924 13.5462 23.8199 15.0394 21.9892 15.0394H22.0091ZM16.7558 14.0439H22.0091C23.2826 14.0439 24.3173 13.0086 24.3173 11.7345C24.3173 11.177 24.1183 10.6395 23.7602 10.2214C23.3224 9.72367 22.6856 9.42504 22.0091 9.42504H21.8499C19.2034 9.42504 17.0145 11.4557 16.7558 14.0439Z", fill: "white" }), _jsx("path", { d: "M19.1038 31.6833H14.9649C14.6863 31.6833 14.4674 31.4643 14.4674 31.1856V14.5418C14.4674 14.263 14.6863 14.044 14.9649 14.044H19.1038C19.3824 14.044 19.6013 14.263 19.6013 14.5418V31.1856C19.6013 31.4643 19.3824 31.6833 19.1038 31.6833ZM15.4623 30.6879H18.6064V15.0395H15.4623V30.6879Z", fill: "white" }), _jsx("path", { d: "M17.0544 12.1326C16.7758 12.1326 16.5569 11.9136 16.5569 11.6349V4.0496C16.5569 3.77088 16.7758 3.55188 17.0544 3.55188C17.3329 3.55188 17.5518 3.77088 17.5518 4.0496V11.6349C17.5518 11.9136 17.3329 12.1326 17.0544 12.1326Z", fill: "white" })] }));
|
|
28
29
|
}
|
|
30
|
+
function Document({ theme }) {
|
|
31
|
+
const color = {
|
|
32
|
+
red: "#910023",
|
|
33
|
+
blue: "#173A8B",
|
|
34
|
+
};
|
|
35
|
+
return (_jsxs("svg", { width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsxs("g", { clipPath: "url(#clip0_3677_836)", children: [_jsx("path", { d: "M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z", fill: color[theme] }), _jsx("path", { d: "M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z", fill: color[theme] }), _jsx("path", { d: "M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z", fill: color[theme] }), _jsx("path", { d: "M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z", fill: color[theme] }), _jsx("path", { d: "M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z", fill: color[theme] }), _jsx("path", { d: "M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z", fill: color[theme] }), _jsx("path", { d: "M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z", fill: color[theme] }), _jsx("path", { d: "M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z", fill: color[theme] }), _jsx("path", { d: "M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z", fill: color[theme] }), _jsx("path", { d: "M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z", fill: color[theme] }), _jsx("path", { d: "M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z", fill: color[theme] }), _jsx("path", { d: "M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z", fill: color[theme] })] }), _jsx("defs", { children: _jsx("clipPath", { id: "clip0_3677_836", children: _jsx("rect", { width: "25", height: "25", fill: "white" }) }) })] }));
|
|
36
|
+
}
|
package/asset/svg/Icon.tsx
CHANGED
|
@@ -11,6 +11,7 @@ const Icon = {
|
|
|
11
11
|
Search,
|
|
12
12
|
Browser,
|
|
13
13
|
Gift,
|
|
14
|
+
Document,
|
|
14
15
|
};
|
|
15
16
|
|
|
16
17
|
export default Icon;
|
|
@@ -184,3 +185,75 @@ function Gift() {
|
|
|
184
185
|
</svg>
|
|
185
186
|
);
|
|
186
187
|
}
|
|
188
|
+
|
|
189
|
+
function Document({ theme }: { theme: "blue" | "red" }) {
|
|
190
|
+
const color = {
|
|
191
|
+
red: "#910023",
|
|
192
|
+
blue: "#173A8B",
|
|
193
|
+
};
|
|
194
|
+
return (
|
|
195
|
+
<svg
|
|
196
|
+
width="25"
|
|
197
|
+
height="25"
|
|
198
|
+
viewBox="0 0 25 25"
|
|
199
|
+
fill="none"
|
|
200
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
201
|
+
>
|
|
202
|
+
<g clipPath="url(#clip0_3677_836)">
|
|
203
|
+
<path
|
|
204
|
+
d="M18.3495 25H1.3316C1.14591 25 1 24.8525 1 24.6647V4.61373C1 4.53326 1.03979 4.43938 1.09285 4.38573L5.33737 0.0938841C5.33737 0.0938841 5.48328 0 5.56286 0H18.3362C18.5219 0 18.6678 0.147532 18.6678 0.3353V9.2677C18.6678 9.45547 18.5219 9.603 18.3362 9.603C18.1505 9.603 18.0046 9.45547 18.0046 9.2677V0.670601H5.70877L1.66321 4.76127V24.3294H18.0179V15.8396C18.0179 15.6518 18.1638 15.5043 18.3495 15.5043C18.5352 15.5043 18.6811 15.6518 18.6811 15.8396V24.6647C18.6811 24.8525 18.5352 25 18.3495 25Z"
|
|
205
|
+
fill={color[theme]}
|
|
206
|
+
/>
|
|
207
|
+
<path
|
|
208
|
+
d="M1.33158 4.9489C1.252 4.9489 1.15915 4.92208 1.09283 4.85502C0.960187 4.7209 0.960187 4.50631 1.09283 4.3856L5.33735 0.0937542C5.46999 -0.040366 5.68222 -0.040366 5.80159 0.0937542C5.93424 0.227874 5.93424 0.442467 5.80159 0.563175L1.57034 4.85502C1.57034 4.85502 1.42443 4.9489 1.33158 4.9489Z"
|
|
209
|
+
fill={color[theme]}
|
|
210
|
+
/>
|
|
211
|
+
<path
|
|
212
|
+
d="M5.56286 4.96245H1.3316C1.14591 4.94903 1 4.8015 1 4.61373C1 4.42597 1.14591 4.27843 1.3316 4.27843H5.23126V0.3353C5.23126 0.147532 5.37716 0 5.56286 0C5.74856 0 5.89446 0.147532 5.89446 0.3353V4.62715C5.89446 4.72103 5.85467 4.8015 5.80161 4.86856C5.74856 4.93562 5.65571 4.96245 5.56286 4.96245Z"
|
|
213
|
+
fill={color[theme]}
|
|
214
|
+
/>
|
|
215
|
+
<path
|
|
216
|
+
d="M13.4019 18.0259C13.3091 18.0259 13.2295 17.9857 13.1632 17.932C13.0836 17.8516 13.0571 17.7443 13.0703 17.637L13.4417 15.719C13.4417 15.719 13.4815 15.5983 13.5346 15.5447L20.233 8.77162C20.233 8.77162 20.3789 8.67773 20.4717 8.67773C20.5646 8.67773 20.6442 8.71797 20.7105 8.77162L22.2491 10.3274C22.3818 10.4615 22.3818 10.6761 22.2491 10.7968L15.5507 17.5699C15.5507 17.5699 15.4446 17.6504 15.3783 17.6638L13.4815 18.0393C13.4815 18.0393 13.4417 18.0393 13.4152 18.0393L13.4019 18.0259ZM14.0784 15.9336L13.8264 17.2614L15.1395 17.0066L21.5328 10.542L20.4717 9.46904L14.0784 15.9336Z"
|
|
217
|
+
fill={color[theme]}
|
|
218
|
+
/>
|
|
219
|
+
<path
|
|
220
|
+
d="M22.7665 10.1129C22.6736 10.1129 22.594 10.0726 22.5277 10.019L20.9891 8.46318C20.8564 8.32906 20.8564 8.11447 20.9891 7.99376L21.891 7.08174C22.0104 6.96103 22.2359 6.96103 22.3553 7.08174L23.8939 8.63754C23.8939 8.63754 23.9868 8.78507 23.9868 8.87895C23.9868 8.97284 23.947 9.05331 23.8939 9.12037L22.992 10.0324C22.992 10.0324 22.846 10.1263 22.7532 10.1263L22.7665 10.1129ZM21.7053 8.22176L22.7665 9.29472L23.2042 8.85213L22.143 7.77917L21.7053 8.22176Z"
|
|
221
|
+
fill={color[theme]}
|
|
222
|
+
/>
|
|
223
|
+
<path
|
|
224
|
+
d="M18.4689 12.9026C18.3893 12.9026 18.2964 12.8757 18.2301 12.8087C18.0975 12.6745 18.0975 12.46 18.2301 12.3392L21.0023 9.53614C21.1349 9.40202 21.3472 9.40202 21.4665 9.53614C21.5992 9.67026 21.5992 9.88485 21.4665 10.0056L18.6943 12.8087C18.6943 12.8087 18.5484 12.9026 18.4556 12.9026H18.4689Z"
|
|
225
|
+
fill={color[theme]}
|
|
226
|
+
/>
|
|
227
|
+
<path
|
|
228
|
+
d="M15.2987 17.6504C15.2192 17.6504 15.1263 17.6235 15.06 17.5565L13.5214 16.0007C13.3887 15.8666 13.3887 15.652 13.5214 15.5313C13.654 15.3971 13.8662 15.3971 13.9856 15.5313L15.5242 17.087C15.6569 17.2212 15.6569 17.4358 15.5242 17.5565C15.4579 17.6235 15.3783 17.6504 15.2855 17.6504H15.2987Z"
|
|
229
|
+
fill={color[theme]}
|
|
230
|
+
/>
|
|
231
|
+
<path
|
|
232
|
+
d="M15.763 8.30244H3.90485C3.71915 8.30244 3.57324 8.1549 3.57324 7.96714C3.57324 7.77937 3.71915 7.63184 3.90485 7.63184H15.763C15.9487 7.63184 16.0946 7.77937 16.0946 7.96714C16.0946 8.1549 15.9487 8.30244 15.763 8.30244Z"
|
|
233
|
+
fill={color[theme]}
|
|
234
|
+
/>
|
|
235
|
+
<path
|
|
236
|
+
d="M15.763 11.32H3.90485C3.71915 11.32 3.57324 11.1725 3.57324 10.9847C3.57324 10.7969 3.71915 10.6494 3.90485 10.6494H15.763C15.9487 10.6494 16.0946 10.7969 16.0946 10.9847C16.0946 11.1725 15.9487 11.32 15.763 11.32Z"
|
|
237
|
+
fill={color[theme]}
|
|
238
|
+
/>
|
|
239
|
+
<path
|
|
240
|
+
d="M13.1102 14.3513H3.90485C3.71915 14.3513 3.57324 14.2037 3.57324 14.016C3.57324 13.8282 3.71915 13.6807 3.90485 13.6807H13.1102C13.2958 13.6807 13.4418 13.8282 13.4418 14.016C13.4418 14.2037 13.2958 14.3513 13.1102 14.3513Z"
|
|
241
|
+
fill={color[theme]}
|
|
242
|
+
/>
|
|
243
|
+
<path
|
|
244
|
+
d="M11.7837 17.3688H3.90485C3.71915 17.3688 3.57324 17.2213 3.57324 17.0335C3.57324 16.8458 3.71915 16.6982 3.90485 16.6982H11.7837C11.9694 16.6982 12.1153 16.8458 12.1153 17.0335C12.1153 17.2213 11.9694 17.3688 11.7837 17.3688Z"
|
|
245
|
+
fill={color[theme]}
|
|
246
|
+
/>
|
|
247
|
+
<path
|
|
248
|
+
d="M15.763 20.3864H3.90485C3.71915 20.3864 3.57324 20.2389 3.57324 20.0511C3.57324 19.8634 3.71915 19.7158 3.90485 19.7158H15.763C15.9487 19.7158 16.0946 19.8634 16.0946 20.0511C16.0946 20.2389 15.9487 20.3864 15.763 20.3864Z"
|
|
249
|
+
fill={color[theme]}
|
|
250
|
+
/>
|
|
251
|
+
</g>
|
|
252
|
+
<defs>
|
|
253
|
+
<clipPath id="clip0_3677_836">
|
|
254
|
+
<rect width="25" height="25" fill="white" />
|
|
255
|
+
</clipPath>
|
|
256
|
+
</defs>
|
|
257
|
+
</svg>
|
|
258
|
+
);
|
|
259
|
+
}
|
|
@@ -34,14 +34,15 @@ export function Board({ children, action, option, debug, buttons, }) {
|
|
|
34
34
|
positions: "relative",
|
|
35
35
|
sizes: `w-full ${heightSize[height ?? "xl"]}`,
|
|
36
36
|
background: `${background ?? "bg-white"} dark:bg-black/80`,
|
|
37
|
-
styles: "text-black",
|
|
37
|
+
styles: "text-black overflow-hidden",
|
|
38
38
|
rounded: `rounded-none ${isRounded ? "xl:rounded-xl" : ""}`,
|
|
39
39
|
boundary,
|
|
40
|
+
className,
|
|
40
41
|
};
|
|
41
42
|
const button = {
|
|
42
43
|
positions: "fixed bottom-20 right-4 xl:absolute xl:-bottom-18.5 xl:right-0",
|
|
43
44
|
};
|
|
44
|
-
return (_jsxs("div", { className: cn(container), children: [_jsx(
|
|
45
|
+
return (_jsxs("div", { className: cn(container), children: [_jsx(Action.Show, { actions: shows, children: _jsx("div", { className: cn(body), children: children }) }), _jsx("div", { className: cn(button), children: buttons?.map(({ title, onClick, option }) => (_jsx(Label.Button, { title: title, onClick: onClick, option: {
|
|
45
46
|
...option,
|
|
46
47
|
text: "text-white",
|
|
47
48
|
background: "bg-crimson-burgundy",
|
|
@@ -1,6 +1,8 @@
|
|
|
1
|
-
import { InfoCardProps } from "../../../interface";
|
|
2
|
-
interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children"> {
|
|
1
|
+
import { InfoCardProps, OnClick } from "../../../interface";
|
|
2
|
+
interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children" | "topRight"> {
|
|
3
3
|
theme?: "red" | "blue";
|
|
4
|
+
topRight?: TopRightModify;
|
|
5
|
+
bottomRight?: BottomRightButton;
|
|
4
6
|
data: {
|
|
5
7
|
info: string;
|
|
6
8
|
username: string;
|
|
@@ -9,5 +11,18 @@ interface InfoCardPersonalInformationProps extends Omit<InfoCardProps, "children
|
|
|
9
11
|
phone: string;
|
|
10
12
|
};
|
|
11
13
|
}
|
|
12
|
-
|
|
14
|
+
interface TopRightModify {
|
|
15
|
+
type: "modify";
|
|
16
|
+
data: {
|
|
17
|
+
onClick: OnClick;
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
interface BottomRightButton {
|
|
21
|
+
type: "button";
|
|
22
|
+
data: {
|
|
23
|
+
title: string;
|
|
24
|
+
onClick: OnClick;
|
|
25
|
+
};
|
|
26
|
+
}
|
|
27
|
+
export default function PersonalInformation({ titles, theme, topRight, bottomRight, data, }: InfoCardPersonalInformationProps): import("react/jsx-runtime").JSX.Element;
|
|
13
28
|
export {};
|
|
@@ -3,9 +3,8 @@ import { cn, gradient } from "../../../util";
|
|
|
3
3
|
import { label } from "./static/label";
|
|
4
4
|
import { Label } from "../../..";
|
|
5
5
|
import { InfoCardDesign } from "../../design/InfoCard.design";
|
|
6
|
+
import SVG from "../../../asset/SVG";
|
|
6
7
|
const color = {
|
|
7
|
-
red: "#910023",
|
|
8
|
-
blue: "#173A8B",
|
|
9
8
|
background: {
|
|
10
9
|
red: gradient.bg.greenToRedSoft,
|
|
11
10
|
blue: gradient.bg.lab,
|
|
@@ -23,7 +22,7 @@ const color = {
|
|
|
23
22
|
blue: "text-blue-navy",
|
|
24
23
|
},
|
|
25
24
|
};
|
|
26
|
-
export default function PersonalInformation({ titles, theme = "red",
|
|
25
|
+
export default function PersonalInformation({ titles, theme = "red", topRight, bottomRight, data, }) {
|
|
27
26
|
const body = {
|
|
28
27
|
container: "flex flex-col pt-5.75",
|
|
29
28
|
belong: color.text[theme],
|
|
@@ -34,13 +33,13 @@ export default function PersonalInformation({ titles, theme = "red", button, dat
|
|
|
34
33
|
fonts: "text-xs text-gray-dim",
|
|
35
34
|
},
|
|
36
35
|
};
|
|
37
|
-
return (_jsx(InfoCardDesign, { titles: titles, topRight: _jsxs("
|
|
36
|
+
return (_jsx(InfoCardDesign, { titles: titles, topRight: topRight?.type === "modify" && (_jsxs("button", { onClick: topRight.data.onClick, className: "flex items-end gap-2.5", children: [_jsx("div", { className: `text-sm underline leading-none ${color.text[theme]}`, children: "\uC218\uC815\uD558\uAE30" }), _jsx(SVG.Icon.Document, { theme: theme })] })), option: {
|
|
38
37
|
titleBorder: color.border[theme],
|
|
39
38
|
width: "md",
|
|
40
39
|
height: "md",
|
|
41
40
|
background: color.background[theme],
|
|
42
41
|
boundary: `border-3 ${color.border[theme]}`,
|
|
43
|
-
}, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), button && (_jsx(Label.Button, { title:
|
|
42
|
+
}, children: _jsxs(_Fragment, { children: [_jsxs("div", { className: cn(body.container), children: [_jsx("div", { className: cn(body.belong), children: data.info }), _jsx("div", { className: cn(body.username), children: data.username }), _jsx("div", { className: cn(body.name), children: data.name }), _jsxs("div", { className: cn(body.subInfo), children: [_jsx("div", { children: data.email }), _jsx("div", { children: data.phone })] })] }), bottomRight?.type === "button" && (_jsx(Label.Button, { title: bottomRight.data.title, onClick: bottomRight.data.onClick, option: {
|
|
44
43
|
width: "md",
|
|
45
44
|
background: color.background.button[theme],
|
|
46
45
|
text: "text-white",
|
package/interface/Layout.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { ReactNode } from "react";
|
|
2
|
-
import { OnClick, State } from "./Property";
|
|
2
|
+
import { Button, OnClick, State } from "./Property";
|
|
3
3
|
import { ShowAction } from "./Action";
|
|
4
4
|
interface Notification {
|
|
5
5
|
id: number;
|
|
@@ -14,7 +14,6 @@ interface NotificationProps {
|
|
|
14
14
|
notifications?: Partial<Notification>[];
|
|
15
15
|
flag: boolean;
|
|
16
16
|
onClick: OnClick;
|
|
17
|
-
color?: string;
|
|
18
17
|
}
|
|
19
18
|
export interface MenuProps {
|
|
20
19
|
showAction?: ShowAction;
|
|
@@ -26,7 +25,8 @@ export interface MenuProps {
|
|
|
26
25
|
input?: {
|
|
27
26
|
password: State<string | undefined>;
|
|
28
27
|
};
|
|
29
|
-
|
|
28
|
+
medium?: Button[];
|
|
29
|
+
bottom: Button[];
|
|
30
30
|
}
|
|
31
31
|
export interface DashboardHeaderProps {
|
|
32
32
|
title: string;
|
|
@@ -34,9 +34,11 @@ export interface DashboardHeaderProps {
|
|
|
34
34
|
notification: NotificationProps;
|
|
35
35
|
menu?: MenuProps;
|
|
36
36
|
option?: {
|
|
37
|
+
onClick?: OnClick;
|
|
37
38
|
background?: string;
|
|
38
39
|
text?: string;
|
|
39
40
|
className?: string;
|
|
41
|
+
iconColor?: string;
|
|
40
42
|
};
|
|
41
43
|
}
|
|
42
44
|
export interface DashboardProps {
|
|
@@ -8,8 +8,8 @@ import SVG from "../../../asset/SVG";
|
|
|
8
8
|
import { Label } from "../../../widget";
|
|
9
9
|
export function Header({ title, logo, notification, menu, option, }) {
|
|
10
10
|
const { setView, setIsOwn } = useActionStore();
|
|
11
|
-
const { notifications, flag, onClick
|
|
12
|
-
const { text, background, className } = option ?? {};
|
|
11
|
+
const { notifications, flag, onClick } = notification;
|
|
12
|
+
const { text, background, className, iconColor } = option ?? {};
|
|
13
13
|
const container = {
|
|
14
14
|
positions: "fixed xl:static top-0 left-0 z-40",
|
|
15
15
|
displays: "flex items-center justify-between ",
|
|
@@ -26,13 +26,13 @@ export function Header({ title, logo, notification, menu, option, }) {
|
|
|
26
26
|
setIsOwn(true);
|
|
27
27
|
onClick && onClick();
|
|
28
28
|
return setView("notification");
|
|
29
|
-
}, color:
|
|
29
|
+
}, color: iconColor }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
|
|
30
30
|
setIsOwn(true);
|
|
31
31
|
return setView("menu");
|
|
32
|
-
}, color:
|
|
32
|
+
}, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
|
|
33
33
|
width: "sm",
|
|
34
34
|
height: "xs",
|
|
35
|
-
text: "text-white",
|
|
36
35
|
background: gradient.bg.greenToRed,
|
|
36
|
+
text: "text-white",
|
|
37
37
|
} }))] }) })] }));
|
|
38
38
|
}
|
|
@@ -9,9 +9,8 @@ export default function Layout({ header, navigations, children, option, }) {
|
|
|
9
9
|
const { title, option: headerOption, logo, notification, menu } = header;
|
|
10
10
|
const { background } = option ?? {};
|
|
11
11
|
useEffect(() => {
|
|
12
|
-
if (isOwn)
|
|
12
|
+
if (isOwn)
|
|
13
13
|
return setIsOwn(false);
|
|
14
|
-
}
|
|
15
14
|
return clearView();
|
|
16
15
|
}, [flag]);
|
|
17
16
|
const container = {
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
import { MenuProps } from "../../../interface";
|
|
2
|
-
export default function Menu({ showAction, profile, input,
|
|
2
|
+
export default function Menu({ showAction, profile, input, medium, bottom, }: MenuProps): JSX.Element;
|
|
@@ -3,7 +3,7 @@ import { useTransition, animated } from "react-spring";
|
|
|
3
3
|
import { cn, gradient } from "../../../util";
|
|
4
4
|
import { useActionStore } from "../../../store";
|
|
5
5
|
import { Label } from "../../../widget";
|
|
6
|
-
export default function Menu({ showAction, profile, input,
|
|
6
|
+
export default function Menu({ showAction, profile, input, medium, bottom, }) {
|
|
7
7
|
const { isVisible } = showAction ?? {};
|
|
8
8
|
const { setIsOwn, removeModal } = useActionStore();
|
|
9
9
|
const container = {
|
|
@@ -18,10 +18,14 @@ export default function Menu({ showAction, profile, input, onClick, }) {
|
|
|
18
18
|
leave: { opacity: 0 },
|
|
19
19
|
config: { duration: 200 },
|
|
20
20
|
});
|
|
21
|
-
return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }),
|
|
21
|
+
return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), onClick: () => setIsOwn(true), children: [_jsxs("div", { className: "h-17.75 flex gap-12 justify-center items-center text-black border-b-2 pb-2.5", children: [_jsxs("div", { children: [_jsx("div", { children: profile?.name }), _jsx("div", { className: "text-xs", children: profile?.belong })] }), _jsx("div", { className: "relative w-15 h-15 rounded-md overflow-hidden", children: _jsx("img", { className: "bg-cover rounded-md", src: profile?.image, alt: "profile-image" }) })] }), _jsxs("div", { className: "flex flex-col gap-2.5 pt-2.5", children: [_jsx("input", { className: "w-47.5 h-6.25 border-2 text-black", value: input?.password[0], onChange: (e) => input?.password[1](e.target.value), type: "password" }), medium?.map((button) => (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
|
|
22
|
+
...button.option,
|
|
23
|
+
width: "full",
|
|
24
|
+
height: "xs",
|
|
25
|
+
} }))), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: bottom[0].title, onClick: bottom[0].onClick, option: {
|
|
22
26
|
width: "sm",
|
|
23
27
|
height: "xs",
|
|
24
|
-
} }), _jsx(Label.Button, { title:
|
|
28
|
+
} }), _jsx(Label.Button, { title: bottom[1].title, onClick: bottom[1].onClick, option: {
|
|
25
29
|
background: gradient.bg.greenToRed,
|
|
26
30
|
text: "text-white",
|
|
27
31
|
width: "sm",
|
package/package.json
CHANGED
package/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
1.0.
|
|
1
|
+
1.0.95
|