@edu-tosel/design 1.0.94 → 1.0.95

package/interface/Layout.d.ts

@@ -1,5 +1,5 @@
 import { ReactNode } from "react";
-import { OnClick, State } from "./Property";
+import { Button, OnClick, State } from "./Property";
 import { ShowAction } from "./Action";
 interface Notification {
     id: number;
@@ -14,7 +14,6 @@ interface NotificationProps {
     notifications?: Partial<Notification>[];
     flag: boolean;
     onClick: OnClick;
-    color?: string;
 }
 export interface MenuProps {
     showAction?: ShowAction;
@@ -26,7 +25,8 @@ export interface MenuProps {
     input?: {
         password: State<string | undefined>;
     };
-    onClick: OnClick;
+    medium?: Button[];
+    bottom: Button[];
 }
 export interface DashboardHeaderProps {
     title: string;
@@ -34,9 +34,11 @@ export interface DashboardHeaderProps {
     notification: NotificationProps;
     menu?: MenuProps;
     option?: {
+        onClick?: OnClick;
         background?: string;
         text?: string;
         className?: string;
+        iconColor?: string;
     };
 }
 export interface DashboardProps {

package/layout/template/dashboard/Header.js

@@ -8,8 +8,8 @@ import SVG from "../../../asset/SVG";
 import { Label } from "../../../widget";
 export function Header({ title, logo, notification, menu, option, }) {
     const { setView, setIsOwn } = useActionStore();
-    const { notifications, flag, onClick, color } = notification;
-    const { text, background, className } = option ?? {};
+    const { notifications, flag, onClick } = notification;
+    const { text, background, className, iconColor } = option ?? {};
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
@@ -26,13 +26,13 @@ export function Header({ title, logo, notification, menu, option, }) {
                                 setIsOwn(true);
                                 onClick && onClick();
                                 return setView("notification");
-                            }, color: color }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
+                            }, color: iconColor }), menu?.profile ? (_jsx(SVG.Profile, { onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
-                            }, color: color })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC\uB85C", onClick: menu?.onClick, option: {
+                            }, color: iconColor })) : (_jsx(Label.Button, { title: "\uB300\uC2DC\uBCF4\uB4DC", onClick: () => option?.onClick && option.onClick(), option: {
                                 width: "sm",
                                 height: "xs",
-                                text: "text-white",
                                 background: gradient.bg.greenToRed,
+                                text: "text-white",
                             } }))] }) })] }));
 }

package/layout/template/dashboard/Layout.js

@@ -9,9 +9,8 @@ export default function Layout({ header, navigations, children, option, }) {
     const { title, option: headerOption, logo, notification, menu } = header;
     const { background } = option ?? {};
     useEffect(() => {
-        if (isOwn) {
+        if (isOwn)
             return setIsOwn(false);
-        }
         return clearView();
     }, [flag]);
     const container = {

package/layout/template/dashboard/Menu.d.ts

@@ -1,2 +1,2 @@
 import { MenuProps } from "../../../interface";
-export default function Menu({ showAction, profile, input, onClick, }: MenuProps): JSX.Element;
+export default function Menu({ showAction, profile, input, medium, bottom, }: MenuProps): JSX.Element;

package/layout/template/dashboard/Menu.js

@@ -3,7 +3,7 @@ import { useTransition, animated } from "react-spring";
 import { cn, gradient } from "../../../util";
 import { useActionStore } from "../../../store";
 import { Label } from "../../../widget";
-export default function Menu({ showAction, profile, input, onClick, }) {
+export default function Menu({ showAction, profile, input, medium, bottom, }) {
     const { isVisible } = showAction ?? {};
     const { setIsOwn, removeModal } = useActionStore();
     const container = {
@@ -18,10 +18,14 @@ export default function Menu({ showAction, profile, input, onClick, }) {
         leave: { opacity: 0 },
         config: { duration: 200 },
     });
-    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" }), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: "\uCDE8\uC18C", onClick: () => removeModal("menu"), option: {
+    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: {
+                            ...button.option,
+                            width: "full",
+                            height: "xs",
+                        } }))), _jsxs("div", { className: "flex gap-2.5", children: [_jsx(Label.Button, { title: bottom[0].title, onClick: bottom[0].onClick, option: {
                                     width: "sm",
                                     height: "xs",
-                                } }), _jsx(Label.Button, { title: "\uD655\uC778", onClick: onClick, option: {
+                                } }), _jsx(Label.Button, { title: bottom[1].title, onClick: bottom[1].onClick, option: {
                                     background: gradient.bg.greenToRed,
                                     text: "text-white",
                                     width: "sm",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edu-tosel/design",
-  "version": "1.0.94",
+  "version": "1.0.95",
   "description": "UI components for International TOSEL Committee",
   "keywords": [
     "jsx",

package/version.txt

@@ -1 +1 @@
-1.0.94
+1.0.95