@edu-tosel/design 1.0.31 → 1.0.32

package/interface/Layout.d.ts

@@ -1,9 +1,22 @@
+interface Notification {
+    id: number;
+    userId: number;
+    script: string;
+    isRead: boolean;
+    link: string | null;
+    createdAt: Date;
+    updatedAt: Date;
+}
 export interface DashboardHeaderProps {
     title: string;
     logo: {
         image: string;
         href?: string;
     };
+    notification: {
+        notifications: Partial<Notification>[];
+        flag: boolean;
+    };
     options?: {
         background?: string;
         text?: string;
@@ -18,3 +31,8 @@ export interface DashboardProps {
         background?: string;
     };
 }
+export interface DashboardNotification {
+    isVisible?: boolean;
+    notifications: Partial<Notification>[];
+}
+export {};

package/layout/widget/dashboard/Header.d.ts

@@ -1,2 +1,2 @@
 import { DashboardHeaderProps } from "../../../interface";
-export declare function Header({ title, logo, options }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ title, logo, notification, options, }: DashboardHeaderProps): import("react/jsx-runtime").JSX.Element;

package/layout/widget/dashboard/Header.js

@@ -3,10 +3,11 @@ import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
 import Menu from "./Menu";
 import { Events } from "../..";
-export function Header({ title, logo, options }) {
-    const { events, setView, setIsOwn } = useWidgetStore();
+import Notification from "./Notification";
+export function Header({ title, logo, notification, options, }) {
+    const { setView, setIsOwn } = useWidgetStore();
+    const { notifications, flag } = notification;
     const { text, background, className } = options ?? {};
-    const { isDark, setDark } = useWidgetStore();
     const container = {
         positions: "fixed xl:static top-0 left-0 z-40",
         displays: "flex items-center justify-between ",
@@ -16,7 +17,13 @@ export function Header({ title, logo, options }) {
         styles: "px-5 xl:px-8 2xl:px-16 ",
         className,
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [["menu", _jsx(Menu, { image: "/images/hani.png" })]], children: [_jsx("svg", { className: "cursor-pointer", xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
+    return (_jsxs("div", { className: cn(container), children: [_jsxs("div", { className: "flex h-12 items-center gap-8 xl:gap-24 2xl:gap-26", children: [logo ? (_jsx("a", { href: logo.href, children: _jsx("img", { src: logo.image, alt: "logo", className: "h-6.25 w-28.78" }) })) : (_jsx("div", { className: "text-2xl", children: "TOSEL" })), _jsx("div", { className: "text-3xl font-pretendard-bold", children: title })] }), _jsx("div", { className: "relative flex gap-5.25", children: _jsxs(Events.Show, { widgets: [
+                        ["notification", _jsx(Notification, { notifications: notifications })],
+                        ["menu", _jsx(Menu, { image: "/images/hani.png" })],
+                    ], children: [_jsxs("button", { className: "relative", onClick: () => {
+                                setIsOwn(true);
+                                return setView("notification");
+                            }, children: [_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M15.4759 17.7938C17.4168 17.564 19.3237 17.1059 21.1572 16.4292C19.6044 14.7092 18.7465 12.4734 18.7499 10.1562V9.375C18.7499 7.7174 18.0914 6.12769 16.9193 4.95558C15.7472 3.78348 14.1575 3.125 12.4999 3.125C10.8423 3.125 9.25257 3.78348 8.08047 4.95558C6.90837 6.12769 6.24989 7.7174 6.24989 9.375V10.1562C6.25303 12.4736 5.39466 14.7093 3.84155 16.4292C5.64676 17.0958 7.54989 17.5594 9.52384 17.7938M15.4759 17.7938C13.4988 18.0283 11.5009 18.0283 9.52384 17.7938M15.4759 17.7938C15.626 18.2624 15.6634 18.7598 15.5849 19.2455C15.5064 19.7313 15.3143 20.1917 15.0242 20.5891C14.7342 20.9866 14.3544 21.31 13.9157 21.5329C13.4771 21.7559 12.9919 21.8721 12.4999 21.8721C12.0078 21.8721 11.5227 21.7559 11.0841 21.5329C10.6454 21.31 10.2656 20.9866 9.97553 20.5891C9.68548 20.1917 9.49339 19.7313 9.4149 19.2455C9.33641 18.7598 9.37374 18.2624 9.52384 17.7938", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }), flag && (_jsx("div", { className: "bg-red-500 w-2 h-2 rounded-full absolute top-0 right-0" }))] }), _jsx("svg", { className: "cursor-pointer", onClick: () => {
                                 setIsOwn(true);
                                 return setView("menu");
                             }, xmlns: "http://www.w3.org/2000/svg", width: "25", height: "25", viewBox: "0 0 25 25", fill: "none", children: _jsx("path", { d: "M18.7313 19.5053C18.0034 18.5416 17.0618 17.7601 15.9804 17.2223C14.8991 16.6846 13.7077 16.4052 12.5 16.4063C11.2924 16.4052 10.101 16.6846 9.01964 17.2223C7.93832 17.7601 6.99664 18.5416 6.26878 19.5053M18.7313 19.5053C20.1516 18.2419 21.1533 16.5767 21.6054 14.7304C22.0576 12.884 21.9378 10.9439 21.262 9.16722C20.5862 7.39055 19.3862 5.86128 17.8213 4.78224C16.2564 3.7032 14.4004 3.12537 12.4995 3.12537C10.5986 3.12537 8.74267 3.7032 7.17775 4.78224C5.61282 5.86128 4.41288 7.39055 3.73705 9.16722C3.06122 10.9439 2.94144 12.884 3.3936 14.7304C3.84575 16.5767 4.84847 18.2419 6.26878 19.5053M18.7313 19.5053C17.0167 21.0346 14.7976 21.8783 12.5 21.8751C10.2021 21.8786 7.98361 21.0349 6.26878 19.5053M15.625 10.1563C15.625 10.9851 15.2958 11.78 14.7097 12.366C14.1237 12.9521 13.3288 13.2813 12.5 13.2813C11.6712 13.2813 10.8764 12.9521 10.2903 12.366C9.70427 11.78 9.37503 10.9851 9.37503 10.1563C9.37503 9.32751 9.70427 8.53265 10.2903 7.9466C10.8764 7.36055 11.6712 7.03131 12.5 7.03131C13.3288 7.03131 14.1237 7.36055 14.7097 7.9466C15.2958 8.53265 15.625 9.32751 15.625 10.1563Z", stroke: "#910023", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })] }) })] }));

package/layout/widget/dashboard/Layout.js

@@ -6,7 +6,7 @@ import { cn } from "../../../util";
 import { useWidgetStore } from "../../../store";
 export default function Layout({ header, navigations, children, options, }) {
     const { isDark, flag, setFlag, isOwn, setIsOwn, clearView } = useWidgetStore();
-    const { title, options: headerOptions, logo } = header;
+    const { title, options: headerOptions, logo, notification } = header;
     const { background } = options ?? {};
     useEffect(() => {
         if (isOwn) {
@@ -25,5 +25,5 @@ export default function Layout({ header, navigations, children, options, }) {
         displays: "flex gap-12 xl:gap-7.5 ",
         paddings: "pt-15 xl:pl-2 2xl:px-12 xl:pt-7.5",
     };
-    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
+    return (_jsxs("div", { className: cn(container), onClick: setFlag, children: [_jsx(Header, { title: title, notification: notification, options: headerOptions, logo: logo }), _jsxs("div", { className: cn(body), children: [_jsx(NavigationContainer, { children: navigations.map((nav, index) => (_jsx(Fragment, { children: nav }, index))) }), children] })] }));
 }

package/layout/widget/dashboard/Notification.d.ts

@@ -0,0 +1,2 @@
+import { DashboardNotification } from "../../../interface";
+export default function Notification({ isVisible, notifications, }: DashboardNotification): JSX.Element;

package/layout/widget/dashboard/Notification.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTransition, animated } from "react-spring";
+import { cn } from "../../../util";
+export default function Notification({ isVisible, notifications, }) {
+    const container = {
+        positions: "absolute right-12 z-45",
+        displays: "flex flex-col ",
+        sizes: "w-60 h-45",
+        styles: "box-shadow rounded-md overflow-hidden",
+    };
+    const headerBox = {
+        displays: "flex items-center",
+        paddings: " pl-2.5",
+        sizes: "w-full h-8.5",
+        styles: "bg-white text-gray-dim font-pretendard-bold text-sm",
+    };
+    const body = {
+        sizes: "w-full h-36.5",
+        paddings: "py-1.25",
+        background: "bg-gray-light",
+        styles: "overflow-y-scroll",
+    };
+    const contentBox = {
+        paddings: "px-2.5 py-1.25",
+        fonts: "text-xs",
+    };
+    const transitions = useTransition(isVisible, {
+        from: { opacity: 0 },
+        enter: { opacity: 1 },
+        leave: { opacity: 0 },
+        config: { duration: 200 },
+    });
+    return transitions((styles, item) => item && (_jsxs(animated.div, { style: styles, className: cn(container), children: [_jsx("div", { className: cn(headerBox), children: "\uC0C8 \uC54C\uB9BC" }), _jsx("div", { className: cn(body), children: notifications.map(({ id, script, link }) => (_jsx("div", { onClick: () => {
+                        link && window.open(link, "_blank");
+                    }, className: cn(contentBox, link ? "cursor-pointer" : ""), children: script }, id))) })] })));
+}

package/package.json

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

package/tailwind.config.ts

@@ -89,6 +89,7 @@ export default {
         "sun-calc": "calc(50% - 6rem)",
         0.5: "0.125rem",
         1: "0.25rem",
+        1.25: "0.3125rem",
         2.5: "0.625rem",
         3.5: "0.875rem",
         3.75: "0.9375rem",
@@ -103,6 +104,7 @@ export default {
         7: "1.75rem",
         7.5: "1.875rem",
         8: "2rem",
+        8.5: "2.125rem",
         9: "2.25rem",
         9.25: "2.3125rem",
         9.5: "2.375rem",
@@ -141,6 +143,7 @@ export default {
         30: "7.5rem",
         34: "8.5rem",
         36: "9rem",
+        36.5: "9.125rem",
         36.75: "9.1875rem",
         38: "9.5rem",
         40: "10rem",

package/version.txt

@@ -1 +1 @@
-1.0.31
+1.0.32