@edu-tosel/design 1.0.136 → 1.0.138

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

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

package/layout/template/dashboard/Menu.js

@@ -3,7 +3,9 @@ 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, medium, bottom, }) {
+export default function Menu({ showAction, profile, 
+// input,
+medium, bottom, }) {
     const { isVisible } = showAction ?? {};
     const { setIsOwn, removeModal } = useActionStore();
     const container = {
@@ -18,7 +20,7 @@ export default function Menu({ showAction, profile, input, medium, bottom, }) {
         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" }), medium?.map((button) => (_jsx(Label.Button, { title: button.title, onClick: button.onClick, 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: [medium?.map((button) => (_jsx(Label.Button, { title: button.title, onClick: button.onClick, option: {
                             ...button.option,
                             width: "full",
                             height: "xs",

package/layout/template/home/Promotion.d.ts

@@ -1,3 +1,4 @@
+import { OnClick } from "../../../interface";
 interface PromotionOptions {
     className: string;
 }
@@ -6,6 +7,7 @@ export default function Promotion({ banners, option, }: {
     option?: Partial<PromotionOptions>;
 }): import("react/jsx-runtime").JSX.Element;
 interface BannerProps {
+    onClick?: OnClick;
     image: {
         src: string;
         location?: string;

package/layout/template/home/Promotion.js

@@ -14,7 +14,7 @@ export default function Promotion({ banners, option, }) {
                 : currentScrollLeft + scrollAmount;
             scrollContainerRef.current.scrollTo({
                 left: newScrollLeft,
-                behavior: "smooth"
+                behavior: "smooth",
             });
         }
     };
@@ -58,11 +58,11 @@ export default function Promotion({ banners, option, }) {
     const hoverButton = {
         sizes: "rounded-full w-12 h-12 scale-50 group-hover:scale-100",
         animation: "duration-300 ",
-        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500"
+        test: "bg-gray-medium/20 hover:bg-gray-medium/50 pointer-events-auto backdrop-blur-sm fill-red-500",
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uC0C8\uB85C\uC6B4 \uC18C\uC2DD" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.image.src))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
-function Banner({ image, option }) {
+function Banner({ onClick, image, option }) {
     const { background } = option ?? {};
     //ghost card snaps to the end of the viewport
     const ghostCard = {
@@ -80,13 +80,13 @@ function Banner({ image, option }) {
         position: "ml:translate-x-[calc(50vw-600px)]",
         transition: "duration-300",
         displays: "relative display-block overflow-hidden",
-        fonts: "font-pretendard-var"
+        fonts: "font-pretendard-var",
     };
     const imageWrapper = {
         sizes: "w-full h-full",
         displays: "absolute",
         positions: "bottom-0 left-0",
-        background: `bg-cover bg-center`
+        background: `bg-cover bg-center`,
     };
-    return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
+    return (_jsx("div", { className: cn(ghostCard), children: _jsx("div", { className: cn(card), onClick: onClick, children: _jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }) }) }));
 }

package/layout/template/home/Service.d.ts

@@ -1,9 +1,10 @@
-import { Titles } from "../../../interface";
+import { OnClick, Titles } from "../../../interface";
 export default function Service({ banners }: {
     banners: BannerProps[];
 }): import("react/jsx-runtime").JSX.Element;
 interface BannerProps {
     titles: Titles;
+    onClick?: OnClick;
     image?: {
         src: string;
         isBlur?: boolean;

package/layout/template/home/Service.js

@@ -48,7 +48,7 @@ export default function Service({ banners }) {
         spacings: "gap-5 ml:mr-[calc(100vw-1200px)]",
     };
     const buttonPositioning = {
-        displays: "hidden flex-row md:flex",
+        displays: "overflow-x-hidden flex-row md:flex",
         sizes: "w-full h-full",
         spacings: "px-2",
         positions: "absolute top-0 left-0 justify-between items-center opacity-0 group-hover:opacity-100 duration-300",
@@ -61,7 +61,7 @@ export default function Service({ banners }) {
     };
     return (_jsxs("div", { className: cn(container), children: [_jsx("div", { className: cn(deckTitlePositioning), children: _jsx("div", { className: cn(deckTitle), children: "\uD1A0\uC140\uC758 \uCC28\uBCC4\uD654\uB41C \uC11C\uBE44\uC2A4" }) }), _jsx("div", { className: cn(cardPositioning), children: _jsx("div", { className: cn(cardWrapper), ref: scrollContainerRef, children: _jsx("div", { className: cn(cardDeck), children: banners.map((banner) => (_jsx(Banner, { ...banner }, banner.titles.title))) }) }) }), _jsxs("div", { className: cn(buttonPositioning), children: [_jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("left"), children: _jsx("img", { src: "images/home/handle-left.svg", alt: "" }) }), _jsx("div", { className: cn(hoverButton), onClick: () => handleScroll("right"), children: _jsx("img", { src: "images/home/handle-right.svg", alt: "" }) })] })] }));
 }
-function Banner({ titles, image, option }) {
+function Banner({ titles, onClick, image, option }) {
     const { background } = option ?? {};
     //ghost card snaps to the end of the viewport
     const ghostCard = {
@@ -102,5 +102,5 @@ function Banner({ titles, image, option }) {
         positions: "bottom-0 left-0",
         background: `bg-cover bg-center`,
     };
-    return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
+    return (_jsx("div", { className: cn(ghostCard), children: _jsxs("div", { className: cn(card), onClick: onClick, children: [_jsx("div", { className: cn(imageWrapper), style: { backgroundImage: `url(${image?.src})` } }), _jsxs("div", { className: cn(titleBox.container), children: [_jsx("div", { className: cn(titleBox.subtitle), children: titles.subtitle }), _jsx("div", { className: cn(titleBox.title), children: titles.title })] })] }) }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.136
+1.0.138