@edu-tosel/design 1.0.102 → 1.0.104

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

@@ -1,6 +1,8 @@
+import { OnClick } from "../../../interface";
 type Content = {
     title: string;
     date: string;
+    onClick?: OnClick;
 };
 interface ManyLayoutProps {
     contents: Content[];

package/layout/template/Announcement/Many.js

@@ -6,11 +6,12 @@ export default function Many({ contents }) {
         sizes: "w-full max-w-[1200px]",
         boundaries: "pl-12 ",
     };
-    const box = {
+    const box = (flag) => ({
         displays: "flex flex-col gap-y-2",
-        sizes: "h-25",
+        sizes: "h-25 w-full",
         boundaries: "pt-7.5 border-b-1",
         fonts: "leading-tight",
-    };
-    return (_jsx(Announcement.Layout, { children: _jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("div", { className: cn(box), children: [_jsx("div", { className: "text-[16px] text-gray-dark font-pretendard-bold", children: content.title }), _jsx("div", { className: "text-[12px] text-gray-medium", children: content.date })] }))) }) }));
+        pointers: flag ? "cursor-pointer" : "cursor-default",
+    });
+    return (_jsx(Announcement.Layout, { children: _jsx("div", { className: cn(body), children: contents.map((content) => (_jsxs("button", { onClick: content.onClick, className: cn(box(!!content.onClick)), children: [_jsx("div", { className: "text-[16px] text-gray-dark font-pretendard-bold", children: content.title }), _jsx("div", { className: "text-[12px] text-gray-medium", children: content.date })] }))) }) }));
 }

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

@@ -1 +1,10 @@
-export default function Header(): import("react/jsx-runtime").JSX.Element;
+import { ReactNode } from "react";
+import { Button as _Button, OnClick } from "../../../../interface";
+export default function Header({ logo, rightButton, contents, }: {
+    logo: {
+        node: ReactNode;
+        onClick?: OnClick;
+    };
+    rightButton?: _Button;
+    contents: _Button[];
+}): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/layout/Header.js

@@ -1,6 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { cn } from "../../../../util";
-export default function Header() {
+import { cn, gradient } from "../../../../util";
+import { Label } from "../../../../widget";
+export default function Header({ logo, rightButton, contents, }) {
     const container = {
         displays: "flex justify-center items-center",
         sizes: "w-full",
@@ -8,27 +9,18 @@ export default function Header() {
     };
     const body = {
         displays: "flex items-center justify-between",
-        className: "w-full max-w-262 h-25",
+        className: "w-full max-w-[1200px] h-15",
+        boundaries: "px-12",
     };
-    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("img", { src: "/images/logos/tosel.png", alt: "tosel-logo", width: 147, height: 31.93 }), _jsx("div", { className: "flex items-center gap-7.5", children: buttons.map((button, index) => (_jsx("div", { children: button.title }, index))) })] }) }));
+    const buttonBox = {
+        fonts: "text-[16px] leading-tight",
+        texts: "text-gray-dark",
+        boundaries: "px-2.5",
+    };
+    return (_jsx("div", { className: cn(container), children: _jsxs("div", { className: cn(body), children: [_jsx("div", { onClick: logo.onClick, children: logo.node }), _jsxs("div", { className: "flex items-center gap-x-12", children: [_jsx("div", { className: "flex items-center gap-2.5", children: contents.map((button, index) => (_jsx("button", { onClick: button.onClick, className: cn(buttonBox), children: button.title }, index))) }), rightButton && (_jsx(Label.Button, { title: rightButton.title, onClick: rightButton?.onClick, option: {
+                                width: "2xs",
+                                height: "4xs",
+                                background: gradient.bg.greenToRed,
+                                text: "text-white",
+                            } }))] })] }) }));
 }
-const buttons = [
-    {
-        title: "About Us",
-    },
-    {
-        title: "정기시험",
-    },
-    {
-        title: "교재/학습",
-    },
-    {
-        title: "LAB",
-    },
-    {
-        title: "올림피아드",
-    },
-    {
-        title: "게시판",
-    },
-];

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

@@ -1,3 +1,11 @@
-export default function Layout({ children }: {
+import { Button, OnClick } from "../../../../interface";
+import { ReactNode } from "react";
+export default function Layout({ contents, children, logo, rightButton, }: {
+    contents: Button[];
     children: React.ReactNode;
+    logo: {
+        node: ReactNode;
+        onClick?: OnClick;
+    };
+    rightButton?: Button;
 }): import("react/jsx-runtime").JSX.Element;

package/layout/template/home/layout/index.js

@@ -2,11 +2,11 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../../../util";
 import Footer from "./Footer";
 import Header from "./Header";
-export default function Layout({ children }) {
+export default function Layout({ contents, children, logo, rightButton, }) {
     const container = {
         displays: "flex flex-col",
         sizes: "w-full min-h-screen",
         overflows: "overflow-x-hidden",
     };
-    return (_jsxs("div", { className: cn(container), children: [_jsx(Header, {}), children, _jsx(Footer, {})] }));
+    return (_jsxs("div", { className: cn(container), children: [_jsx(Header, { logo: logo, rightButton: rightButton, contents: contents }), children, _jsx(Footer, {})] }));
 }

package/layout/template/sign/WithTitle.js

@@ -1,6 +1,6 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { Input } from "../../../widget";
 function WithTitle(props) {
-    return (_jsxs("div", { className: "flex flex-col gap-1", children: [_jsx("div", { className: "leading-none", children: props.title }), _jsx(Input.Form, { ...props })] }));
+    return (_jsx("div", { className: "flex flex-col gap-1", children: _jsx(Input.Form, { ...props }) }));
 }
 export default WithTitle;

package/package.json

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

package/version.txt

@@ -1 +1 @@
-1.0.102
+1.0.104

package/widget/design/Label.design.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../../util";
 import { Obstacle } from "../..";
 const widthSize = {
-    "3xs": "w-7",
-    "2xs": "w-10",
+    "4xs": "w-7",
+    "3xs": "w-10",
+    "2xs": "w-13",
     xs: "w-20",
     sm: "w-22.5",
     md: "w-45",
@@ -11,6 +12,7 @@ const widthSize = {
     full: "w-full",
 };
 const heightSize = {
+    "4xs": "h-5", // 20px
     "3xs": "h-5.5", // 22px
     "2xs": "h-6.25", // 25px
     xs: "h-7.5",
@@ -29,7 +31,10 @@ export default function LabelDesign({ title, onClick, option, hoverState, }) {
         texts: text ?? "text-gray-dim",
         animation: "duration-500",
         fonts: "font-pretendard-light",
-        styles: height === "xs" || height === "2xs" || height === "3xs"
+        styles: height === "xs" ||
+            height === "2xs" ||
+            height === "3xs" ||
+            height === "4xs"
             ? "rounded-md text-xs"
             : "rounded-lgx",
     };