@edu-tosel/design 0.1.0 → 0.1.2

package/board/index.js

@@ -40,6 +40,6 @@ export function ListBoard(_a) {
     var children = _a.children, header = _a.header, options = _a.options;
     var title = header.title, bgColor = header.bgColor, childrens = header.childrens;
     var height = (options !== null && options !== void 0 ? options : {}).height;
-    var classNames = ["pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
+    var classNames = ["scrollbar pt-8 px-12 overflow-y-scroll h-full pb-32"].join(" ");
     return (_jsx(Board, __assign({ header: { title: title, bgColor: bgColor, childrens: childrens }, options: { height: height } }, { children: _jsx("div", __assign({ className: classNames }, { children: children })) })));
 }

package/modal/index.d.ts

@@ -6,4 +6,4 @@ export declare function NoticeModal({ titles, children, buttons, close, }: {
     buttons?: [string, () => unknown | (() => Promise<unknown>)][];
     close?: () => void;
 }): import("react/jsx-runtime").JSX.Element;
-export declare function Alert(): import("react/jsx-runtime").JSX.Element;
+export declare function AlertModal(): import("react/jsx-runtime").JSX.Element;

package/modal/index.js

@@ -28,9 +28,9 @@ export function NoticeModal(_a) {
     var buttonClassNames = ["rounded-2xl bg-black px-8 py-2 text-lg font-bold text-white"].join(" ");
     return (_jsxs(Modal, { children: [_jsxs("div", __assign({ className: col(3) + "px-25 pt-18 h-full pb-12" }, { children: [_jsxs("div", __assign({ className: col(6) }, { children: [_jsx("div", __assign({ className: "text-3xl font-bold" }, { children: title })), _jsx("div", { className: "h-2 w-14 rounded-full bg-pale-lavender" }), _jsx("div", __assign({ className: "text-xl font-bold" }, { children: subTitle }))] })), _jsx("div", { children: children }), buttons ? (_jsx("div", __assign({ className: "mt-auto flex justify-end gap-4" }, { children: buttons.map(function (_a) {
                             var text = _a[0], onClick = _a[1];
-                            return (_jsx("button", __assign({ className: buttonClassNames, onClick: onClick }, { children: text })));
+                            return (_jsx("button", __assign({ className: buttonClassNames, onClick: onClick }, { children: text }), text));
                         }) }))) : null] })), _jsx("button", { className: absolute.tl(5, 7) + "bg-black rounded-full h-9 w-9", onClick: close })] }));
 }
-export function Alert() {
+export function AlertModal() {
     return (_jsx("div", { children: _jsx("div", {}) }));
 }

package/navigation/index.d.ts

@@ -1 +1,8 @@
-export default function Navigation(): import("react/jsx-runtime").JSX.Element;
+import "../style.css";
+export default function Navigation({ contents, }: {
+    contents: {
+        title: string;
+        href: string;
+        icon: string;
+    }[];
+}): import("react/jsx-runtime").JSX.Element;

package/navigation/index.js

@@ -1,4 +1,33 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
 import { jsx as _jsx } from "react/jsx-runtime";
-export default function Navigation() {
-    return (_jsx("div", { children: _jsx("div", {}) }));
+import "../style.css";
+import { useState } from "react";
+import { center } from "../asset/display";
+export default function Navigation(_a) {
+    var contents = _a.contents;
+    var pathname = window.location.pathname;
+    var _b = useState(pathname), nowPath = _b[0], setNowPath = _b[1];
+    var bgColor = function (href) {
+        if (nowPath === href)
+            return "bg-white ";
+        return "bg-transparent ";
+    };
+    var buttonClassNames = [center.row(6), "w-50 h-11 rounded-2xl pl-5 h"].join(" ");
+    return (_jsx("div", __assign({ className: center.col() + "w-54" }, { children: contents.map(function (_a) {
+            var title = _a.title, href = _a.href;
+            return (_jsx("button", __assign({ onClick: function () {
+                    setNowPath(href);
+                    window.history.pushState({ data: href }, "", href);
+                }, className: bgColor(href) + buttonClassNames }, { children: title }), href));
+        }) })));
 }

package/package.json

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

package/style.css

@@ -2,6 +2,19 @@
 @tailwind components;
 @tailwind utilities;
 
+::-webkit-scrollbar {
+  width: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background-color: #173a8b;
+  opacity: 0.5;
+  border-radius: 10px;
+}
+
 .box-shadow {
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
-}
+}

package/tailwind.config.js

@@ -3,6 +3,9 @@ module.exports = {
   content: ["./node_modules/tw-elements/dist/js/**/*.js", "./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {
+      fontFamily: {
+        "pretendard-medium": ["pretendard-medium"],
+      },
       screens: {
         xxxs: "332px",
         xxs: "393px",
@@ -41,9 +44,44 @@ module.exports = {
         "hj-blue": "#385EAB",
         "hj-blue-light": "#A8BFE5",
       },
+      width: {
+        "2/3": "66.6666667%",
+        "1/7": "14.2857143%",
+        "2/7": "28.5714286%",
+        "3/7": "42.8571429%",
+        "4/7": "57.1428571%",
+        "1/8": "12.5%",
+        "3/10": "30%",
+        "1/10": "10%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+        "12/100": "12%",
+        "15/100": "15%",
+        "35/100": "35%",
+        "45/100": "45%",
+        "55/100": "55%",
+        "65/100": "65%",
+        "85/100": "85%",
+        176: "44rem",
+        478: "478px",
+      },
+      height: {
+        "4/7": "57.1428571%",
+        "3/7": "42.8571429%",
+        "5/12": "41.6666667%",
+        "1/10": "10%",
+        "3/10": "30%",
+        "4/10": "40%",
+        "6/10": "60%",
+        "7/10": "70%",
+        "9/10": "90%",
+      },
       spacing: {
         1: "0.25rem",
         7: "1.75rem",
+        11: "2.75rem",
         12: "3rem",
         15: "3.75rem",
         18: "4.5rem",
@@ -92,6 +130,9 @@ module.exports = {
         144: "36rem",
         148: "37rem",
         160: "40rem",
+        164: "41rem",
+        168: "42rem",
+        172: "43rem",
         176: "44rem",
         180: "45rem",
         182: "45.5rem",
@@ -107,6 +148,44 @@ module.exports = {
         260: "65rem",
         272: "68rem",
         280: "70rem",
+        288: "72rem",
+        300: "75rem",
+        312: "78rem",
+        320: "80rem",
+        360: "90rem",
+        386: "96.5rem",
+        480: "120rem",
+        520: "140rem",
+      },
+      backgroundSize: {
+        auto: "auto",
+        cover: "cover",
+        contain: "contain",
+        16: "4rem",
+        64: "16rem",
+        80: "20rem",
+        88: "22rem",
+        92: "23rem",
+        96: "24rem",
+        100: "25rem",
+        128: "32rem",
+      },
+      scale: {
+        101: "1.01",
+        200: "2",
+      },
+      skew: {
+        20: "20deg",
+        30: "30deg",
+        39: "39deg",
+        45: "45deg",
+        60: "60deg",
+      },
+      brightness: {
+        10: ".1",
+        20: ".2",
+        30: ".3",
+        40: ".4",
       },
     },
   },

package/text/index.js

@@ -14,5 +14,5 @@ import "../style.css";
 import { col } from "../asset/display";
 export function LineBreaks(_a) {
     var texts = _a.texts, gap = _a.gap;
-    return (_jsx("div", __assign({ className: col(gap) }, { children: texts.map(function (text) { return (_jsx("div", { children: text })); }) })));
+    return (_jsx("div", __assign({ className: col(gap) }, { children: texts.map(function (text, index) { return (_jsx("div", { children: text }, index)); }) })));
 }

package/version.txt

@@ -1 +1 @@
-0.1.0
+0.1.2