@edu-tosel/design 1.0.293 → 1.0.295

package/layout/template/Announcement/One.d.ts

@@ -1,7 +1,9 @@
+import { Button as _Button } from "../../../interface";
 interface OneLayoutProps {
     title: string;
     date: string;
     content: string;
+    button?: _Button;
 }
-export default function One({ title, date, content }: OneLayoutProps): import("react/jsx-runtime").JSX.Element;
+export default function One({ title, date, content, button }: OneLayoutProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/layout/template/Announcement/One.js

@@ -1,9 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn, isHTMLString } from "../../../util";
-export default function One({ title, date, content }) {
+import { Label } from "../../../widget";
+export default function One({ title, date, content, button }) {
     const body = {
         sizes: "w-full max-w-[1200px]",
-        boundaries: "pl-12 ",
+        boundaries: "pb-8 px-3.5 md:pl-12  md:pr-0",
     };
     const titleBox = {
         sizes: "w-full h-30",
@@ -13,5 +14,10 @@ export default function One({ title, date, content }) {
     const contentBox = {
         boundaries: "pt-12",
     };
-    return (_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-[24px] font-pretendard-bold", children: title }), _jsx("div", { className: "text-gray-medium", children: date })] }), isHTMLString(content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content }, className: cn(contentBox) })) : (_jsx("div", { className: cn(contentBox), children: content }))] }));
+    return (_jsxs("div", { className: cn(body), children: [_jsxs("div", { className: cn(titleBox), children: [_jsx("div", { className: "text-[24px] font-pretendard-bold", children: title }), _jsx("div", { className: "text-gray-medium", children: date })] }), isHTMLString(content) ? (_jsx("div", { dangerouslySetInnerHTML: { __html: content }, className: cn(contentBox) })) : (_jsx("div", { className: cn(contentBox), children: content })), _jsx("div", { className: "pt-6", children: button && (_jsx(Label.Button, { ...button, option: {
+                        width: "full",
+                        height: "lg",
+                        background: "bg-green-dark",
+                        text: "text-white",
+                    } })) })] }));
 }

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.293
+1.0.295

package/widget/design/Label.design.js

@@ -19,6 +19,7 @@ const heightSize = {
     sm: "h-11.25",
     md: "h-12.25",
     lg: "h-[45px]",
+    xl: "h-[50px]",
 };
 export default function LabelDesign({ title, onClick, disabled, option, hoverState, }) {
     const [hover, setHover] = hoverState ?? [false, () => { }];

package/widget/index.d.ts

@@ -10,3 +10,4 @@ export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
 export { default as Obstacle } from "./template/Obstacle";
 export { default as Pagination } from "./template/Pagination";
+export { default as SelectRoll } from "./template/SelectRoll";

package/widget/index.js

@@ -10,3 +10,4 @@ export { default as Switch } from "./template/Switch";
 export { default as Toggle } from "./template/Toggle";
 export { default as Obstacle } from "./template/Obstacle";
 export { default as Pagination } from "./template/Pagination";
+export { default as SelectRoll } from "./template/SelectRoll";

package/widget/template/SelectRoll.d.ts

@@ -0,0 +1,15 @@
+interface SelectRollOption {
+    key: string;
+    value: string;
+    option?: {
+        background?: string;
+        text?: string;
+    };
+}
+interface SelectRollProps {
+    options: SelectRollOption[];
+    value: string;
+    onChange: (value: string) => void;
+}
+export default function SelectRoll({ options, value, onChange, }: SelectRollProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/widget/template/SelectRoll.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// /Users/design/Documents/GitHub/design/src/widget/template/SelectRoll.tsx
+import { useState } from "react";
+import { cn } from "../../util";
+export default function SelectRoll({ options, value, onChange, }) {
+    const [isHover, setIsHover] = useState(false);
+    const currentIndex = options.findIndex((option) => option.key === value);
+    const handlePrev = () => {
+        if (currentIndex > 0) {
+            onChange(options[currentIndex - 1].key);
+        }
+    };
+    const handleNext = () => {
+        if (currentIndex < options.length - 1) {
+            onChange(options[currentIndex + 1].key);
+        }
+    };
+    const currentOption = options[currentIndex];
+    const container = {
+        styles: "group cursor-default",
+        displays: "flex justify-center",
+        sizes: "w-[120px]",
+    };
+    const body = {
+        positions: "relative",
+        displays: "flex justify-center items-center",
+        backgrounds: currentOption?.option?.background || "bg-gray-100",
+        texts: currentOption?.option?.text || "text-black",
+        sizes: "w-[120px] h-[30px]",
+        transitions: "duration-300",
+        hoverAct: isHover ? "w-[120px]" : "w-[100px]",
+        fonts: "text-[12px]",
+        styles: "rounded-[6px] leading-none overflow-hidden",
+    };
+    const toggle = {
+        positions: "absolute",
+        displays: "flex justify-center items-center",
+        sizes: "w-[20px] h-full",
+        styles: "duration-300 text-gray-dark",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), onMouseLeave: () => setIsHover(false), onMouseEnter: () => setIsHover(true), children: [currentOption?.value, _jsx("button", { onClick: handlePrev, className: cn(toggle, "-left-4 group-hover:left-1"), children: "-" }), _jsx("button", { onClick: handleNext, className: cn(toggle, "-right-4 group-hover:right-1"), children: "+" })] }) }));
+}