@edu-tosel/design 1.0.348 → 1.0.349

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

@@ -4,6 +4,12 @@ type ShortcutContent = {
     label?: string;
     title?: string;
     content?: string;
+    button?: {
+        text: string;
+        option?: string;
+        align?: "left" | "center" | "right";
+        onClick?: () => void;
+    };
 };
 export default function ShortcutBanner({ shortcuts, }: {
     shortcuts: (Button & {

package/layout/template/home/Shortcut.js

@@ -51,7 +51,6 @@ function ScrollMode({ shortcuts, selectedIndex, setSelectedIndex, }) {
     };
     return (_jsx("div", { className: cn(scrollWrapper), children: _jsx("div", { className: cn(buttonWrapper), children: shortcuts.map((shortcut, index) => (_jsxs("button", { onClick: () => {
                     setSelectedIndex(index);
-                    shortcut.onClick?.();
                 }, className: cn(buttonSet, selectedIndex === index ? "border-b-[3px] border-black" : ""), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }) }));
 }
 function GridMode({ shortcuts, selectedIndex, setSelectedIndex, }) {
@@ -90,7 +89,6 @@ function GridMode({ shortcuts, selectedIndex, setSelectedIndex, }) {
     };
     return (_jsx("div", { className: cn(container), children: _jsx("div", { className: cn(gridWrapper), children: shortcuts.map((shortcut, index) => (_jsxs("button", { onClick: () => {
                     setSelectedIndex(index);
-                    shortcut.onClick?.();
                 }, className: cn(buttonSet, selectedIndex === index ? "border-b-[3px] border-black" : ""), children: [_jsx("div", { className: cn(iconContainer, shortcut.background ?? "bg-gray-100"), children: _jsx("img", { src: shortcut.icon, alt: shortcut.title }) }), _jsx("div", { className: cn(tagBox), children: shortcut.title })] }, shortcut.title))) }) }));
 }
 function ShortcutContent({ content }) {
@@ -129,7 +127,18 @@ function ShortcutContent({ content }) {
     const contentStyle = {
         fonts: "text-base md:text-lg text-gray-600 leading-relaxed",
     };
-    return (_jsxs("div", { className: cn(container), children: [content.image && (_jsx("div", { className: cn(imageContainer), children: _jsx("img", { src: content.image, alt: content.title || "Content image", className: "w-full h-auto object-contain" }) })), _jsxs("div", { className: cn(textContainer), children: [content.label && (_jsx("div", { className: cn(labelStyle), children: content.label })), content.title && (_jsx("div", { className: cn(titleStyle), children: content.title })), content.content && (_jsx("div", { className: cn(contentStyle), children: content.content }))] })] }));
+    const getButtonAlignClass = (align) => {
+        switch (align) {
+            case "left":
+                return "justify-start";
+            case "right":
+                return "justify-end";
+            case "center":
+            default:
+                return "justify-center";
+        }
+    };
+    return (_jsxs("div", { className: cn(container), children: [content.image && (_jsx("div", { className: cn(imageContainer), children: _jsx("img", { src: content.image, alt: content.title || "Content image", className: "w-full h-auto object-contain" }) })), _jsxs("div", { className: cn(textContainer), children: [content.label && (_jsx("div", { className: cn(labelStyle), children: content.label })), content.title && (_jsx("div", { className: cn(titleStyle), children: content.title })), content.content && (_jsx("div", { className: cn(contentStyle), children: content.content })), content.button && (_jsx("div", { className: `flex ${getButtonAlignClass(content.button.align)}`, children: _jsx("button", { onClick: content.button.onClick, className: content.button.option || "px-6 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", children: content.button.text }) }))] })] }));
 }
 function ModeToggle({ state, selectOptions: selectOptionsInput, option, }) {
     const selectOptions = selectOptionsInput?.map(toSelectOption);

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.348
+1.0.349