@edu-tosel/design 1.0.364 → 1.0.365

package/layout/template/home/NewsPaper.js

@@ -114,7 +114,7 @@ function Banner({ onClick, image, option }) {
     //adjust the card size
     const card = {
         graphics: "shadow-main",
-        sizes: "w-65 h-40 xxxs:w-76 xxxs:h-47.5 md:w-120 md:h-75 rounded-xl md:rounded-2xl",
+        sizes: "w-52 h-28 xxxs:w-60 xxxs:h-36 md:w-88 md:h-56 rounded-xl md:rounded-2xl",
         backgrounds: background,
         hover: "hover:shadow-main-hover hover:scale-[1.03]",
         position: "xl:translate-x-[calc(50vw-665px)] md:translate-x-[56px]",

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

@@ -3,7 +3,9 @@ export default function Session({ sessions, }: {
         label: string;
         title: string;
         content: string;
-        background: string;
+        background?: string;
+        backgroundImage?: string;
+        textColor?: string;
         onClick: () => void;
     }[];
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/Session.js

@@ -4,7 +4,7 @@ export default function Session({ sessions, }) {
     const container = {
         displays: "flex flex-col md:flex-row justify-center items-stretch",
         sizes: "w-full max-w-7xl mx-auto",
-        spacings: "px-5 md:px-0 mt-4 md:mt-8 mb-6 md:mb-8 gap-4 md:gap-6",
+        spacings: "px-5 md:px-0 mt-4 md:mt-8 mb-6 md:mb-8 gap-2 md:gap-4",
     };
     const card = {
         displays: "flex flex-col relative group cursor-pointer",
@@ -19,20 +19,31 @@ export default function Session({ sessions, }) {
         sizes: "w-full",
         spacings: "mb-4",
     };
-    const labelStyle = {
-        fonts: "text-base md:text-lg font-bold text-black",
-    };
-    const iconStyle = {
-        displays: "flex justify-center items-center",
-        sizes: "w-6 h-6",
-        fonts: "text-black",
-    };
-    const titleStyle = {
-        fonts: "text-xl md:text-2xl lg:text-3xl font-bold text-black",
-        spacings: "mb-3",
-    };
-    const contentStyle = {
-        fonts: "text-sm md:text-base text-black leading-relaxed",
-    };
-    return (_jsx("div", { className: cn(container), children: sessions.map((session, index) => (_jsxs("div", { onClick: session.onClick, className: cn(card, session.background), children: [_jsxs("div", { className: cn(header), children: [_jsx("div", { className: cn(labelStyle), children: session.label }), _jsx("div", { className: cn(iconStyle), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M7 17L17 7M7 7h10v10" }) }) })] }), _jsx("div", { className: cn(titleStyle), children: session.title }), _jsx("div", { className: cn(contentStyle), children: session.content })] }, index))) }));
+    return (_jsx("div", { className: cn(container), children: sessions.map((session, index) => {
+            const textColor = session.textColor || "text-black";
+            const labelStyle = {
+                fonts: `text-base md:text-lg font-bold ${textColor}`,
+            };
+            const iconStyle = {
+                displays: "flex justify-center items-center",
+                sizes: "w-6 h-6",
+                fonts: textColor,
+            };
+            const titleStyle = {
+                fonts: `text-xl md:text-2xl lg:text-3xl font-bold ${textColor}`,
+                spacings: "mb-3",
+            };
+            const contentStyle = {
+                fonts: `text-sm md:text-base ${textColor} leading-relaxed`,
+            };
+            const cardStyle = session.backgroundImage
+                ? {
+                    backgroundImage: `url(${session.backgroundImage})`,
+                    backgroundSize: 'cover',
+                    backgroundPosition: 'center',
+                    backgroundRepeat: 'no-repeat',
+                }
+                : {};
+            return (_jsxs("div", { onClick: session.onClick, className: cn(card, session.background || ""), style: cardStyle, children: [_jsxs("div", { className: cn(header), children: [_jsx("div", { className: cn(labelStyle), children: session.label }), _jsx("div", { className: cn(iconStyle), children: _jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "w-5 h-5", children: _jsx("path", { d: "M7 17L17 7M7 7h10v10" }) }) })] }), _jsx("div", { className: cn(titleStyle), children: session.title }), _jsx("div", { className: cn(contentStyle), children: session.content })] }, index));
+        }) }));
 }

package/layout/template/home/layout/Carousel.js

@@ -75,7 +75,7 @@ export default function Carousel({ contents, option, }) {
     };
     const container = {
         displays: "relative flex justify-center items-center",
-        sizes: "w-full h-fit md:h-80 ml:h-100",
+        sizes: "w-full h-fit md:h-60 ml:h-80",
         textstyle: "break-keep",
         background: contents[index].option?.background,
         animations: "duration-300",
@@ -111,7 +111,7 @@ export default function Carousel({ contents, option, }) {
     };
     const buttonBoxPosition = {
         display: "absolute flex justify-center items-center md:justify-start",
-        sizes: "w-full h-fit left-0 bottom-0 z-10",
+        sizes: "w-full h-fit left-0 bottom-[-30px] z-10",
         spacings: "ml-0 md:ml-[calc(70px)] xm:ml-7.5",
     };
     const buttonBox = {

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.364
+1.0.365