@local-civics/hub-ui 0.1.54 → 0.1.55
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.js +331 -331
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +200 -200
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
'use strict';
|
|
2
2
|
|
|
3
|
-
var React
|
|
3
|
+
var React = require('react');
|
|
4
4
|
var LinkifyIt = require('linkify-it');
|
|
5
5
|
var reactStringReplace = require('react-string-replace');
|
|
6
6
|
|
|
@@ -21,7 +21,7 @@ function _interopNamespaceDefault(e) {
|
|
|
21
21
|
return Object.freeze(n);
|
|
22
22
|
}
|
|
23
23
|
|
|
24
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React
|
|
24
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
25
25
|
|
|
26
26
|
function styleInject(css, ref) {
|
|
27
27
|
if ( ref === void 0 ) ref = {};
|
|
@@ -973,23 +973,23 @@ const Icon$1 = (props) => {
|
|
|
973
973
|
if (!contents) {
|
|
974
974
|
return null;
|
|
975
975
|
}
|
|
976
|
-
return /* @__PURE__ */ React
|
|
976
|
+
return /* @__PURE__ */ React.createElement(
|
|
977
977
|
"svg",
|
|
978
978
|
{
|
|
979
979
|
className: "fill-current stroke-current w-full h-full drop-shadow-[inherit]",
|
|
980
980
|
xmlns: "http://www.w3.org/2000/svg",
|
|
981
981
|
viewBox
|
|
982
982
|
},
|
|
983
|
-
/* @__PURE__ */ React
|
|
983
|
+
/* @__PURE__ */ React.createElement("title", null, props.name),
|
|
984
984
|
contents.map((v, k) => {
|
|
985
|
-
return v.d && /* @__PURE__ */ React
|
|
985
|
+
return v.d && /* @__PURE__ */ React.createElement("path", __spreadValues$g({ key: k }, v));
|
|
986
986
|
}),
|
|
987
|
-
contents.map((v, k) => v.r && /* @__PURE__ */ React
|
|
987
|
+
contents.map((v, k) => v.r && /* @__PURE__ */ React.createElement("circle", __spreadValues$g({ key: k }, v)))
|
|
988
988
|
);
|
|
989
989
|
};
|
|
990
990
|
|
|
991
991
|
const Logo = () => {
|
|
992
|
-
return /* @__PURE__ */ React
|
|
992
|
+
return /* @__PURE__ */ React.createElement(
|
|
993
993
|
"img",
|
|
994
994
|
{
|
|
995
995
|
className: "w-full overflow-hidden object-contain",
|
|
@@ -1010,7 +1010,7 @@ const Button = (props) => {
|
|
|
1010
1010
|
withBorder(config, props.border);
|
|
1011
1011
|
withSpacing(config, props.spacing, props.wide);
|
|
1012
1012
|
const onClick = () => !props.active && !props.disabled && props.onClick && props.onClick();
|
|
1013
|
-
return /* @__PURE__ */ React
|
|
1013
|
+
return /* @__PURE__ */ React.createElement("button", { disabled: props.disabled, type: props.type, className: classname(config.button), onClick }, props.icon && /* @__PURE__ */ React.createElement("span", { className: classname(config.icon) }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.icon })), props.logo && /* @__PURE__ */ React.createElement("span", { className: classname(config.logo) }, /* @__PURE__ */ React.createElement(Logo, null)), (props.text || props.footer) && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 justify-items-start gap-4" }, props.text && /* @__PURE__ */ React.createElement("div", { className: "text-left" }, props.text), props.footer && /* @__PURE__ */ React.createElement("div", { className: "text-[0.5rem] font-semibold" }, props.footer)));
|
|
1014
1014
|
};
|
|
1015
1015
|
const defaultConfig$1 = () => {
|
|
1016
1016
|
const config = {
|
|
@@ -1392,7 +1392,7 @@ const Loader = (props) => {
|
|
|
1392
1392
|
const loaderClassName = builder("flex absolute top-0 left-0 h-full w-full m-auto transition ease-in-out duration-500").if(!!props.isLoading, "visible opacity-full").else("invisible opacity-0").build();
|
|
1393
1393
|
const contentClassName = builder("w-full transition ease-in-out duration-500").if(!!props.isLoading, "invisible opacity-0").else("visible opacity-full").build();
|
|
1394
1394
|
const containerClassName = builder("my-auto").if(!!props.isLoading, "relative").build();
|
|
1395
|
-
return /* @__PURE__ */ React
|
|
1395
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: containerClassName }, /* @__PURE__ */ React.createElement("div", { className: loaderClassName }, /* @__PURE__ */ React.createElement(
|
|
1396
1396
|
"svg",
|
|
1397
1397
|
{
|
|
1398
1398
|
className: "m-auto stroke-sky-300",
|
|
@@ -1401,7 +1401,7 @@ const Loader = (props) => {
|
|
|
1401
1401
|
viewBox: "0 0 45 45",
|
|
1402
1402
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1403
1403
|
},
|
|
1404
|
-
/* @__PURE__ */ React
|
|
1404
|
+
/* @__PURE__ */ React.createElement("g", { fill: "none", fillRule: "evenodd", transform: "translate(1 1)", strokeWidth: "2" }, /* @__PURE__ */ React.createElement("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0" }, /* @__PURE__ */ React.createElement(
|
|
1405
1405
|
"animate",
|
|
1406
1406
|
{
|
|
1407
1407
|
attributeName: "r",
|
|
@@ -1411,7 +1411,7 @@ const Loader = (props) => {
|
|
|
1411
1411
|
calcMode: "linear",
|
|
1412
1412
|
repeatCount: "indefinite"
|
|
1413
1413
|
}
|
|
1414
|
-
), /* @__PURE__ */ React
|
|
1414
|
+
), /* @__PURE__ */ React.createElement(
|
|
1415
1415
|
"animate",
|
|
1416
1416
|
{
|
|
1417
1417
|
attributeName: "stroke-opacity",
|
|
@@ -1421,7 +1421,7 @@ const Loader = (props) => {
|
|
|
1421
1421
|
calcMode: "linear",
|
|
1422
1422
|
repeatCount: "indefinite"
|
|
1423
1423
|
}
|
|
1424
|
-
), /* @__PURE__ */ React
|
|
1424
|
+
), /* @__PURE__ */ React.createElement(
|
|
1425
1425
|
"animate",
|
|
1426
1426
|
{
|
|
1427
1427
|
attributeName: "stroke-width",
|
|
@@ -1431,7 +1431,7 @@ const Loader = (props) => {
|
|
|
1431
1431
|
calcMode: "linear",
|
|
1432
1432
|
repeatCount: "indefinite"
|
|
1433
1433
|
}
|
|
1434
|
-
)), /* @__PURE__ */ React
|
|
1434
|
+
)), /* @__PURE__ */ React.createElement("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0" }, /* @__PURE__ */ React.createElement(
|
|
1435
1435
|
"animate",
|
|
1436
1436
|
{
|
|
1437
1437
|
attributeName: "r",
|
|
@@ -1441,7 +1441,7 @@ const Loader = (props) => {
|
|
|
1441
1441
|
calcMode: "linear",
|
|
1442
1442
|
repeatCount: "indefinite"
|
|
1443
1443
|
}
|
|
1444
|
-
), /* @__PURE__ */ React
|
|
1444
|
+
), /* @__PURE__ */ React.createElement(
|
|
1445
1445
|
"animate",
|
|
1446
1446
|
{
|
|
1447
1447
|
attributeName: "stroke-opacity",
|
|
@@ -1451,7 +1451,7 @@ const Loader = (props) => {
|
|
|
1451
1451
|
calcMode: "linear",
|
|
1452
1452
|
repeatCount: "indefinite"
|
|
1453
1453
|
}
|
|
1454
|
-
), /* @__PURE__ */ React
|
|
1454
|
+
), /* @__PURE__ */ React.createElement(
|
|
1455
1455
|
"animate",
|
|
1456
1456
|
{
|
|
1457
1457
|
attributeName: "stroke-width",
|
|
@@ -1461,7 +1461,7 @@ const Loader = (props) => {
|
|
|
1461
1461
|
calcMode: "linear",
|
|
1462
1462
|
repeatCount: "indefinite"
|
|
1463
1463
|
}
|
|
1464
|
-
)), /* @__PURE__ */ React
|
|
1464
|
+
)), /* @__PURE__ */ React.createElement("circle", { cx: "22", cy: "22", r: "8" }, /* @__PURE__ */ React.createElement(
|
|
1465
1465
|
"animate",
|
|
1466
1466
|
{
|
|
1467
1467
|
attributeName: "r",
|
|
@@ -1472,7 +1472,7 @@ const Loader = (props) => {
|
|
|
1472
1472
|
repeatCount: "indefinite"
|
|
1473
1473
|
}
|
|
1474
1474
|
)))
|
|
1475
|
-
)), /* @__PURE__ */ React
|
|
1475
|
+
)), /* @__PURE__ */ React.createElement("div", { className: contentClassName }, props.children)));
|
|
1476
1476
|
};
|
|
1477
1477
|
|
|
1478
1478
|
const Modal = (props) => {
|
|
@@ -1483,7 +1483,7 @@ const Modal = (props) => {
|
|
|
1483
1483
|
props.onClose();
|
|
1484
1484
|
}
|
|
1485
1485
|
};
|
|
1486
|
-
return /* @__PURE__ */ React
|
|
1486
|
+
return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: contentClassName }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-y-2" }, !props.isLoading && props.onClose && /* @__PURE__ */ React.createElement("div", { className: "justify-self-end mx-2 mt-2 z-30" }, /* @__PURE__ */ React.createElement(Button, { size: "xs", filter: "none", icon: "menu-close", onClick: close })), /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, props.children))));
|
|
1487
1487
|
};
|
|
1488
1488
|
|
|
1489
1489
|
const ActivityCard = (props) => {
|
|
@@ -1494,7 +1494,7 @@ const ActivityCard = (props) => {
|
|
|
1494
1494
|
const status = inProgress ? "in-progress" : props.isBookmarked ? "subscribed" : "unsubscribed";
|
|
1495
1495
|
switch (status) {
|
|
1496
1496
|
case "in-progress":
|
|
1497
|
-
return /* @__PURE__ */ React
|
|
1497
|
+
return /* @__PURE__ */ React.createElement(
|
|
1498
1498
|
Button,
|
|
1499
1499
|
{
|
|
1500
1500
|
onClick: props.onLaunch,
|
|
@@ -1507,7 +1507,7 @@ const ActivityCard = (props) => {
|
|
|
1507
1507
|
}
|
|
1508
1508
|
);
|
|
1509
1509
|
case "unsubscribed":
|
|
1510
|
-
return /* @__PURE__ */ React
|
|
1510
|
+
return /* @__PURE__ */ React.createElement(
|
|
1511
1511
|
Button,
|
|
1512
1512
|
{
|
|
1513
1513
|
onClick: props.onRegister,
|
|
@@ -1520,7 +1520,7 @@ const ActivityCard = (props) => {
|
|
|
1520
1520
|
}
|
|
1521
1521
|
);
|
|
1522
1522
|
case "subscribed":
|
|
1523
|
-
return /* @__PURE__ */ React
|
|
1523
|
+
return /* @__PURE__ */ React.createElement(
|
|
1524
1524
|
Button,
|
|
1525
1525
|
{
|
|
1526
1526
|
onClick: props.onUnregister,
|
|
@@ -1534,7 +1534,7 @@ const ActivityCard = (props) => {
|
|
|
1534
1534
|
);
|
|
1535
1535
|
}
|
|
1536
1536
|
};
|
|
1537
|
-
return /* @__PURE__ */ React
|
|
1537
|
+
return /* @__PURE__ */ React.createElement(Modal, { onClose: props.onClose, visible: true, isLoading: !props.headline }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("img", { className: "w-full h-60 object-cover", alt: props.headline, src: props.imageURL }), /* @__PURE__ */ React.createElement("div", { className: "w-full grid grid-cols-1 gap-2 sm:flex sm:place-content-between p-5 border-b border-gray-200" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start grow md:max-w-[22rem]" }, /* @__PURE__ */ React.createElement("div", { className: "inline-block min-w-6 w-6 h-6 text-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.pathway || "explore" })), /* @__PURE__ */ React.createElement("div", { className: "grow align-top ml-2 inline-block leading-none" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold capitalize text-slate-600 text-lg -mt-1.5" }, props.headline), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-sm inline-block capitalize text-slate-600" }, props.pathway), props.xp && /* @__PURE__ */ React.createElement("p", { className: "ml-1 font-semibold inline-block text-sm text-green-500" }, props.xp, " pts")))), /* @__PURE__ */ React.createElement("div", { className: "flex shrink-0 items-center gap-2 max-h-[12rem]" }, /* @__PURE__ */ React.createElement(ActionButton, null), !props.formId && /* @__PURE__ */ React.createElement(
|
|
1538
1538
|
Button,
|
|
1539
1539
|
{
|
|
1540
1540
|
disabled: !props.canReflect,
|
|
@@ -1546,8 +1546,8 @@ const ActivityCard = (props) => {
|
|
|
1546
1546
|
size: "md",
|
|
1547
1547
|
onClick: props.onReflect
|
|
1548
1548
|
}
|
|
1549
|
-
))), /* @__PURE__ */ React
|
|
1550
|
-
return /* @__PURE__ */ React
|
|
1549
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "w-full max-h-[20rem] overflow-auto" }, /* @__PURE__ */ React.createElement("div", { className: "w-full p-5 border-b border-gray-200 grid grid-cols-1 gap-4" }, props.summary && /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-lg" }, "Summary"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, props.summary)), props.skills && props.skills.length > 0 && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "text-slate-600 font-semibold text-lg" }, "Skills"), /* @__PURE__ */ React.createElement("div", { className: "flex gap-2" }, props.skills.map((skill, i) => {
|
|
1550
|
+
return /* @__PURE__ */ React.createElement(
|
|
1551
1551
|
"button",
|
|
1552
1552
|
{
|
|
1553
1553
|
onClick: () => props.onSkillClick && props.onSkillClick(skill),
|
|
@@ -1556,14 +1556,14 @@ const ActivityCard = (props) => {
|
|
|
1556
1556
|
},
|
|
1557
1557
|
skill
|
|
1558
1558
|
);
|
|
1559
|
-
})))), /* @__PURE__ */ React
|
|
1559
|
+
})))), /* @__PURE__ */ React.createElement("div", { className: "w-full p-5 border-b border-gray-200 grid grid-cols-1 gap-4" }, (props.address || props.link || props.startTime) && /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-lg" }, "Details"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-8" }, props.address && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grow-0 w-6 h-6 min-w-6 text-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "pin" })), /* @__PURE__ */ React.createElement("div", { className: "grow font-medium inline-block capitalize px-4 py-2 text-sm text-slate-600" }, props.address)), props.startTime && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grow-0 w-6 h-6 min-w-6 text-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "clock" })), /* @__PURE__ */ React.createElement("div", { className: "grow font-medium inline-block px-4 py-2 text-sm text-slate-600" }, new Intl.DateTimeFormat("en-US", {
|
|
1560
1560
|
dateStyle: "full",
|
|
1561
1561
|
timeStyle: "long"
|
|
1562
|
-
}).format(new Date(props.startTime)))), props.link && /* @__PURE__ */ React
|
|
1562
|
+
}).format(new Date(props.startTime)))), props.link && /* @__PURE__ */ React.createElement("div", { className: "flex gap-1 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grow-0 w-6 h-6 min-w-6 text-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "globe" })), /* @__PURE__ */ React.createElement("div", { className: "grow font-medium inline-block px-4 py-2 text-sm text-slate-600 hover:underline" }, /* @__PURE__ */ React.createElement("a", { href: props.link }, props.link)))))))));
|
|
1563
1563
|
};
|
|
1564
1564
|
|
|
1565
1565
|
const ActivityItem = (props) => {
|
|
1566
|
-
return /* @__PURE__ */
|
|
1566
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { onClick: props.onClick, className: "grow cursor-pointer relative rounded-md min-w-64 h-[22rem] overflow-hidden" }, /* @__PURE__ */ React__namespace.createElement("img", { className: "h-full w-full object-cover", alt: props.headline, src: props.imageURL }), /* @__PURE__ */ React__namespace.createElement("div", { className: "absolute bottom-0 w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "p-5 bg-gray-800/75 w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-bold text-white w-full" }, props.headline), /* @__PURE__ */ React__namespace.createElement("div", { className: "mt-2 flex items-center gap-x-2 w-full" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "flex-shrink-0 w-6 h-6 text-white fill-white" }, /* @__PURE__ */ React__namespace.createElement(Icon$1, { name: props.pathway || "globe" })), props.pathway && /* @__PURE__ */ React__namespace.createElement("span", { className: "grow" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "text-sm font-medium capitalize text-white w-full" }, props.pathway)), props.xp && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-slate-600 shadow-md whitespace-nowrap font-bold rounded-md text-sm px-5 py-2 bg-cyan-400" }, props.xp, " pts")))));
|
|
1567
1567
|
};
|
|
1568
1568
|
|
|
1569
1569
|
var __defProp$f = Object.defineProperty;
|
|
@@ -1593,7 +1593,7 @@ const TagFilter = (props) => {
|
|
|
1593
1593
|
props.tags && props.tags.map((tag) => {
|
|
1594
1594
|
init[tag] = true;
|
|
1595
1595
|
});
|
|
1596
|
-
const [active, setActive] = React
|
|
1596
|
+
const [active, setActive] = React.useState(init);
|
|
1597
1597
|
const onTagClick = (tag) => {
|
|
1598
1598
|
if (active[tag]) {
|
|
1599
1599
|
setActive(__spreadProps$d(__spreadValues$f({}, active), { [tag]: false }));
|
|
@@ -1605,38 +1605,38 @@ const TagFilter = (props) => {
|
|
|
1605
1605
|
props.onChange && props.onChange(tags);
|
|
1606
1606
|
}
|
|
1607
1607
|
};
|
|
1608
|
-
React
|
|
1608
|
+
React.useEffect(() => {
|
|
1609
1609
|
props.tags && props.tags.map((tag) => {
|
|
1610
1610
|
init[tag] = true;
|
|
1611
1611
|
});
|
|
1612
1612
|
}, [props.tags]);
|
|
1613
|
-
return /* @__PURE__ */ React
|
|
1613
|
+
return /* @__PURE__ */ React.createElement("article", { className: "w-full" }, /* @__PURE__ */ React.createElement("div", { className: "grow p-5 shadow-sm rounded-md bg-sky-100" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-2 md:grid-cols-3" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "inline-block w-4 h-4 max-w-4 stroke-gray-600 fill-gray-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "clock" })), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-gray-600 font-semibold" }, "Duration"), /* @__PURE__ */ React.createElement("div", { className: "mt-5 grid grid-cols-2 gap-3" }, timeTags.map((tag, i) => {
|
|
1614
1614
|
const base = "cursor-pointer shadow-sm text-center font-semibold inline-block rounded-md hover:text-gray-600 hover:bg-gray-50 active:bg-gray-50 px-4 py-2 text-xs";
|
|
1615
1615
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1616
1616
|
const className = [base, bg].join(" ");
|
|
1617
|
-
return /* @__PURE__ */ React
|
|
1618
|
-
}))), /* @__PURE__ */ React
|
|
1617
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1618
|
+
}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "inline-block w-4 h-4 max-w-4 stroke-gray-600 fill-gray-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "clock" })), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-gray-600 font-semibold" }, "Skills"), /* @__PURE__ */ React.createElement("div", { className: "mt-5 grid grid-cols-2 gap-3" }, skillTags.map((tag, i) => {
|
|
1619
1619
|
const base = "cursor-pointer shadow-sm text-center font-semibold inline-block rounded-md hover:text-gray-600 hover:bg-gray-50 active:bg-gray-50 px-4 py-2 text-xs";
|
|
1620
1620
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1621
1621
|
const className = [base, bg].join(" ");
|
|
1622
|
-
return /* @__PURE__ */ React
|
|
1623
|
-
}))), /* @__PURE__ */ React
|
|
1622
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1623
|
+
}))), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("div", { className: "inline-block w-4 h-4 max-w-4 stroke-gray-600 fill-gray-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "pin" })), /* @__PURE__ */ React.createElement("span", { className: "ml-2 text-gray-600 font-semibold" }, "Format"), /* @__PURE__ */ React.createElement("div", { className: "mt-5 grid grid-cols-2 gap-3" }, formatTags.map((tag, i) => {
|
|
1624
1624
|
const base = "cursor-pointer shadow-sm text-center font-semibold inline-block rounded-md hover:text-gray-600 hover:bg-gray-50 active:bg-gray-50 px-4 py-2 text-xs";
|
|
1625
1625
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1626
1626
|
const className = [base, bg].join(" ");
|
|
1627
|
-
return /* @__PURE__ */ React
|
|
1627
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1628
1628
|
}))))));
|
|
1629
1629
|
};
|
|
1630
1630
|
|
|
1631
1631
|
const Gallery = (props) => {
|
|
1632
1632
|
const hasPrimary = !!props.primary;
|
|
1633
|
-
const hasTop = props.top && React
|
|
1634
|
-
const hasSoonest = props.soonest && React
|
|
1635
|
-
const hasMilestones = props.milestones && React
|
|
1636
|
-
const numFiltered = props.filtered ? React
|
|
1633
|
+
const hasTop = props.top && React.Children.count(props.top) > 0;
|
|
1634
|
+
const hasSoonest = props.soonest && React.Children.count(props.soonest) > 0;
|
|
1635
|
+
const hasMilestones = props.milestones && React.Children.count(props.milestones) > 0;
|
|
1636
|
+
const numFiltered = props.filtered ? React.Children.count(props.filtered) : 0;
|
|
1637
1637
|
const hasFiltered = numFiltered > 0;
|
|
1638
1638
|
const hasAny = hasPrimary || hasTop || hasSoonest || hasMilestones || hasFiltered;
|
|
1639
|
-
return /* @__PURE__ */ React
|
|
1639
|
+
return /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, (hasPrimary || hasTop) && /* @__PURE__ */ React.createElement("label", { className: "mt-5 relative block grid grid-cols-1 gap-y-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 font-semibold" }, "Trending"), hasPrimary && props.primary, hasTop && props.top), hasSoonest && /* @__PURE__ */ React.createElement("label", { className: "mt-5 relative block grid grid-cols-1 gap-y-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 font-semibold" }, "Upcoming"), props.soonest), hasMilestones && /* @__PURE__ */ React.createElement("label", { className: "mt-5 relative block grid grid-cols-1 gap-y-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 font-semibold" }, "Milestones"), props.milestones), hasFiltered && !!props.filteredCount && /* @__PURE__ */ React.createElement("label", { className: "mt-5 relative block grid grid-cols-1 gap-y-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 font-semibold" }, "Results"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 text-sm" }, " ", "We found ", props.filteredCount >= 10 ? "10+" : props.filteredCount, " ", props.filteredCount === 1 ? "activity" : "activities", "."), props.filtered), !hasAny && /* @__PURE__ */ React.createElement("label", { className: "mt-5 relative block" }, /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 font-semibold" }, "Activities"), /* @__PURE__ */ React.createElement("p", { className: "text-gray-600 mt-5 text-sm" }, "No activities found.")));
|
|
1640
1640
|
};
|
|
1641
1641
|
|
|
1642
1642
|
const debounce = (func, delay) => {
|
|
@@ -1677,18 +1677,18 @@ const ActivityList = (props) => {
|
|
|
1677
1677
|
const upcoming = props.upcoming ? props.upcoming.filter(
|
|
1678
1678
|
(a) => !topMap[a.activityId] && (!primary || primary && a.activityId !== primary.activityId)
|
|
1679
1679
|
) : props.upcoming;
|
|
1680
|
-
return /* @__PURE__ */ React
|
|
1680
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Search$1, { value: props.search, send: (search) => props.onSearch && props.onSearch(search) }), /* @__PURE__ */ React.createElement(TagFilter, { tags: props.tags, onChange: props.onTagChange }), /* @__PURE__ */ React.createElement(
|
|
1681
1681
|
Gallery,
|
|
1682
1682
|
{
|
|
1683
1683
|
isLoading: props.isLoading,
|
|
1684
|
-
primary: !props.search && primary && /* @__PURE__ */ React
|
|
1684
|
+
primary: !props.search && primary && /* @__PURE__ */ React.createElement(
|
|
1685
1685
|
ActivityItem,
|
|
1686
1686
|
__spreadProps$c(__spreadValues$e({}, primary), {
|
|
1687
1687
|
onClick: () => props.onActivityClick && props.onActivityClick(primary.activityId)
|
|
1688
1688
|
})
|
|
1689
1689
|
),
|
|
1690
|
-
top: !props.search && top && top.length > 0 && /* @__PURE__ */ React
|
|
1691
|
-
return /* @__PURE__ */ React
|
|
1690
|
+
top: !props.search && top && top.length > 0 && /* @__PURE__ */ React.createElement("article", { className: "grid grid-cols-1 md:flex gap-2 overflow-auto" }, top.map((activity) => {
|
|
1691
|
+
return /* @__PURE__ */ React.createElement(
|
|
1692
1692
|
ActivityItem,
|
|
1693
1693
|
__spreadProps$c(__spreadValues$e({
|
|
1694
1694
|
key: `${activity.activityId}`
|
|
@@ -1697,8 +1697,8 @@ const ActivityList = (props) => {
|
|
|
1697
1697
|
})
|
|
1698
1698
|
);
|
|
1699
1699
|
})),
|
|
1700
|
-
soonest: !props.search && upcoming && upcoming.length > 0 && /* @__PURE__ */ React
|
|
1701
|
-
return /* @__PURE__ */ React
|
|
1700
|
+
soonest: !props.search && upcoming && upcoming.length > 0 && /* @__PURE__ */ React.createElement("article", { className: "grid grid-cols-1 md:flex gap-2 overflow-auto" }, upcoming.map((activity) => {
|
|
1701
|
+
return /* @__PURE__ */ React.createElement(
|
|
1702
1702
|
ActivityItem,
|
|
1703
1703
|
__spreadProps$c(__spreadValues$e({
|
|
1704
1704
|
key: `${activity.activityId}`
|
|
@@ -1707,8 +1707,8 @@ const ActivityList = (props) => {
|
|
|
1707
1707
|
})
|
|
1708
1708
|
);
|
|
1709
1709
|
})),
|
|
1710
|
-
milestones: !props.search && props.milestones && props.milestones.length > 0 && /* @__PURE__ */ React
|
|
1711
|
-
return /* @__PURE__ */ React
|
|
1710
|
+
milestones: !props.search && props.milestones && props.milestones.length > 0 && /* @__PURE__ */ React.createElement("article", { className: "grid grid-cols-1 md:flex gap-2 overflow-auto" }, props.milestones.map((activity) => {
|
|
1711
|
+
return /* @__PURE__ */ React.createElement(
|
|
1712
1712
|
ActivityItem,
|
|
1713
1713
|
__spreadProps$c(__spreadValues$e({
|
|
1714
1714
|
key: `${activity.activityId}`
|
|
@@ -1718,8 +1718,8 @@ const ActivityList = (props) => {
|
|
|
1718
1718
|
);
|
|
1719
1719
|
})),
|
|
1720
1720
|
filteredCount: (_a = props.activities) == null ? void 0 : _a.length,
|
|
1721
|
-
filtered: !!props.search && props.activities && props.activities.length > 0 && /* @__PURE__ */ React
|
|
1722
|
-
return /* @__PURE__ */ React
|
|
1721
|
+
filtered: !!props.search && props.activities && props.activities.length > 0 && /* @__PURE__ */ React.createElement("article", { className: "grid grid-cols-1 md:flex gap-2 overflow-auto" }, props.activities.map((activity) => {
|
|
1722
|
+
return /* @__PURE__ */ React.createElement(
|
|
1723
1723
|
ActivityItem,
|
|
1724
1724
|
__spreadProps$c(__spreadValues$e({
|
|
1725
1725
|
key: `${activity.activityId}`
|
|
@@ -1732,8 +1732,8 @@ const ActivityList = (props) => {
|
|
|
1732
1732
|
));
|
|
1733
1733
|
};
|
|
1734
1734
|
const Search$1 = ({ send, value }) => {
|
|
1735
|
-
const handler = React
|
|
1736
|
-
return /* @__PURE__ */ React
|
|
1735
|
+
const handler = React.useCallback(debounce(send), []);
|
|
1736
|
+
return /* @__PURE__ */ React.createElement("div", { className: "foo relative block" }, /* @__PURE__ */ React.createElement("label", { className: "relative block" }, /* @__PURE__ */ React.createElement("span", { className: "absolute inset-y-0 left-0 top-0 flex items-center pl-2" }, /* @__PURE__ */ React.createElement(Button, { icon: "search" })), /* @__PURE__ */ React.createElement(
|
|
1737
1737
|
"input",
|
|
1738
1738
|
{
|
|
1739
1739
|
autoFocus: true,
|
|
@@ -1768,20 +1768,20 @@ var __spreadValues$d = (a, b) => {
|
|
|
1768
1768
|
var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
|
|
1769
1769
|
const ActivityReflection = (props) => {
|
|
1770
1770
|
const className = builder("w-full md:w-[40rem]").if(!!props.headline, "min-h-[20rem]").build();
|
|
1771
|
-
const [reaction, setReaction] = React
|
|
1771
|
+
const [reaction, setReaction] = React.useState({
|
|
1772
1772
|
rating: props.rating,
|
|
1773
1773
|
reflection: props.reflection
|
|
1774
1774
|
});
|
|
1775
1775
|
const hasChanges = props.hasChanges || props.canReflect && (props.rating !== reaction.rating || props.reflection !== reaction.reflection);
|
|
1776
1776
|
const setFeedback = (feedback) => setReaction(__spreadProps$b(__spreadValues$d({}, reaction), { reflection: feedback }));
|
|
1777
1777
|
const setRating = (rating) => setReaction(__spreadProps$b(__spreadValues$d({}, reaction), { rating }));
|
|
1778
|
-
React
|
|
1778
|
+
React.useEffect(() => {
|
|
1779
1779
|
setReaction({
|
|
1780
1780
|
rating: props.rating,
|
|
1781
1781
|
reflection: props.reflection
|
|
1782
1782
|
});
|
|
1783
1783
|
}, [props.reflection]);
|
|
1784
|
-
return /* @__PURE__ */ React
|
|
1784
|
+
return /* @__PURE__ */ React.createElement(Modal, { isLoading: !props.headline, visible: true, onClose: props.onClose }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("img", { className: "w-full h-60 object-cover", alt: props.headline, src: props.imageURL }), /* @__PURE__ */ React.createElement("div", { className: "w-full grid grid-cols-1 gap-2 sm:flex p-5 border-b border-gray-200" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start grow" }, /* @__PURE__ */ React.createElement("div", { className: "inline-block min-w-6 w-6 h-6 text-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.pathway || "explore" })), /* @__PURE__ */ React.createElement("div", { className: "grow align-top ml-2 inline-block leading-none" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold capitalize text-slate-600 text-lg" }, props.headline), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "text-sm inline-block capitalize text-slate-600" }, props.pathway), props.xp && /* @__PURE__ */ React.createElement("p", { className: "ml-1 font-semibold inline-block text-sm text-green-500" }, props.xp, " pts")))), hasChanges && /* @__PURE__ */ React.createElement(
|
|
1785
1785
|
Button,
|
|
1786
1786
|
{
|
|
1787
1787
|
onClick: () => props.onSave && props.onSave(reaction.reflection || "", reaction.rating || 0),
|
|
@@ -1792,7 +1792,7 @@ const ActivityReflection = (props) => {
|
|
|
1792
1792
|
color: "slate",
|
|
1793
1793
|
text: "Save"
|
|
1794
1794
|
}
|
|
1795
|
-
)), /* @__PURE__ */ React
|
|
1795
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "w-full max-h-[20rem] overflow-auto" }, /* @__PURE__ */ React.createElement("div", { className: "w-full p-5 border-b border-gray-200 grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-lg" }, "Almost there, share your reflection to earn your points!"), /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-sm" }, "Write a short reflection on your experience."), /* @__PURE__ */ React.createElement(
|
|
1796
1796
|
"textarea",
|
|
1797
1797
|
{
|
|
1798
1798
|
disabled: !props.canReflect,
|
|
@@ -1801,30 +1801,30 @@ const ActivityReflection = (props) => {
|
|
|
1801
1801
|
defaultValue: props.reflection,
|
|
1802
1802
|
className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
1803
1803
|
}
|
|
1804
|
-
), props.canReflect && /* @__PURE__ */ React
|
|
1804
|
+
), props.canReflect && /* @__PURE__ */ React.createElement(Rating$1, __spreadProps$b(__spreadValues$d(__spreadValues$d({}, props), reaction), { setRating })))))));
|
|
1805
1805
|
};
|
|
1806
1806
|
const Rating$1 = (props) => {
|
|
1807
1807
|
const maxPoints = 5;
|
|
1808
|
-
const [rating, setRating] = React
|
|
1808
|
+
const [rating, setRating] = React.useState(props.rating || -1);
|
|
1809
1809
|
const buttons = Array.from({ length: maxPoints }, (_, i) => {
|
|
1810
1810
|
const color = i < rating ? "text-sky-200" : "text-slate-200";
|
|
1811
|
-
return /* @__PURE__ */ React
|
|
1811
|
+
return /* @__PURE__ */ React.createElement("div", { key: i, onMouseEnter: () => setRating(i + 1), onMouseLeave: () => setRating(props.rating || -1) }, /* @__PURE__ */ React.createElement("div", { className: `cursor-pointer h-4 w-4 ${color}`, onClick: () => props.setRating && props.setRating(i + 1) }, /* @__PURE__ */ React.createElement(Icon$1, { name: "circle" })));
|
|
1812
1812
|
});
|
|
1813
1813
|
const labels = Array.from({ length: maxPoints }, (_, i) => {
|
|
1814
1814
|
if (i === 0) {
|
|
1815
|
-
return /* @__PURE__ */ React
|
|
1815
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Poor");
|
|
1816
1816
|
}
|
|
1817
1817
|
if (i === maxPoints - 1) {
|
|
1818
|
-
return /* @__PURE__ */ React
|
|
1818
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Amazing");
|
|
1819
1819
|
}
|
|
1820
|
-
return /* @__PURE__ */ React
|
|
1820
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-monochrome-500" });
|
|
1821
1821
|
});
|
|
1822
|
-
React
|
|
1822
|
+
React.useEffect(() => {
|
|
1823
1823
|
if (props.rating && props.rating !== rating) {
|
|
1824
1824
|
setRating(props.rating);
|
|
1825
1825
|
}
|
|
1826
1826
|
}, [props.rating]);
|
|
1827
|
-
return /* @__PURE__ */ React
|
|
1827
|
+
return /* @__PURE__ */ React.createElement("div", { className: "inline-block mt-2" }, /* @__PURE__ */ React.createElement("h6", { className: "font-bold pb-2 text-md" }, " Rate your experience from poor to amazing"), /* @__PURE__ */ React.createElement("div", { className: `w-[17.7rem] grid grid-cols-5 justify-self-center items-center gap-7 mb-2` }, buttons), /* @__PURE__ */ React.createElement("div", { className: `w-[16.7rem] text-[0.5rem] grid grid-cols-5 justify-self-center items-center` }, labels));
|
|
1828
1828
|
};
|
|
1829
1829
|
|
|
1830
1830
|
var _path$F;
|
|
@@ -3018,7 +3018,7 @@ const Progress = (props) => {
|
|
|
3018
3018
|
return ["bg-gray-200", "bg-green-400"];
|
|
3019
3019
|
}
|
|
3020
3020
|
})();
|
|
3021
|
-
return /* @__PURE__ */ React
|
|
3021
|
+
return /* @__PURE__ */ React.createElement("div", { className: `w-full h-full overflow-hidden ${roundedClass} ${colorClass[0]}` }, /* @__PURE__ */ React.createElement("div", { className: `h-8 ${colorClass[1]}`, style: { width: `${percentage}%` } }));
|
|
3022
3022
|
};
|
|
3023
3023
|
|
|
3024
3024
|
const BadgeEmblem = (props) => {
|
|
@@ -3294,13 +3294,13 @@ const BadgeActivityMenu = (props) => {
|
|
|
3294
3294
|
const WidgetBody = (props) => {
|
|
3295
3295
|
const spacing = props.spacing || "sm";
|
|
3296
3296
|
const className = builder().if(spacing === "sm", "p-2").if(spacing === "md", "p-5").build();
|
|
3297
|
-
const hasContent = props.children && React
|
|
3298
|
-
return /* @__PURE__ */ React
|
|
3297
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
3298
|
+
return /* @__PURE__ */ React.createElement("div", { className }, !hasContent && /* @__PURE__ */ React.createElement("div", { className: "grid justify-items-center content-center h-[6rem] -mt-6 lg:mt-0 lg:h-[5.5rem]" }, /* @__PURE__ */ React.createElement("p", { className: "text-xs text-center align-middle leading-6 font-semibold text-slate-300" }, "No content to display.")), hasContent && props.children);
|
|
3299
3299
|
};
|
|
3300
3300
|
|
|
3301
3301
|
const WidgetHeader = (props) => {
|
|
3302
3302
|
const className = builder().if(!!props.divide, "border-b border-gray-200").if(!props.loose, "p-2").else("p-5").build();
|
|
3303
|
-
return /* @__PURE__ */ React
|
|
3303
|
+
return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-slate-600 items-center gap-x-1" }, props.children));
|
|
3304
3304
|
};
|
|
3305
3305
|
|
|
3306
3306
|
const WidgetHeaderLink = (props) => {
|
|
@@ -3308,9 +3308,9 @@ const WidgetHeaderLink = (props) => {
|
|
|
3308
3308
|
return null;
|
|
3309
3309
|
}
|
|
3310
3310
|
if (typeof props.children === "string") {
|
|
3311
|
-
return /* @__PURE__ */ React
|
|
3311
|
+
return /* @__PURE__ */ React.createElement(Button, { size: props.size || "tiny", text: props.children, onClick: props.onClick });
|
|
3312
3312
|
} else {
|
|
3313
|
-
return /* @__PURE__ */ React
|
|
3313
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
|
|
3314
3314
|
Button,
|
|
3315
3315
|
{
|
|
3316
3316
|
size: props.size || "xs",
|
|
@@ -3323,12 +3323,12 @@ const WidgetHeaderLink = (props) => {
|
|
|
3323
3323
|
};
|
|
3324
3324
|
|
|
3325
3325
|
const WidgetTitle = (props) => {
|
|
3326
|
-
return /* @__PURE__ */ React
|
|
3326
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, props.icon && /* @__PURE__ */ React.createElement("div", { className: "w-5 h-5" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.icon })), /* @__PURE__ */ React.createElement("h4", { className: "grow capitalize align-middle font-semibold" }, props.children));
|
|
3327
3327
|
};
|
|
3328
3328
|
|
|
3329
3329
|
const Widget = (props) => {
|
|
3330
3330
|
const className = builder("flex flex-col w-full shadow-sm rounded-md overflow-hidden").if(!props.borderless, "border border-gray-200").if(props.color === "sky", "bg-sky-100").build();
|
|
3331
|
-
return /* @__PURE__ */ React
|
|
3331
|
+
return /* @__PURE__ */ React.createElement("article", { className }, !props.headless && /* @__PURE__ */ React.createElement("div", { className: "p-2 bg-gray-200" }), /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement("div", { className: "relative w-full" }, props.children)));
|
|
3332
3332
|
};
|
|
3333
3333
|
|
|
3334
3334
|
var __defProp$a = Object.defineProperty;
|
|
@@ -3399,7 +3399,7 @@ const BadgeSection = (props) => {
|
|
|
3399
3399
|
};
|
|
3400
3400
|
|
|
3401
3401
|
const BadgeSuccessDialog = (props) => {
|
|
3402
|
-
return /* @__PURE__ */ React
|
|
3402
|
+
return /* @__PURE__ */ React.createElement(Card, { onClose: props.onClose }, /* @__PURE__ */ React.createElement("div", { className: "w-full px-8 pt-5 pb-12 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-zinc-600 w-28 h-28" }, /* @__PURE__ */ React.createElement(Icon, { name: "party popper" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-lg" }, /* @__PURE__ */ React.createElement("span", null, "Great Job!")), /* @__PURE__ */ React.createElement("div", { className: "max-w-[22rem]" }, !!props.xp && /* @__PURE__ */ React.createElement("div", { className: "text-sm" }, /* @__PURE__ */ React.createElement("span", null, "You've just earned"), /* @__PURE__ */ React.createElement("span", { className: "ml-1 font-semibold text-green-500" }, props.xp, " XP"), /* @__PURE__ */ React.createElement("span", { className: "ml-1" }, "points!")), !!props.displayName && /* @__PURE__ */ React.createElement("div", { className: "mt-2 text-sm" }, /* @__PURE__ */ React.createElement("span", null, "Check out your new"), /* @__PURE__ */ React.createElement("span", { className: "ml-1 font-semibold" }, props.displayName), /* @__PURE__ */ React.createElement("span", { className: "ml-1" }, "Lv. ", (props.level || 0) + 1, " badge on your profile! Look out for more opportunities to earn!"))))));
|
|
3403
3403
|
};
|
|
3404
3404
|
|
|
3405
3405
|
const Tab = (props) => {
|
|
@@ -3408,7 +3408,7 @@ const Tab = (props) => {
|
|
|
3408
3408
|
withDisabled(config, props.disabled);
|
|
3409
3409
|
withSecondary(config, props.secondary);
|
|
3410
3410
|
const onClick = () => !props.disabled && !props.active && props.onClick && props.onClick();
|
|
3411
|
-
return /* @__PURE__ */ React
|
|
3411
|
+
return /* @__PURE__ */ React.createElement("div", { onClick, className: classname(config.container) }, /* @__PURE__ */ React.createElement("div", { className: "m-auto w-max" }, props.icon && /* @__PURE__ */ React.createElement("div", { className: classname(config.icon) }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.icon })), /* @__PURE__ */ React.createElement("h4", { className: classname(config.title) }, props.title)));
|
|
3412
3412
|
};
|
|
3413
3413
|
const defaultTabConfig = () => {
|
|
3414
3414
|
const config = {
|
|
@@ -3478,20 +3478,20 @@ const withSecondary = (config, secondary) => {
|
|
|
3478
3478
|
const Board = (props) => {
|
|
3479
3479
|
const className = builder().if(!!props.secondary, "pt-2 px-2").else("p-2 bg-gray-200").build();
|
|
3480
3480
|
const layoutClassName = builder("grid grid-cols-3 justify-items-center").if(!props.secondary, "gap-2").build();
|
|
3481
|
-
const hasWorkflow = props.workflow && React
|
|
3482
|
-
return /* @__PURE__ */ React
|
|
3481
|
+
const hasWorkflow = props.workflow && React.Children.count(props.workflow) > 0;
|
|
3482
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: layoutClassName }, props.tabs)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, !hasWorkflow && /* @__PURE__ */ React.createElement("div", { className: "grid justify-items-center content-center" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-center align-middle leading-6 font-semibold text-slate-300" }, "No content to display.")), hasWorkflow && props.workflow)));
|
|
3483
3483
|
};
|
|
3484
3484
|
|
|
3485
3485
|
const DateSelection = (props) => {
|
|
3486
3486
|
const today = new Date();
|
|
3487
|
-
const [month, setMonth] = React
|
|
3488
|
-
return /* @__PURE__ */ React
|
|
3487
|
+
const [month, setMonth] = React.useState(calend(props.date || today));
|
|
3488
|
+
return /* @__PURE__ */ React.createElement(Widget, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetHeader, { divide: true }, /* @__PURE__ */ React.createElement(WidgetTitle, { icon: "calendar" }, "Calendar")), /* @__PURE__ */ React.createElement(WidgetBody, null, /* @__PURE__ */ React.createElement(MonthSelection, { month, setMonth }), /* @__PURE__ */ React.createElement(DaySelection, { date: props.date, month, setDate: props.setDate })));
|
|
3489
3489
|
};
|
|
3490
3490
|
const MonthSelection = (props) => {
|
|
3491
3491
|
const month = props.month;
|
|
3492
3492
|
const previousMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1));
|
|
3493
3493
|
const nextMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1));
|
|
3494
|
-
return /* @__PURE__ */ React
|
|
3494
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-md text-slate-300" }, formatDate$1(month, { month: "long" })), /* @__PURE__ */ React.createElement("span", { className: "text-md ml-1 text-slate-300" }, formatDate$1(month, { year: "numeric" }))), /* @__PURE__ */ React.createElement("div", { onClick: previousMonth, className: "cursor-pointer w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "leftArrow" })), /* @__PURE__ */ React.createElement("div", { onClick: nextMonth, className: "cursor-pointer ml-2 w-3 h-3 min-w-3 text-slate-300 hover:text-slate-500" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "rightArrow" })));
|
|
3495
3495
|
};
|
|
3496
3496
|
const DaySelection = (props) => {
|
|
3497
3497
|
const today = new Date();
|
|
@@ -3503,7 +3503,7 @@ const DaySelection = (props) => {
|
|
|
3503
3503
|
const isCurrentMonth = cur.getMonth() === props.month.getMonth();
|
|
3504
3504
|
const onClick = () => props.setDate(isActive ? null : cur);
|
|
3505
3505
|
Days.push(
|
|
3506
|
-
/* @__PURE__ */ React
|
|
3506
|
+
/* @__PURE__ */ React.createElement(
|
|
3507
3507
|
DaySelectionOption,
|
|
3508
3508
|
{
|
|
3509
3509
|
key: cur.toString(),
|
|
@@ -3516,13 +3516,13 @@ const DaySelection = (props) => {
|
|
|
3516
3516
|
)
|
|
3517
3517
|
);
|
|
3518
3518
|
}
|
|
3519
|
-
return /* @__PURE__ */ React
|
|
3520
|
-
return /* @__PURE__ */ React
|
|
3519
|
+
return /* @__PURE__ */ React.createElement("div", { className: "mt-4 grid grid-cols-7 gap-1 text-sm justify-items-center" }, WEEKDAYS.map((date) => {
|
|
3520
|
+
return /* @__PURE__ */ React.createElement("span", { key: date, className: "w-8 text-center text-slate-400" }, date);
|
|
3521
3521
|
}), Days);
|
|
3522
3522
|
};
|
|
3523
3523
|
const DaySelectionOption = (props) => {
|
|
3524
3524
|
const className = builder("w-8 h-8 text-center cursor-pointer p-2").append("hover:text-white hover:font-semibold hover:bg-sky-400").if(props.active, "text-white font-semibold bg-sky-400").if(!props.active && props.today, "font-semibold bg-slate-100 rounded-full").if(!props.active && !props.today && props.currentMonth, "text-slate-500 font-semibold").if(!props.active && !props.today && !props.currentMonth, "text-slate-400").build();
|
|
3525
|
-
return /* @__PURE__ */ React
|
|
3525
|
+
return /* @__PURE__ */ React.createElement("span", { onClick: props.onClick, className }, props.children);
|
|
3526
3526
|
};
|
|
3527
3527
|
const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
3528
3528
|
const weeks = (date, weeks2) => {
|
|
@@ -3563,7 +3563,7 @@ const background = (name, active, disabled) => {
|
|
|
3563
3563
|
};
|
|
3564
3564
|
|
|
3565
3565
|
const EventItem = (props) => {
|
|
3566
|
-
return /* @__PURE__ */ React
|
|
3566
|
+
return /* @__PURE__ */ React.createElement(
|
|
3567
3567
|
"div",
|
|
3568
3568
|
{
|
|
3569
3569
|
onClick: props.onClick,
|
|
@@ -3571,19 +3571,19 @@ const EventItem = (props) => {
|
|
|
3571
3571
|
props.pathway
|
|
3572
3572
|
)} p-4 rounded-md text-gray-500 h-28`
|
|
3573
3573
|
},
|
|
3574
|
-
/* @__PURE__ */ React
|
|
3575
|
-
/* @__PURE__ */ React
|
|
3576
|
-
/* @__PURE__ */ React
|
|
3574
|
+
/* @__PURE__ */ React.createElement("div", { className: "w-5 h-5 min-h-5 drop-shadow-md text-slate-600 mb-5" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.pathway || "explore" })),
|
|
3575
|
+
/* @__PURE__ */ React.createElement("p", { className: "capitalize text-slate-600 text-sm" }, props.pathway),
|
|
3576
|
+
/* @__PURE__ */ React.createElement("div", { className: "relative h-full" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold capitalize text-slate-600 text-md absolute bottom-0" }, props.headline))
|
|
3577
3577
|
);
|
|
3578
3578
|
};
|
|
3579
3579
|
|
|
3580
3580
|
const EventList = (props) => {
|
|
3581
3581
|
const date = props.date || new Date();
|
|
3582
|
-
const hasChildren = props.children && React
|
|
3583
|
-
return /* @__PURE__ */ React
|
|
3582
|
+
const hasChildren = props.children && React.Children.count(props.children) > 0;
|
|
3583
|
+
return /* @__PURE__ */ React.createElement(Widget, null, /* @__PURE__ */ React.createElement(WidgetHeader, { divide: true }, /* @__PURE__ */ React.createElement(WidgetTitle, null, /* @__PURE__ */ React.createElement(DateTitle, null, date)), /* @__PURE__ */ React.createElement(WidgetHeaderLink, { onClick: () => props.onSetDate(previousDate(date)), display: !!props.date }, /* @__PURE__ */ React.createElement(Icon$1, { name: "leftArrow" })), /* @__PURE__ */ React.createElement(WidgetHeaderLink, { onClick: () => props.onSetDate(nextDate(date)), display: !!props.date }, /* @__PURE__ */ React.createElement(Icon$1, { name: "rightArrow" }))), /* @__PURE__ */ React.createElement(WidgetBody, null, /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, hasChildren && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 max-h-[30rem] overflow-auto gap-2" }, props.children), !hasChildren && /* @__PURE__ */ React.createElement("div", { className: "grid justify-items-center content-center h-[16rem] lg:h-[22rem]" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-center align-middle leading-6 font-semibold text-slate-300" }, "No events for the day.")))));
|
|
3584
3584
|
};
|
|
3585
3585
|
const DateTitle = (props) => {
|
|
3586
|
-
return /* @__PURE__ */ React
|
|
3586
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-3xl text-slate-600" }, formatDate(props.children, { month: "long" })), /* @__PURE__ */ React.createElement("span", { className: "font-semibold ml-2 text-3xl text-slate-600" }, ordNumber(props.children.getDate())), /* @__PURE__ */ React.createElement("span", { className: "text-3xl ml-2 text-slate-600" }, formatDate(props.children, { year: "numeric" })));
|
|
3587
3587
|
};
|
|
3588
3588
|
const formatDate = (date, options) => {
|
|
3589
3589
|
return Intl.DateTimeFormat("en-US", options).format(date);
|
|
@@ -3600,18 +3600,18 @@ const ordNumber = (n) => {
|
|
|
3600
3600
|
};
|
|
3601
3601
|
|
|
3602
3602
|
const Home = () => {
|
|
3603
|
-
return /* @__PURE__ */
|
|
3603
|
+
return /* @__PURE__ */ React__namespace.createElement("div", { className: "relative h-full w-full" }, /* @__PURE__ */ React__namespace.createElement(
|
|
3604
3604
|
"img",
|
|
3605
3605
|
{
|
|
3606
3606
|
className: "absolute h-full w-full top-0 left-0 object-cover",
|
|
3607
3607
|
alt: "landing",
|
|
3608
3608
|
src: "https://cdn.localcivics.io/hub/landing.jpg"
|
|
3609
3609
|
}
|
|
3610
|
-
), /* @__PURE__ */
|
|
3610
|
+
), /* @__PURE__ */ React__namespace.createElement("div", { className: "absolute z-10 bottom-1/4 left-0 w-full -mb-[3rem] px-6 lg:px-36" }, /* @__PURE__ */ React__namespace.createElement("div", { className: "max-w-[62.5rem] m-auto inset-z-0 text-white" }, /* @__PURE__ */ React__namespace.createElement("p", { className: "text-[3rem] font-bold" }, "Get involved in your community!"), /* @__PURE__ */ React__namespace.createElement("p", { className: "mt-5 text-[2rem]" }, "Learn how you can make an impact in your community through connecting with community leaders, attending events, and building civic skills."))));
|
|
3611
3611
|
};
|
|
3612
3612
|
|
|
3613
3613
|
const FormExitDialog$1 = (props) => {
|
|
3614
|
-
return /* @__PURE__ */ React
|
|
3614
|
+
return /* @__PURE__ */ React.createElement(Modal, { visible: true, transparent: true, onClose: props.onNo }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] px-8 py-5 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-500 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "edit" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-lg" }, /* @__PURE__ */ React.createElement("span", null, "Are you sure you want to leave?")), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Your progress will be saved.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement(
|
|
3615
3615
|
Button,
|
|
3616
3616
|
{
|
|
3617
3617
|
wide: true,
|
|
@@ -3623,7 +3623,7 @@ const FormExitDialog$1 = (props) => {
|
|
|
3623
3623
|
size: "md",
|
|
3624
3624
|
onClick: props.onYes
|
|
3625
3625
|
}
|
|
3626
|
-
), /* @__PURE__ */ React
|
|
3626
|
+
), /* @__PURE__ */ React.createElement(
|
|
3627
3627
|
Button,
|
|
3628
3628
|
{
|
|
3629
3629
|
wide: true,
|
|
@@ -3645,7 +3645,7 @@ const linkify = (text) => {
|
|
|
3645
3645
|
const matches = LinkifyIt().match(text);
|
|
3646
3646
|
let replacedText = reactStringReplace(text);
|
|
3647
3647
|
matches == null ? void 0 : matches.forEach((match) => {
|
|
3648
|
-
replacedText = reactStringReplace(replacedText, match.raw, () => /* @__PURE__ */ React
|
|
3648
|
+
replacedText = reactStringReplace(replacedText, match.raw, () => /* @__PURE__ */ React.createElement(
|
|
3649
3649
|
"a",
|
|
3650
3650
|
{
|
|
3651
3651
|
href: match.url,
|
|
@@ -3686,7 +3686,7 @@ const FormItem = (props) => {
|
|
|
3686
3686
|
const isValidAnswer = notEmpty && (props.questionType !== "text" || !isTextError);
|
|
3687
3687
|
const checkIconColor = isValidAnswer ? "text-green-500" : "text-gray-300";
|
|
3688
3688
|
const contentMaxWidth = props.format === "question" ? "max-w-lg" : "";
|
|
3689
|
-
const [showError, setShowError] = React
|
|
3689
|
+
const [showError, setShowError] = React.useState(false);
|
|
3690
3690
|
const itemContainerError = showError && isTextError ? "border-2 border-rose-300" : "";
|
|
3691
3691
|
const onTextBlur = () => {
|
|
3692
3692
|
if (isTextError) {
|
|
@@ -3698,34 +3698,34 @@ const FormItem = (props) => {
|
|
|
3698
3698
|
props.onTextBlur();
|
|
3699
3699
|
}
|
|
3700
3700
|
};
|
|
3701
|
-
React
|
|
3701
|
+
React.useEffect(() => {
|
|
3702
3702
|
if (!isTextError) {
|
|
3703
3703
|
setShowError(false);
|
|
3704
3704
|
}
|
|
3705
3705
|
}, [isTextError]);
|
|
3706
3706
|
const marginBottom = props.format === "text" ? "-mb-7" : "";
|
|
3707
|
-
return /* @__PURE__ */ React
|
|
3707
|
+
return /* @__PURE__ */ React.createElement("div", { className: `bg-white rounded-md p-5 shadow-sm grid grid-cols-1 gap-y-8 ${itemContainerError} ${marginBottom}` }, props.displayName && /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-x-4" }, props.format === "question" && /* @__PURE__ */ React.createElement("div", { className: `${checkIconColor} w-5 h-5 mt-1` }, /* @__PURE__ */ React.createElement(Icon$1, { name: "positive" })), /* @__PURE__ */ React.createElement("div", { className: "grow max-w-lg" }, props.displayName && /* @__PURE__ */ React.createElement("p", { className: "flex-auto text-lg text-slate-600 font-semibold whitespace-pre-line" }, linkify(props.displayName)), props.description && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-400 whitespace-pre-line" }, linkify(props.description)))), props.required && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-rose-600" }, "*")), !props.children && props.format !== "text" && /* @__PURE__ */ React.createElement("div", { className: `${contentMaxWidth} ml-1` }, /* @__PURE__ */ React.createElement(Switch, __spreadProps$7(__spreadValues$9({}, props), { onTextBlur })), showError && /* @__PURE__ */ React.createElement("div", { className: "text-rose-300 flex items-center gap-x-2 mt-4" }, /* @__PURE__ */ React.createElement("div", { className: "w-4 h-4" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "negative" })), /* @__PURE__ */ React.createElement("span", { className: "grow text-sm" }, "Must be a minimum of ", minimum, " characters."))), props.children);
|
|
3708
3708
|
};
|
|
3709
3709
|
const Switch = (props) => {
|
|
3710
3710
|
switch (true) {
|
|
3711
3711
|
case props.format === "embed":
|
|
3712
|
-
return /* @__PURE__ */ React
|
|
3712
|
+
return /* @__PURE__ */ React.createElement(Embed, __spreadValues$9({}, props));
|
|
3713
3713
|
case props.format === "image":
|
|
3714
|
-
return /* @__PURE__ */ React
|
|
3714
|
+
return /* @__PURE__ */ React.createElement(Image, __spreadValues$9({}, props));
|
|
3715
3715
|
case props.questionType === "radio":
|
|
3716
|
-
return /* @__PURE__ */ React
|
|
3716
|
+
return /* @__PURE__ */ React.createElement(RadioQuestion, __spreadValues$9({}, props));
|
|
3717
3717
|
case props.questionType === "checkbox":
|
|
3718
|
-
return /* @__PURE__ */ React
|
|
3718
|
+
return /* @__PURE__ */ React.createElement(CheckboxQuestion, __spreadValues$9({}, props));
|
|
3719
3719
|
case props.questionType === "drop down":
|
|
3720
|
-
return /* @__PURE__ */ React
|
|
3720
|
+
return /* @__PURE__ */ React.createElement(DropDownQuestion, __spreadValues$9({}, props));
|
|
3721
3721
|
case props.questionType === "file upload":
|
|
3722
|
-
return /* @__PURE__ */ React
|
|
3722
|
+
return /* @__PURE__ */ React.createElement(FileUploadQuestion, __spreadValues$9({}, props));
|
|
3723
3723
|
case props.questionType === "text":
|
|
3724
|
-
return /* @__PURE__ */ React
|
|
3724
|
+
return /* @__PURE__ */ React.createElement(TextQuestion, __spreadValues$9({}, props));
|
|
3725
3725
|
case props.questionType === "date":
|
|
3726
|
-
return /* @__PURE__ */ React
|
|
3726
|
+
return /* @__PURE__ */ React.createElement(DateQuestion, __spreadValues$9({}, props));
|
|
3727
3727
|
case props.questionType === "time":
|
|
3728
|
-
return /* @__PURE__ */ React
|
|
3728
|
+
return /* @__PURE__ */ React.createElement(TimeQuestion, __spreadValues$9({}, props));
|
|
3729
3729
|
default:
|
|
3730
3730
|
return null;
|
|
3731
3731
|
}
|
|
@@ -3740,8 +3740,8 @@ const RadioQuestion = (props) => {
|
|
|
3740
3740
|
props.onResponseChange([e.target.value]);
|
|
3741
3741
|
}
|
|
3742
3742
|
};
|
|
3743
|
-
return /* @__PURE__ */ React
|
|
3744
|
-
return /* @__PURE__ */ React
|
|
3743
|
+
return /* @__PURE__ */ React.createElement("fieldset", { className: "grid grid-cols-1 gap-y-8" }, options.map((option, index) => {
|
|
3744
|
+
return /* @__PURE__ */ React.createElement("div", { key: option }, /* @__PURE__ */ React.createElement("label", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement(
|
|
3745
3745
|
"input",
|
|
3746
3746
|
{
|
|
3747
3747
|
className: "cursor-pointer",
|
|
@@ -3753,7 +3753,7 @@ const RadioQuestion = (props) => {
|
|
|
3753
3753
|
disabled: props.disabled,
|
|
3754
3754
|
name: props.displayName
|
|
3755
3755
|
}
|
|
3756
|
-
), /* @__PURE__ */ React
|
|
3756
|
+
), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, String.fromCharCode(65 + index), "."), " ", option)));
|
|
3757
3757
|
}));
|
|
3758
3758
|
};
|
|
3759
3759
|
const CheckboxQuestion = (props) => {
|
|
@@ -3761,7 +3761,7 @@ const CheckboxQuestion = (props) => {
|
|
|
3761
3761
|
const options = props.options || [];
|
|
3762
3762
|
const responses = props.responses || [];
|
|
3763
3763
|
const values = {};
|
|
3764
|
-
const ref = React
|
|
3764
|
+
const ref = React.useRef(null);
|
|
3765
3765
|
const rawResponse = responses.length > 0 ? responses[0] : ((_a = ref.current) == null ? void 0 : _a.value) || "";
|
|
3766
3766
|
const response = rawResponse.replace("Other: ", "");
|
|
3767
3767
|
const isOtherResponse = rawResponse.startsWith("Other: ");
|
|
@@ -3783,8 +3783,8 @@ const CheckboxQuestion = (props) => {
|
|
|
3783
3783
|
props.onResponseChange(newResponses);
|
|
3784
3784
|
}
|
|
3785
3785
|
};
|
|
3786
|
-
return /* @__PURE__ */ React
|
|
3787
|
-
return /* @__PURE__ */ React
|
|
3786
|
+
return /* @__PURE__ */ React.createElement("fieldset", { className: "grid grid-cols-1 gap-y-8" }, options.map((option) => {
|
|
3787
|
+
return /* @__PURE__ */ React.createElement("div", { key: option }, /* @__PURE__ */ React.createElement("label", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement(
|
|
3788
3788
|
"input",
|
|
3789
3789
|
{
|
|
3790
3790
|
disabled: props.disabled,
|
|
@@ -3795,7 +3795,7 @@ const CheckboxQuestion = (props) => {
|
|
|
3795
3795
|
value: option || response,
|
|
3796
3796
|
name: props.displayName
|
|
3797
3797
|
}
|
|
3798
|
-
), option && /* @__PURE__ */ React
|
|
3798
|
+
), option && /* @__PURE__ */ React.createElement("div", null, option), !option && /* @__PURE__ */ React.createElement(React.Fragment, null, "Other: ", /* @__PURE__ */ React.createElement(
|
|
3799
3799
|
"input",
|
|
3800
3800
|
{
|
|
3801
3801
|
className: "w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\n focus:outline-none focus:ring-1 focus:ring-sky-500",
|
|
@@ -3818,7 +3818,7 @@ const DropDownQuestion = (props) => {
|
|
|
3818
3818
|
props.onResponseChange([e.target.value]);
|
|
3819
3819
|
}
|
|
3820
3820
|
};
|
|
3821
|
-
return /* @__PURE__ */ React
|
|
3821
|
+
return /* @__PURE__ */ React.createElement(
|
|
3822
3822
|
"select",
|
|
3823
3823
|
{
|
|
3824
3824
|
disabled: props.disabled,
|
|
@@ -3829,16 +3829,16 @@ const DropDownQuestion = (props) => {
|
|
|
3829
3829
|
name: props.displayName,
|
|
3830
3830
|
onChange
|
|
3831
3831
|
},
|
|
3832
|
-
/* @__PURE__ */ React
|
|
3832
|
+
/* @__PURE__ */ React.createElement("option", { className: "cursor-pointer", value: "" }, "Select one"),
|
|
3833
3833
|
options.map((option) => {
|
|
3834
|
-
return /* @__PURE__ */ React
|
|
3834
|
+
return /* @__PURE__ */ React.createElement("option", { key: option, selected: values[option], value: option }, option);
|
|
3835
3835
|
})
|
|
3836
3836
|
);
|
|
3837
3837
|
};
|
|
3838
3838
|
const FileUploadQuestion = (props) => {
|
|
3839
3839
|
const responses = props.responses || [];
|
|
3840
3840
|
const response = responses.length > 0 ? responses[0] : "";
|
|
3841
|
-
const [imageURL, setImageURL] = React
|
|
3841
|
+
const [imageURL, setImageURL] = React.useState(response);
|
|
3842
3842
|
const onChange = (e) => {
|
|
3843
3843
|
if (props.onResponseChange) {
|
|
3844
3844
|
props.onResponseChange([e.target.value]);
|
|
@@ -3858,10 +3858,10 @@ const FileUploadQuestion = (props) => {
|
|
|
3858
3858
|
};
|
|
3859
3859
|
reader.readAsDataURL(file);
|
|
3860
3860
|
};
|
|
3861
|
-
React
|
|
3861
|
+
React.useEffect(() => {
|
|
3862
3862
|
setImageURL(response);
|
|
3863
3863
|
}, [props.questionId, response]);
|
|
3864
|
-
return /* @__PURE__ */ React
|
|
3864
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-3" }, /* @__PURE__ */ React.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Choose image photo"), /* @__PURE__ */ React.createElement(
|
|
3865
3865
|
"input",
|
|
3866
3866
|
{
|
|
3867
3867
|
disabled: props.disabled,
|
|
@@ -3870,7 +3870,7 @@ const FileUploadQuestion = (props) => {
|
|
|
3870
3870
|
type: "file",
|
|
3871
3871
|
className: "block w-full text-sm text-slate-500 disabled:text-gray-600\n file:mr-4 file:py-2 file:px-4\n file:rounded-full file:border-0\n file:text-sm file:font-semibold\n file:bg-violet-50 file:text-violet-700\n hover:file:bg-violet-100"
|
|
3872
3872
|
}
|
|
3873
|
-
))), /* @__PURE__ */ React
|
|
3873
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "-ml-2" }, /* @__PURE__ */ React.createElement(
|
|
3874
3874
|
"input",
|
|
3875
3875
|
{
|
|
3876
3876
|
type: "url",
|
|
@@ -3893,7 +3893,7 @@ const TextQuestion = (props) => {
|
|
|
3893
3893
|
props.onResponseChange([e.target.value]);
|
|
3894
3894
|
}
|
|
3895
3895
|
};
|
|
3896
|
-
return /* @__PURE__ */ React
|
|
3896
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, !props.paragraph && /* @__PURE__ */ React.createElement(
|
|
3897
3897
|
"input",
|
|
3898
3898
|
{
|
|
3899
3899
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 text-sm placeholder-slate-400 border border-slate-300 rounded-sm shadow-sm\n focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -3907,7 +3907,7 @@ const TextQuestion = (props) => {
|
|
|
3907
3907
|
placeholder: "Your answer",
|
|
3908
3908
|
value: response
|
|
3909
3909
|
}
|
|
3910
|
-
), props.paragraph && /* @__PURE__ */ React
|
|
3910
|
+
), props.paragraph && /* @__PURE__ */ React.createElement(
|
|
3911
3911
|
"textarea",
|
|
3912
3912
|
{
|
|
3913
3913
|
className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -3930,7 +3930,7 @@ const DateQuestion = (props) => {
|
|
|
3930
3930
|
props.onResponseChange([e.target.value]);
|
|
3931
3931
|
}
|
|
3932
3932
|
};
|
|
3933
|
-
return /* @__PURE__ */ React
|
|
3933
|
+
return /* @__PURE__ */ React.createElement(
|
|
3934
3934
|
"input",
|
|
3935
3935
|
{
|
|
3936
3936
|
className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -3951,7 +3951,7 @@ const TimeQuestion = (props) => {
|
|
|
3951
3951
|
props.onResponseChange([e.target.value]);
|
|
3952
3952
|
}
|
|
3953
3953
|
};
|
|
3954
|
-
return /* @__PURE__ */ React
|
|
3954
|
+
return /* @__PURE__ */ React.createElement(
|
|
3955
3955
|
"input",
|
|
3956
3956
|
{
|
|
3957
3957
|
className: "mt-1 block w-full px-3 pt-3 pb-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-sm text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -3965,7 +3965,7 @@ const TimeQuestion = (props) => {
|
|
|
3965
3965
|
);
|
|
3966
3966
|
};
|
|
3967
3967
|
const Image = (props) => {
|
|
3968
|
-
const [scale, setScale] = React
|
|
3968
|
+
const [scale, setScale] = React.useState("");
|
|
3969
3969
|
const scaleUp = () => {
|
|
3970
3970
|
switch (scale) {
|
|
3971
3971
|
case "scale-[0.50]":
|
|
@@ -4010,10 +4010,10 @@ const Image = (props) => {
|
|
|
4010
4010
|
return;
|
|
4011
4011
|
}
|
|
4012
4012
|
};
|
|
4013
|
-
return /* @__PURE__ */ React
|
|
4013
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative max-w-[25rem] md:max-w-[40rem] md:w-[40rem] overflow-hidden" }, /* @__PURE__ */ React.createElement("img", { referrerPolicy: "no-referrer", className: `h-full max-h-[25rem] w-full object-cover ${scale}`, alt: props.displayName, src: props.url }), /* @__PURE__ */ React.createElement("div", { className: "absolute rounded-sm shadow-md bottom-5 right-5 z-5 bg-gray-100 font-bold" }, /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-md text-gray-400 hover:text-gray-600", onClick: scaleUp }, "+"), /* @__PURE__ */ React.createElement("span", { className: "p-5 cursor-pointer text-xl text-gray-400 hover:text-gray-600", onClick: scaleDown }, "-")));
|
|
4014
4014
|
};
|
|
4015
4015
|
const Embed = (props) => {
|
|
4016
|
-
return /* @__PURE__ */ React
|
|
4016
|
+
return /* @__PURE__ */ React.createElement("div", { className: "max-w-[25rem] md:max-w-[40rem] md:w-[40rem]" }, /* @__PURE__ */ React.createElement(
|
|
4017
4017
|
"iframe",
|
|
4018
4018
|
{
|
|
4019
4019
|
className: "w-full",
|
|
@@ -4027,7 +4027,7 @@ const Embed = (props) => {
|
|
|
4027
4027
|
};
|
|
4028
4028
|
|
|
4029
4029
|
const FormSubmitDialog$1 = (props) => {
|
|
4030
|
-
return /* @__PURE__ */ React
|
|
4030
|
+
return /* @__PURE__ */ React.createElement(Modal, { visible: true, transparent: true, onClose: props.onGoBack }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] px-8 py-5 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-green-500 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "positive" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-lg" }, /* @__PURE__ */ React.createElement("span", null, "Great Job!")), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Your responses have been submitted.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement(
|
|
4031
4031
|
Button,
|
|
4032
4032
|
{
|
|
4033
4033
|
wide: true,
|
|
@@ -4039,7 +4039,7 @@ const FormSubmitDialog$1 = (props) => {
|
|
|
4039
4039
|
size: "md",
|
|
4040
4040
|
onClick: props.onGoBack
|
|
4041
4041
|
}
|
|
4042
|
-
), /* @__PURE__ */ React
|
|
4042
|
+
), /* @__PURE__ */ React.createElement(
|
|
4043
4043
|
Button,
|
|
4044
4044
|
{
|
|
4045
4045
|
wide: true,
|
|
@@ -4089,13 +4089,13 @@ const autoSave = (run, func, callback) => {
|
|
|
4089
4089
|
};
|
|
4090
4090
|
const LearningForm = (props) => {
|
|
4091
4091
|
var _a;
|
|
4092
|
-
const [answersKey, setAnswersKey] = React
|
|
4093
|
-
const [reflection, setReflection] = React
|
|
4094
|
-
const [rating, setRating] = React
|
|
4095
|
-
const [showExitDialogue, setShowExitDialogue] = React
|
|
4096
|
-
const [showSubmitDialogue, setShowSubmitDialogue] = React
|
|
4097
|
-
const [isDraft, setIsDraft] = React
|
|
4098
|
-
const autoSaveHandler = React
|
|
4092
|
+
const [answersKey, setAnswersKey] = React.useState(null);
|
|
4093
|
+
const [reflection, setReflection] = React.useState(props.reflection || "");
|
|
4094
|
+
const [rating, setRating] = React.useState(props.rating);
|
|
4095
|
+
const [showExitDialogue, setShowExitDialogue] = React.useState(false);
|
|
4096
|
+
const [showSubmitDialogue, setShowSubmitDialogue] = React.useState(false);
|
|
4097
|
+
const [isDraft, setIsDraft] = React.useState(false);
|
|
4098
|
+
const autoSaveHandler = React.useCallback(autoSave(isDraft, props.onSaveDraft, () => setIsDraft(false)), [isDraft]);
|
|
4099
4099
|
const saveVisibility = isDraft ? "opacity-100 visible" : "opacity-0 invisible";
|
|
4100
4100
|
const answers = [];
|
|
4101
4101
|
const saveDraft = async () => {
|
|
@@ -4117,21 +4117,21 @@ const LearningForm = (props) => {
|
|
|
4117
4117
|
const canSubmit = answeredAllRequired && reflection.length >= MIN_REFLECTION_LENGTH;
|
|
4118
4118
|
const items = props.items || [];
|
|
4119
4119
|
const currentAnswersKey = answers && answers.length > 0 ? JSON.stringify(answers) : null;
|
|
4120
|
-
React
|
|
4120
|
+
React.useEffect(() => {
|
|
4121
4121
|
setRating(props.rating);
|
|
4122
4122
|
}, [props.rating]);
|
|
4123
|
-
React
|
|
4123
|
+
React.useEffect(() => {
|
|
4124
4124
|
setReflection(props.reflection || "");
|
|
4125
4125
|
}, [props.reflection]);
|
|
4126
|
-
React
|
|
4126
|
+
React.useEffect(() => {
|
|
4127
4127
|
autoSaveHandler(answers, reflection, rating);
|
|
4128
4128
|
}, [currentAnswersKey, reflection, rating, isDraft]);
|
|
4129
|
-
React
|
|
4129
|
+
React.useEffect(() => {
|
|
4130
4130
|
if (props.formId) {
|
|
4131
4131
|
setAnswersKey(currentAnswersKey);
|
|
4132
4132
|
}
|
|
4133
4133
|
}, [props.formId]);
|
|
4134
|
-
React
|
|
4134
|
+
React.useEffect(() => {
|
|
4135
4135
|
if (answersKey === null) {
|
|
4136
4136
|
return;
|
|
4137
4137
|
}
|
|
@@ -4160,7 +4160,7 @@ const LearningForm = (props) => {
|
|
|
4160
4160
|
}
|
|
4161
4161
|
};
|
|
4162
4162
|
const bg = props.preview ? "" : "bg-gray-100";
|
|
4163
|
-
return /* @__PURE__ */ React
|
|
4163
|
+
return /* @__PURE__ */ React.createElement("div", { className: `grid grid-cols-1 gap-y-12 ${bg} px-4 pb-12 lg:px-48` }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-[62.5rem] m-auto md:grid md:grid-cols-2 bg-white rounded-b overflow-hidden shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-y-6 px-8 py-8 text-slate-600 max-w-md" }, /* @__PURE__ */ React.createElement(
|
|
4164
4164
|
"div",
|
|
4165
4165
|
{
|
|
4166
4166
|
onClick: () => {
|
|
@@ -4172,10 +4172,10 @@ const LearningForm = (props) => {
|
|
|
4172
4172
|
},
|
|
4173
4173
|
className: "flex h-max gap-x-2 cursor-pointer items-center text-slate-300 hover:text-slate-500"
|
|
4174
4174
|
},
|
|
4175
|
-
/* @__PURE__ */ React
|
|
4176
|
-
/* @__PURE__ */ React
|
|
4177
|
-
), !!props.displayName && /* @__PURE__ */ React
|
|
4178
|
-
return /* @__PURE__ */ React
|
|
4175
|
+
/* @__PURE__ */ React.createElement("div", { className: "w-3 h-3 min-w-3" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "leftArrow" })),
|
|
4176
|
+
/* @__PURE__ */ React.createElement("span", { className: "text-md" }, "Go back")
|
|
4177
|
+
), !!props.displayName && /* @__PURE__ */ React.createElement("h2", { className: "h-max font-semibold text-2xl" }, props.displayName), !!props.description && /* @__PURE__ */ React.createElement("p", { className: "h-max max-h-[14rem] overflow-y-auto whitespace-pre-line" }, props.description), !!props.eta && /* @__PURE__ */ React.createElement("p", { className: "text-sm h-max font-semibold" }, "Estimated Completion Time: ", props.eta)), /* @__PURE__ */ React.createElement("img", { className: "grow h-full max-h-[30rem] w-full object-cover", alt: props.displayName, src: props.imageURL })), /* @__PURE__ */ React.createElement("form", { className: "w-full max-w-[62.5rem] m-auto grid grid-cols-1 gap-y-12", onSubmit }, items.map((item) => {
|
|
4178
|
+
return /* @__PURE__ */ React.createElement(
|
|
4179
4179
|
FormItem,
|
|
4180
4180
|
__spreadProps$6(__spreadValues$8({
|
|
4181
4181
|
key: item.itemId
|
|
@@ -4184,7 +4184,7 @@ const LearningForm = (props) => {
|
|
|
4184
4184
|
disabled: !!props.preview
|
|
4185
4185
|
})
|
|
4186
4186
|
);
|
|
4187
|
-
}), /* @__PURE__ */ React
|
|
4187
|
+
}), /* @__PURE__ */ React.createElement(
|
|
4188
4188
|
FormItem,
|
|
4189
4189
|
{
|
|
4190
4190
|
displayName: "To earn your Impact Points for this activity, answer either of the following:",
|
|
@@ -4198,7 +4198,7 @@ const LearningForm = (props) => {
|
|
|
4198
4198
|
minText: MIN_REFLECTION_LENGTH,
|
|
4199
4199
|
responses: reflection ? [reflection] : void 0
|
|
4200
4200
|
}
|
|
4201
|
-
), /* @__PURE__ */ React
|
|
4201
|
+
), /* @__PURE__ */ React.createElement(FormItem, null, /* @__PURE__ */ React.createElement(Rating, { disabled: !canReflect || !!props.preview, rating, setRating })), !props.preview && /* @__PURE__ */ React.createElement("div", { className: "w-max m-auto" }, /* @__PURE__ */ React.createElement(Button, { disabled: !canSubmit, type: "submit", color: "blue", size: "md", spacing: "md", border: "rounded", theme: "dark", text: "Submit" }))), !props.preview && /* @__PURE__ */ React.createElement("div", { className: `fixed bottom-10 right-14 transition ease-in-out ${saveVisibility}` }, /* @__PURE__ */ React.createElement(
|
|
4202
4202
|
Button,
|
|
4203
4203
|
{
|
|
4204
4204
|
type: "button",
|
|
@@ -4210,16 +4210,16 @@ const LearningForm = (props) => {
|
|
|
4210
4210
|
text: "Save",
|
|
4211
4211
|
onClick: saveDraft
|
|
4212
4212
|
}
|
|
4213
|
-
)), showExitDialogue && /* @__PURE__ */ React
|
|
4213
|
+
)), showExitDialogue && /* @__PURE__ */ React.createElement("div", { className: "fixed top-0 left-0 px-4 md:px-2 w-screen h-screen py-5 transition ease-in-out duration-400 bg-gray-200/75 z-40" }, /* @__PURE__ */ React.createElement("div", { className: "flex md:w-max h-screen gap-x-2 justify-items-center content-center m-auto" }, /* @__PURE__ */ React.createElement(
|
|
4214
4214
|
FormExitDialog$1,
|
|
4215
4215
|
{
|
|
4216
4216
|
onYes: () => saveDraft().then(() => props.onGoBack && props.onGoBack()),
|
|
4217
4217
|
onNo: () => setShowExitDialogue(false)
|
|
4218
4218
|
}
|
|
4219
|
-
))), showSubmitDialogue && /* @__PURE__ */ React
|
|
4219
|
+
))), showSubmitDialogue && /* @__PURE__ */ React.createElement("div", { className: "fixed top-0 left-0 px-4 md:px-2 w-screen h-screen py-5 transition ease-in-out duration-400 bg-gray-200/75 z-40" }, /* @__PURE__ */ React.createElement("div", { className: "flex md:w-max h-screen gap-x-2 justify-items-center content-center m-auto" }, /* @__PURE__ */ React.createElement(FormSubmitDialog$1, { onGoBack: () => setShowSubmitDialogue(false), onHome: props.onHome }))));
|
|
4220
4220
|
};
|
|
4221
4221
|
const Rating = (props) => {
|
|
4222
|
-
const [confidence, setConfidence] = React
|
|
4222
|
+
const [confidence, setConfidence] = React.useState(props.rating || -1);
|
|
4223
4223
|
const onMouseEnter = (i) => !props.disabled && setConfidence(i);
|
|
4224
4224
|
const onMouseLeave = () => !props.disabled && setConfidence(props.rating || -1);
|
|
4225
4225
|
const onClick = (i) => !props.disabled && props.setRating && props.setRating(i);
|
|
@@ -4227,23 +4227,23 @@ const Rating = (props) => {
|
|
|
4227
4227
|
const circlePointer = props.disabled ? "" : "cursor-pointer";
|
|
4228
4228
|
const buttons = Array.from({ length: maxPoints }, (_, i) => {
|
|
4229
4229
|
const color = i < confidence ? "text-sky-200" : "text-slate-200";
|
|
4230
|
-
return /* @__PURE__ */ React
|
|
4230
|
+
return /* @__PURE__ */ React.createElement("div", { key: i, onMouseEnter: () => onMouseEnter(i + 1), onMouseLeave }, /* @__PURE__ */ React.createElement("div", { className: `${circlePointer} h-4 w-4 ${color}`, onClick: () => onClick(i + 1) }, /* @__PURE__ */ React.createElement(Icon$1, { name: "circle" })));
|
|
4231
4231
|
});
|
|
4232
4232
|
const labels = Array.from({ length: maxPoints }, (_, i) => {
|
|
4233
4233
|
if (i === 0) {
|
|
4234
|
-
return /* @__PURE__ */ React
|
|
4234
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Poor");
|
|
4235
4235
|
}
|
|
4236
4236
|
if (i === maxPoints - 1) {
|
|
4237
|
-
return /* @__PURE__ */ React
|
|
4237
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Amazing");
|
|
4238
4238
|
}
|
|
4239
|
-
return /* @__PURE__ */ React
|
|
4239
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-monochrome-500" });
|
|
4240
4240
|
});
|
|
4241
|
-
React
|
|
4241
|
+
React.useEffect(() => {
|
|
4242
4242
|
if (props.rating && props.rating !== confidence) {
|
|
4243
4243
|
setConfidence(props.rating);
|
|
4244
4244
|
}
|
|
4245
4245
|
}, [props.rating]);
|
|
4246
|
-
return /* @__PURE__ */ React
|
|
4246
|
+
return /* @__PURE__ */ React.createElement("div", { className: "m-auto inline-block py-4" }, /* @__PURE__ */ React.createElement("h6", { className: "font-bold pb-2 mb-4 text-md text-slate-600 font-semibold" }, " ", "Rate your experience from poor to amazing"), /* @__PURE__ */ React.createElement("div", { className: "w-max m-auto" }, /* @__PURE__ */ React.createElement("div", { className: `ml-5 w-[17.7rem] grid grid-cols-5 justify-self-center items-center gap-7 mb-2` }, buttons), /* @__PURE__ */ React.createElement(
|
|
4247
4247
|
"div",
|
|
4248
4248
|
{
|
|
4249
4249
|
className: `ml-5 w-[16.7rem] text-[0.5rem] text-slate-600 grid grid-cols-5 justify-self-center items-center`
|
|
@@ -4273,7 +4273,7 @@ const NavLink = (props) => {
|
|
|
4273
4273
|
const config = defaultConfig();
|
|
4274
4274
|
withMenu(config, props.menu);
|
|
4275
4275
|
withName(config, props.name);
|
|
4276
|
-
return /* @__PURE__ */ React
|
|
4276
|
+
return /* @__PURE__ */ React.createElement(Button, __spreadValues$7({ disabled: props.disabled, active: props.active, onClick }, config));
|
|
4277
4277
|
};
|
|
4278
4278
|
const defaultConfig = () => {
|
|
4279
4279
|
return {};
|
|
@@ -4369,45 +4369,45 @@ var __spreadValues$6 = (a, b) => {
|
|
|
4369
4369
|
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
4370
4370
|
const NavBar = (props) => {
|
|
4371
4371
|
const className = builder("flex items-center justify-between flex-wrap sticky top-0 z-30 w-full h-16 border-b").append("bg-white px-4 py text-center").append("md:border-none md:border-monochrome-100 lg:px-36 md:shadow-md").build();
|
|
4372
|
-
const [secondary, setSecondary] = React
|
|
4372
|
+
const [secondary, setSecondary] = React.useState(false);
|
|
4373
4373
|
const secondaryClassName = builder("w-full shadow-sm absolute z-30 top-11 left-0 grid grid-cols-1 bg-gray-50").append("md:invisible").append("transition duration-500 ease-in-out").if(secondary, "opacity-full visible").else("invisible opacity-0").build();
|
|
4374
4374
|
const menuIcon = secondary ? "menu-close" : "menu";
|
|
4375
|
-
return /* @__PURE__ */ React
|
|
4375
|
+
return /* @__PURE__ */ React.createElement("nav", { className }, /* @__PURE__ */ React.createElement("div", { className: "w-full flex items-center justify-between flex-wrap sticky max-w-[62.5rem] m-auto" }, React.Children.map(props.children, (Link) => {
|
|
4376
4376
|
if (Link && Link.props.name === "home") {
|
|
4377
|
-
return /* @__PURE__ */ React
|
|
4377
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grow items-center flex-shrink-0 md:mr-6" }, Link);
|
|
4378
4378
|
}
|
|
4379
4379
|
return null;
|
|
4380
|
-
}), /* @__PURE__ */ React
|
|
4380
|
+
}), /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex md:items-center gap-x-8" }, React.Children.map(props.children, (Link) => {
|
|
4381
4381
|
if (Link && Link.props.name !== "home") {
|
|
4382
|
-
return /* @__PURE__ */ React
|
|
4382
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative" }, Link);
|
|
4383
4383
|
}
|
|
4384
4384
|
return null;
|
|
4385
|
-
})), /* @__PURE__ */ React
|
|
4385
|
+
})), /* @__PURE__ */ React.createElement("div", { className: "inline-block md:hidden" }, /* @__PURE__ */ React.createElement(NavLink, { onClick: () => setSecondary(!secondary), name: menuIcon })), /* @__PURE__ */ React.createElement("div", { className: secondaryClassName }, React.Children.map(props.children, (Link) => {
|
|
4386
4386
|
if (Link && Link.props.name !== "home") {
|
|
4387
|
-
return /* @__PURE__ */ React
|
|
4387
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(NavLink, __spreadProps$5(__spreadValues$6({}, Link.props), { menu: true })));
|
|
4388
4388
|
}
|
|
4389
4389
|
return null;
|
|
4390
4390
|
}))));
|
|
4391
4391
|
};
|
|
4392
4392
|
|
|
4393
4393
|
const NotFound = (props) => {
|
|
4394
|
-
return /* @__PURE__ */ React
|
|
4394
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
4395
4395
|
"img",
|
|
4396
4396
|
{
|
|
4397
4397
|
className: "object-cover w-screen h-screen -z-10",
|
|
4398
4398
|
alt: "landing",
|
|
4399
4399
|
src: "https://cdn.localcivics.io/hub/landing.jpg"
|
|
4400
4400
|
}
|
|
4401
|
-
), /* @__PURE__ */ React
|
|
4401
|
+
), /* @__PURE__ */ React.createElement(Modal, { onClose: props.onHome, visible: props.visible }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 p-8 justify-items-center text-slate-500 gap-y-4" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 justify-items-center gap-y-2" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold" }, "Not found")), /* @__PURE__ */ React.createElement("p", { className: "text-sm text-center text-slate-500 max-w-[12rem]" }, "The page you've landed on does not exist."), /* @__PURE__ */ React.createElement("div", { className: "mt-2" }, /* @__PURE__ */ React.createElement(Button, { spacing: "sm", border: "rounded", color: "slate", theme: "dark", text: "Go home", onClick: props.onHome })))));
|
|
4402
4402
|
};
|
|
4403
4403
|
|
|
4404
4404
|
const SearchButton = (props) => {
|
|
4405
4405
|
const className = builder("placeholder:text-slate-400 text-slate-400").append("block bg-white w-full text-sm border border-slate-300").append("rounded-md py-3 px-8 shadow-sm").if(!props.disabled, "cursor-pointer").if(!props.disabled, "focus:outline-none focus:border-sky-100 focus:ring-sky-100 focus:ring-1").if(!props.disabled, "hover:bg-sky-50 hover:border-sky-100").if(!props.disabled, "hover:text-slate-500 hover:placeholder:text-slate-600").build();
|
|
4406
|
-
return /* @__PURE__ */ React
|
|
4406
|
+
return /* @__PURE__ */ React.createElement("label", { onClick: () => !props.disabled && props.onClick && props.onClick(), className: "relative block" }, /* @__PURE__ */ React.createElement("span", { className: "absolute inset-y-0 left-0 top-0 flex items-center pl-2" }, /* @__PURE__ */ React.createElement(Button, { icon: "search" })), /* @__PURE__ */ React.createElement("input", { disabled: true, className, type: "text", name: "search", placeholder: props.placeholder }));
|
|
4407
4407
|
};
|
|
4408
4408
|
|
|
4409
4409
|
const SearchResult = (props) => {
|
|
4410
|
-
return /* @__PURE__ */
|
|
4410
|
+
return /* @__PURE__ */ React__namespace.createElement(
|
|
4411
4411
|
Button,
|
|
4412
4412
|
{
|
|
4413
4413
|
spacing: "lg",
|
|
@@ -4423,19 +4423,19 @@ const SearchResult = (props) => {
|
|
|
4423
4423
|
};
|
|
4424
4424
|
|
|
4425
4425
|
const Search = (props) => {
|
|
4426
|
-
const hasResults = !!props.results && React
|
|
4426
|
+
const hasResults = !!props.results && React.Children.count(props.results) > 0;
|
|
4427
4427
|
const placeholder = props.placeholder || "Quick search...";
|
|
4428
|
-
const searchRef = React
|
|
4429
|
-
const handler = React
|
|
4428
|
+
const searchRef = React.useRef(null);
|
|
4429
|
+
const handler = React.useCallback(
|
|
4430
4430
|
debounce((search) => props.onSearch && props.onSearch(search)),
|
|
4431
4431
|
[]
|
|
4432
4432
|
);
|
|
4433
|
-
React
|
|
4433
|
+
React.useEffect(() => {
|
|
4434
4434
|
if (searchRef.current) {
|
|
4435
4435
|
searchRef.current.focus();
|
|
4436
4436
|
}
|
|
4437
4437
|
}, [!!props.open]);
|
|
4438
|
-
return /* @__PURE__ */ React
|
|
4438
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(SearchButton, { disabled: props.disabled, placeholder, onClick: props.onOpen }), /* @__PURE__ */ React.createElement(Modal, { onClose: props.onClose, visible: props.open }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[28rem]" }, /* @__PURE__ */ React.createElement("label", { className: "relative block w-full top-4 px-12 border-b border-slate-100" }, /* @__PURE__ */ React.createElement("span", { className: "absolute inset-y-0 left-0 top-0 flex items-center px-5" }, /* @__PURE__ */ React.createElement(Button, { active: true, icon: "search" })), /* @__PURE__ */ React.createElement(
|
|
4439
4439
|
"input",
|
|
4440
4440
|
{
|
|
4441
4441
|
ref: searchRef,
|
|
@@ -4448,25 +4448,25 @@ const Search = (props) => {
|
|
|
4448
4448
|
name: "search",
|
|
4449
4449
|
placeholder: `Search ${props.category || ""}`.trim()
|
|
4450
4450
|
}
|
|
4451
|
-
), /* @__PURE__ */ React
|
|
4451
|
+
), /* @__PURE__ */ React.createElement("span", { className: "absolute inset-y-0 right-0 top-0 flex items-center px-5" }, /* @__PURE__ */ React.createElement(Button, { spacing: "xs", border: "rounded", size: "tiny", text: "esc", onClick: props.onClose }))), !!hasResults && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 w-full gap-1 mt-4 max-h-[24rem] overflow-auto" }, props.results), !hasResults && /* @__PURE__ */ React.createElement("div", { className: "h-4" }))));
|
|
4452
4452
|
};
|
|
4453
4453
|
|
|
4454
4454
|
const LegalAgreement = (props) => {
|
|
4455
|
-
return /* @__PURE__ */ React
|
|
4455
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] rounded-md bg-white border border-slate-200 px-8 py-5 shadow-sm grid grid-cols-1 gap-4 justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "shield" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center w-[14rem] md:w-[16rem]" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "Local Civics Policies"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Confirm that you have read and agree to our", " ", /* @__PURE__ */ React.createElement(
|
|
4456
4456
|
"button",
|
|
4457
4457
|
{
|
|
4458
4458
|
className: "text-sky-400 underline hover:text-sky-600 cursor-pointer",
|
|
4459
4459
|
onClick: () => window.open("https://www.localcivics.io/terms-of-service", "_blank")
|
|
4460
4460
|
},
|
|
4461
4461
|
"Terms of Service"
|
|
4462
|
-
), " ", "and", " ", /* @__PURE__ */ React
|
|
4462
|
+
), " ", "and", " ", /* @__PURE__ */ React.createElement(
|
|
4463
4463
|
"button",
|
|
4464
4464
|
{
|
|
4465
4465
|
className: "text-sky-400 underline hover:text-sky-600 cursor-pointer",
|
|
4466
4466
|
onClick: () => window.open("https://www.localcivics.io/privacy-policy", "_blank")
|
|
4467
4467
|
},
|
|
4468
4468
|
"Privacy Policy"
|
|
4469
|
-
), ".")), /* @__PURE__ */ React
|
|
4469
|
+
), ".")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-8 justify-between" }, /* @__PURE__ */ React.createElement(Button, { spacing: "md", border: "rounded", color: "sky", text: "Decline", size: "md", onClick: props.onDecline }), /* @__PURE__ */ React.createElement(
|
|
4470
4470
|
Button,
|
|
4471
4471
|
{
|
|
4472
4472
|
icon: "accept",
|
|
@@ -4501,8 +4501,8 @@ var __spreadValues$5 = (a, b) => {
|
|
|
4501
4501
|
};
|
|
4502
4502
|
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
4503
4503
|
const CommunitySearch = (props) => {
|
|
4504
|
-
const [accessCode, setAccessCode] = React
|
|
4505
|
-
return /* @__PURE__ */ React
|
|
4504
|
+
const [accessCode, setAccessCode] = React.useState("");
|
|
4505
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[30rem] bg-white grid grid-cols-1 gap-4 rounded-md border border-slate-200 px-8 py-5 shadow-sm" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "Which is your community?"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Pick your community.")), /* @__PURE__ */ React.createElement(Search, __spreadProps$4(__spreadValues$5({}, props), { autofocus: !accessCode, placeholder: props.name })), !!props.name && /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 grid-cols-1 gap-2" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, "Enter the access code for"), /* @__PURE__ */ React.createElement("span", { className: "ml-1 font-semibold text-sm" }, props.name), /* @__PURE__ */ React.createElement("span", { className: "text-sm" }, ".")), /* @__PURE__ */ React.createElement("div", { className: "mt-2 content-center grid grid-cols-3 gap-x-2" }, /* @__PURE__ */ React.createElement(
|
|
4506
4506
|
"input",
|
|
4507
4507
|
{
|
|
4508
4508
|
disabled: props.disabled,
|
|
@@ -4512,7 +4512,7 @@ const CommunitySearch = (props) => {
|
|
|
4512
4512
|
defaultValue: props.accessCode,
|
|
4513
4513
|
className: "col-span-2 h-full w-full block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
4514
4514
|
}
|
|
4515
|
-
), /* @__PURE__ */ React
|
|
4515
|
+
), /* @__PURE__ */ React.createElement("div", { className: "col-span-1" }, /* @__PURE__ */ React.createElement(
|
|
4516
4516
|
Button,
|
|
4517
4517
|
{
|
|
4518
4518
|
disabled: !accessCode || props.disabled,
|
|
@@ -4528,7 +4528,7 @@ const CommunitySearch = (props) => {
|
|
|
4528
4528
|
};
|
|
4529
4529
|
|
|
4530
4530
|
const RoleSelection = (props) => {
|
|
4531
|
-
return /* @__PURE__ */ React
|
|
4531
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] shadow-sm bg-white rounded-md border border-slate-200 px-8 py-5 grid grid-cols-1 gap-4 justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "profile" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "What is your persona?"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Pick your community persona.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-8 justify-between" }, /* @__PURE__ */ React.createElement(
|
|
4532
4532
|
Button,
|
|
4533
4533
|
{
|
|
4534
4534
|
active: props.persona === "student",
|
|
@@ -4540,7 +4540,7 @@ const RoleSelection = (props) => {
|
|
|
4540
4540
|
size: "md",
|
|
4541
4541
|
onClick: props.onStudent
|
|
4542
4542
|
}
|
|
4543
|
-
), /* @__PURE__ */ React
|
|
4543
|
+
), /* @__PURE__ */ React.createElement(
|
|
4544
4544
|
Button,
|
|
4545
4545
|
{
|
|
4546
4546
|
active: props.persona === "educator",
|
|
@@ -4556,17 +4556,17 @@ const RoleSelection = (props) => {
|
|
|
4556
4556
|
};
|
|
4557
4557
|
|
|
4558
4558
|
const Registration = (props) => {
|
|
4559
|
-
const [givenName, setGivenName] = React
|
|
4560
|
-
const [familyName, setFamilyName] = React
|
|
4561
|
-
const [grade, setGrade] = React
|
|
4562
|
-
const [impactStatement, setImpactStatement] = React
|
|
4559
|
+
const [givenName, setGivenName] = React.useState(props.givenName);
|
|
4560
|
+
const [familyName, setFamilyName] = React.useState(props.familyName);
|
|
4561
|
+
const [grade, setGrade] = React.useState(props.grade);
|
|
4562
|
+
const [impactStatement, setImpactStatement] = React.useState(props.impactStatement);
|
|
4563
4563
|
const onRegister = () => props.onRegister && props.onRegister({
|
|
4564
4564
|
givenName,
|
|
4565
4565
|
familyName,
|
|
4566
4566
|
grade,
|
|
4567
4567
|
impactStatement
|
|
4568
4568
|
});
|
|
4569
|
-
return /* @__PURE__ */ React
|
|
4569
|
+
return /* @__PURE__ */ React.createElement(
|
|
4570
4570
|
"form",
|
|
4571
4571
|
{
|
|
4572
4572
|
onSubmit: (e) => {
|
|
@@ -4575,8 +4575,8 @@ const Registration = (props) => {
|
|
|
4575
4575
|
},
|
|
4576
4576
|
className: "w-full md:w-[32rem] rounded-md border bg-white border-slate-200 shadow-sm px-8 py-5 grid grid-cols-1 gap-4 -mt-4"
|
|
4577
4577
|
},
|
|
4578
|
-
/* @__PURE__ */ React
|
|
4579
|
-
/* @__PURE__ */ React
|
|
4578
|
+
/* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-start" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "Welcome to Local!"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, "Tell us a bit more about yourself.")),
|
|
4579
|
+
/* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 pb-4 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-6 h-[18rem] md:h-[24rem] px-1 overflow-y-scroll" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 w-full font-semibold text-slate-500 text-sm" }, "First Name"), /* @__PURE__ */ React.createElement(
|
|
4580
4580
|
"input",
|
|
4581
4581
|
{
|
|
4582
4582
|
required: true,
|
|
@@ -4586,7 +4586,7 @@ const Registration = (props) => {
|
|
|
4586
4586
|
defaultValue: givenName || "",
|
|
4587
4587
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
4588
4588
|
}
|
|
4589
|
-
)), /* @__PURE__ */ React
|
|
4589
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Last Name"), /* @__PURE__ */ React.createElement(
|
|
4590
4590
|
"input",
|
|
4591
4591
|
{
|
|
4592
4592
|
required: true,
|
|
@@ -4595,38 +4595,38 @@ const Registration = (props) => {
|
|
|
4595
4595
|
defaultValue: familyName || "",
|
|
4596
4596
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
4597
4597
|
}
|
|
4598
|
-
)), props.persona === "educator" && /* @__PURE__ */ React
|
|
4598
|
+
)), props.persona === "educator" && /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Subject"), /* @__PURE__ */ React.createElement(
|
|
4599
4599
|
"select",
|
|
4600
4600
|
{
|
|
4601
4601
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
4602
4602
|
defaultValue: grade || "",
|
|
4603
4603
|
className: "appearance-none mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
4604
4604
|
},
|
|
4605
|
-
/* @__PURE__ */ React
|
|
4606
|
-
/* @__PURE__ */ React
|
|
4607
|
-
/* @__PURE__ */ React
|
|
4608
|
-
/* @__PURE__ */ React
|
|
4609
|
-
/* @__PURE__ */ React
|
|
4610
|
-
/* @__PURE__ */ React
|
|
4611
|
-
/* @__PURE__ */ React
|
|
4612
|
-
/* @__PURE__ */ React
|
|
4613
|
-
/* @__PURE__ */ React
|
|
4614
|
-
)), /* @__PURE__ */ React
|
|
4605
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a subject"),
|
|
4606
|
+
/* @__PURE__ */ React.createElement("option", { value: "social-studies-teacher" }, "Social Studies Teacher"),
|
|
4607
|
+
/* @__PURE__ */ React.createElement("option", { value: "english-teacher" }, "English Teacher"),
|
|
4608
|
+
/* @__PURE__ */ React.createElement("option", { value: "math-teacher" }, "Math Teacher"),
|
|
4609
|
+
/* @__PURE__ */ React.createElement("option", { value: "science-teacher" }, "Science Teacher"),
|
|
4610
|
+
/* @__PURE__ */ React.createElement("option", { value: "special-education-teacher" }, "Special Education Teacher (Generalist)"),
|
|
4611
|
+
/* @__PURE__ */ React.createElement("option", { value: "counseling-or-college-and-career" }, "Counseling/College & Career Readiness"),
|
|
4612
|
+
/* @__PURE__ */ React.createElement("option", { value: "non-instructional-staff" }, "Non-Instructional Staff"),
|
|
4613
|
+
/* @__PURE__ */ React.createElement("option", { value: "school-leadership" }, "School Leadership")
|
|
4614
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Grade"), /* @__PURE__ */ React.createElement(
|
|
4615
4615
|
"select",
|
|
4616
4616
|
{
|
|
4617
4617
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
4618
4618
|
defaultValue: grade,
|
|
4619
4619
|
className: "appearance-none mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
4620
4620
|
},
|
|
4621
|
-
/* @__PURE__ */ React
|
|
4622
|
-
/* @__PURE__ */ React
|
|
4623
|
-
/* @__PURE__ */ React
|
|
4624
|
-
/* @__PURE__ */ React
|
|
4625
|
-
/* @__PURE__ */ React
|
|
4626
|
-
/* @__PURE__ */ React
|
|
4627
|
-
/* @__PURE__ */ React
|
|
4628
|
-
/* @__PURE__ */ React
|
|
4629
|
-
)), /* @__PURE__ */ React
|
|
4621
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a grade"),
|
|
4622
|
+
/* @__PURE__ */ React.createElement("option", { value: "6" }, "6th"),
|
|
4623
|
+
/* @__PURE__ */ React.createElement("option", { value: "7" }, "7th"),
|
|
4624
|
+
/* @__PURE__ */ React.createElement("option", { value: "8" }, "8th"),
|
|
4625
|
+
/* @__PURE__ */ React.createElement("option", { value: "9" }, "9th"),
|
|
4626
|
+
/* @__PURE__ */ React.createElement("option", { value: "10" }, "10th"),
|
|
4627
|
+
/* @__PURE__ */ React.createElement("option", { value: "11" }, "11th"),
|
|
4628
|
+
/* @__PURE__ */ React.createElement("option", { value: "12" }, "12th")
|
|
4629
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Impact Statement"), /* @__PURE__ */ React.createElement(
|
|
4630
4630
|
"textarea",
|
|
4631
4631
|
{
|
|
4632
4632
|
required: true,
|
|
@@ -4637,7 +4637,7 @@ const Registration = (props) => {
|
|
|
4637
4637
|
className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
4638
4638
|
}
|
|
4639
4639
|
)))),
|
|
4640
|
-
/* @__PURE__ */ React
|
|
4640
|
+
/* @__PURE__ */ React.createElement(
|
|
4641
4641
|
Button,
|
|
4642
4642
|
{
|
|
4643
4643
|
type: "submit",
|
|
@@ -4672,13 +4672,13 @@ var __spreadValues$4 = (a, b) => {
|
|
|
4672
4672
|
};
|
|
4673
4673
|
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
4674
4674
|
const ImpactQuiz = (props) => {
|
|
4675
|
-
const [started, setStarted] = React
|
|
4676
|
-
const [question, setQuestion] = React
|
|
4675
|
+
const [started, setStarted] = React.useState(false);
|
|
4676
|
+
const [question, setQuestion] = React.useState(0);
|
|
4677
4677
|
const initialAnswers = {};
|
|
4678
4678
|
props.interests && props.interests.map((interest) => {
|
|
4679
4679
|
initialAnswers[interest] = true;
|
|
4680
4680
|
});
|
|
4681
|
-
const [answers, setAnswers] = React
|
|
4681
|
+
const [answers, setAnswers] = React.useState(initialAnswers);
|
|
4682
4682
|
const setAnswer = (key, interest) => {
|
|
4683
4683
|
setAnswers(__spreadProps$3(__spreadValues$4({}, answers), { [key]: interest }));
|
|
4684
4684
|
next();
|
|
@@ -4688,7 +4688,7 @@ const ImpactQuiz = (props) => {
|
|
|
4688
4688
|
switch (props.persona) {
|
|
4689
4689
|
case "educator":
|
|
4690
4690
|
questions2.push(
|
|
4691
|
-
/* @__PURE__ */ React
|
|
4691
|
+
/* @__PURE__ */ React.createElement(
|
|
4692
4692
|
Question,
|
|
4693
4693
|
{
|
|
4694
4694
|
key: "policy & government",
|
|
@@ -4701,7 +4701,7 @@ const ImpactQuiz = (props) => {
|
|
|
4701
4701
|
onAnswer: (interest) => setAnswer("policy & government", interest)
|
|
4702
4702
|
}
|
|
4703
4703
|
),
|
|
4704
|
-
/* @__PURE__ */ React
|
|
4704
|
+
/* @__PURE__ */ React.createElement(
|
|
4705
4705
|
Question,
|
|
4706
4706
|
{
|
|
4707
4707
|
key: "arts & culture",
|
|
@@ -4714,7 +4714,7 @@ const ImpactQuiz = (props) => {
|
|
|
4714
4714
|
onAnswer: (interest) => setAnswer("arts & culture", interest)
|
|
4715
4715
|
}
|
|
4716
4716
|
),
|
|
4717
|
-
/* @__PURE__ */ React
|
|
4717
|
+
/* @__PURE__ */ React.createElement(
|
|
4718
4718
|
Question,
|
|
4719
4719
|
{
|
|
4720
4720
|
key: "sponsored",
|
|
@@ -4731,7 +4731,7 @@ const ImpactQuiz = (props) => {
|
|
|
4731
4731
|
break;
|
|
4732
4732
|
default:
|
|
4733
4733
|
questions2.push(
|
|
4734
|
-
/* @__PURE__ */ React
|
|
4734
|
+
/* @__PURE__ */ React.createElement(
|
|
4735
4735
|
Question,
|
|
4736
4736
|
{
|
|
4737
4737
|
key: "policy & government",
|
|
@@ -4744,7 +4744,7 @@ const ImpactQuiz = (props) => {
|
|
|
4744
4744
|
onAnswer: (interest) => setAnswer("policy & government", interest)
|
|
4745
4745
|
}
|
|
4746
4746
|
),
|
|
4747
|
-
/* @__PURE__ */ React
|
|
4747
|
+
/* @__PURE__ */ React.createElement(
|
|
4748
4748
|
Question,
|
|
4749
4749
|
{
|
|
4750
4750
|
key: "recreation",
|
|
@@ -4757,7 +4757,7 @@ const ImpactQuiz = (props) => {
|
|
|
4757
4757
|
onAnswer: (interest) => setAnswer("recreation", interest)
|
|
4758
4758
|
}
|
|
4759
4759
|
),
|
|
4760
|
-
/* @__PURE__ */ React
|
|
4760
|
+
/* @__PURE__ */ React.createElement(
|
|
4761
4761
|
Question,
|
|
4762
4762
|
{
|
|
4763
4763
|
key: "volunteer",
|
|
@@ -4770,7 +4770,7 @@ const ImpactQuiz = (props) => {
|
|
|
4770
4770
|
onAnswer: (interest) => setAnswer("volunteer", interest)
|
|
4771
4771
|
}
|
|
4772
4772
|
),
|
|
4773
|
-
/* @__PURE__ */ React
|
|
4773
|
+
/* @__PURE__ */ React.createElement(
|
|
4774
4774
|
Question,
|
|
4775
4775
|
{
|
|
4776
4776
|
key: "arts & culture",
|
|
@@ -4783,7 +4783,7 @@ const ImpactQuiz = (props) => {
|
|
|
4783
4783
|
onAnswer: (interest) => setAnswer("arts & culture", interest)
|
|
4784
4784
|
}
|
|
4785
4785
|
),
|
|
4786
|
-
/* @__PURE__ */ React
|
|
4786
|
+
/* @__PURE__ */ React.createElement(
|
|
4787
4787
|
Question,
|
|
4788
4788
|
{
|
|
4789
4789
|
key: "college & career",
|
|
@@ -4796,7 +4796,7 @@ const ImpactQuiz = (props) => {
|
|
|
4796
4796
|
onAnswer: (interest) => setAnswer("college & career", interest)
|
|
4797
4797
|
}
|
|
4798
4798
|
),
|
|
4799
|
-
/* @__PURE__ */ React
|
|
4799
|
+
/* @__PURE__ */ React.createElement(
|
|
4800
4800
|
Question,
|
|
4801
4801
|
{
|
|
4802
4802
|
key: "sponsored",
|
|
@@ -4815,7 +4815,7 @@ const ImpactQuiz = (props) => {
|
|
|
4815
4815
|
return questions2;
|
|
4816
4816
|
})();
|
|
4817
4817
|
const asked = questions.length;
|
|
4818
|
-
const [finished, setFinished] = React
|
|
4818
|
+
const [finished, setFinished] = React.useState(asked === 0);
|
|
4819
4819
|
const start = () => {
|
|
4820
4820
|
setFinished(asked === 0);
|
|
4821
4821
|
setStarted(true);
|
|
@@ -4837,7 +4837,7 @@ const ImpactQuiz = (props) => {
|
|
|
4837
4837
|
setStarted(false);
|
|
4838
4838
|
};
|
|
4839
4839
|
if (!started) {
|
|
4840
|
-
return /* @__PURE__ */ React
|
|
4840
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[20rem] bg-white rounded-md border border-slate-200 px-8 py-5 shadow-sm grid grid-cols-1 gap-2 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "goal" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "Impact Quiz"), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Choose the experiences (if any) that interest you.")), /* @__PURE__ */ React.createElement("div", { className: "my-5" }, /* @__PURE__ */ React.createElement(Button, { spacing: "md", border: "rounded", color: "sky", theme: "dark", text: "Start", size: "md", onClick: start })));
|
|
4841
4841
|
}
|
|
4842
4842
|
const interests = [];
|
|
4843
4843
|
Object.entries(answers).map(([v, interest]) => {
|
|
@@ -4846,7 +4846,7 @@ const ImpactQuiz = (props) => {
|
|
|
4846
4846
|
}
|
|
4847
4847
|
});
|
|
4848
4848
|
if (finished) {
|
|
4849
|
-
return /* @__PURE__ */ React
|
|
4849
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] rounded-md bg-white border border-slate-200 px-8 py-5 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-green-600 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "positive" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-2xl" }, "Done! Nice work."), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "You may continue on or go back to change your answers.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-1 md:grid-cols-2 gap-y-2 gap-x-8 justify-between" }, /* @__PURE__ */ React.createElement(Button, { spacing: "md", border: "rounded", color: "slate", theme: "dark", text: "Restart", size: "md", onClick: restart }), /* @__PURE__ */ React.createElement(
|
|
4850
4850
|
Button,
|
|
4851
4851
|
{
|
|
4852
4852
|
spacing: "md",
|
|
@@ -4859,13 +4859,13 @@ const ImpactQuiz = (props) => {
|
|
|
4859
4859
|
}
|
|
4860
4860
|
)));
|
|
4861
4861
|
}
|
|
4862
|
-
return /* @__PURE__ */ React
|
|
4862
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, questions);
|
|
4863
4863
|
};
|
|
4864
4864
|
const Question = (props) => {
|
|
4865
4865
|
if (!props.visible) {
|
|
4866
4866
|
return null;
|
|
4867
4867
|
}
|
|
4868
|
-
return /* @__PURE__ */ React
|
|
4868
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-8 content-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-full overflow-hidden max-w-[18rem] md:max-w-[30rem] md:w-[30rem] rounded-md bg-white shadow-sm grid grid-cols-1 md:grid-cols-2" }, /* @__PURE__ */ React.createElement("img", { alt: props.headline, className: "w-full h-full object-cover", src: props.imageURL }), /* @__PURE__ */ React.createElement("div", { className: "p-5" }, /* @__PURE__ */ React.createElement("div", { className: "flex" }, /* @__PURE__ */ React.createElement("div", { className: "h-8 w-8 text-slate-500" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.icon }))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 text-slate-500" }, /* @__PURE__ */ React.createElement("p", { className: "font-semibold text-lg" }, props.headline), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, props.summary)))), /* @__PURE__ */ React.createElement("div", { className: "m-auto" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-x-8 gap-y-4" }, /* @__PURE__ */ React.createElement(
|
|
4869
4869
|
Button,
|
|
4870
4870
|
{
|
|
4871
4871
|
spacing: "md",
|
|
@@ -4876,7 +4876,7 @@ const Question = (props) => {
|
|
|
4876
4876
|
size: "md",
|
|
4877
4877
|
onClick: () => props.onAnswer && props.onAnswer(false)
|
|
4878
4878
|
}
|
|
4879
|
-
), /* @__PURE__ */ React
|
|
4879
|
+
), /* @__PURE__ */ React.createElement(
|
|
4880
4880
|
Button,
|
|
4881
4881
|
{
|
|
4882
4882
|
icon: "accept",
|
|
@@ -4892,7 +4892,7 @@ const Question = (props) => {
|
|
|
4892
4892
|
};
|
|
4893
4893
|
|
|
4894
4894
|
const Welcome = (props) => {
|
|
4895
|
-
return /* @__PURE__ */ React
|
|
4895
|
+
return /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] rounded-md bg-white border border-slate-200 px-8 py-5 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "explore" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-2xl" }, /* @__PURE__ */ React.createElement("span", null, "You're all set"), props.givenName && /* @__PURE__ */ React.createElement("span", { className: "capitalize" }, ", ", props.givenName), /* @__PURE__ */ React.createElement("span", null, "!")), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Click continue to start exploring Local.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-1" }, /* @__PURE__ */ React.createElement(
|
|
4896
4896
|
Button,
|
|
4897
4897
|
{
|
|
4898
4898
|
spacing: "md",
|
|
@@ -4926,25 +4926,25 @@ var __spreadValues$3 = (a, b) => {
|
|
|
4926
4926
|
};
|
|
4927
4927
|
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
4928
4928
|
const Onboarding = (props) => {
|
|
4929
|
-
return /* @__PURE__ */ React
|
|
4929
|
+
return /* @__PURE__ */ React.createElement(Modal, { stage: true, isLoading: props.isLoading, inline: true, plain: true, visible: true }, /* @__PURE__ */ React.createElement(Delegate, __spreadValues$3({}, props)));
|
|
4930
4930
|
};
|
|
4931
4931
|
const Delegate = (props) => {
|
|
4932
|
-
const [agreed, setAgreed] = React
|
|
4933
|
-
const [interests, setInterests] = React
|
|
4934
|
-
const [organization, setOrganization] = React
|
|
4935
|
-
const [organizationOpen, setOrganizationOpen] = React
|
|
4936
|
-
const [persona, setPersona] = React
|
|
4932
|
+
const [agreed, setAgreed] = React.useState(!!props.hasOrganization || props.search !== null);
|
|
4933
|
+
const [interests, setInterests] = React.useState(false);
|
|
4934
|
+
const [organization, setOrganization] = React.useState(null);
|
|
4935
|
+
const [organizationOpen, setOrganizationOpen] = React.useState(!!props.search);
|
|
4936
|
+
const [persona, setPersona] = React.useState("");
|
|
4937
4937
|
if (!agreed) {
|
|
4938
|
-
return /* @__PURE__ */ React
|
|
4938
|
+
return /* @__PURE__ */ React.createElement(LegalAgreement, { onDecline: props.onDeclineLegalAgreement, onAccept: () => setAgreed(true) });
|
|
4939
4939
|
}
|
|
4940
4940
|
if (!props.hasOrganization) {
|
|
4941
|
-
return /* @__PURE__ */ React
|
|
4941
|
+
return /* @__PURE__ */ React.createElement(
|
|
4942
4942
|
CommunitySearch,
|
|
4943
4943
|
__spreadProps$2(__spreadValues$3({}, organization), {
|
|
4944
4944
|
open: organizationOpen,
|
|
4945
4945
|
value: props.search,
|
|
4946
4946
|
results: props.organizations && props.organizations.map((organization2) => {
|
|
4947
|
-
return /* @__PURE__ */ React
|
|
4947
|
+
return /* @__PURE__ */ React.createElement(
|
|
4948
4948
|
SearchResult,
|
|
4949
4949
|
{
|
|
4950
4950
|
key: organization2.organizationId,
|
|
@@ -4965,7 +4965,7 @@ const Delegate = (props) => {
|
|
|
4965
4965
|
}
|
|
4966
4966
|
if (!props.hasRegistration) {
|
|
4967
4967
|
if (!persona) {
|
|
4968
|
-
return /* @__PURE__ */ React
|
|
4968
|
+
return /* @__PURE__ */ React.createElement(
|
|
4969
4969
|
RoleSelection,
|
|
4970
4970
|
{
|
|
4971
4971
|
onStudent: () => setPersona("student"),
|
|
@@ -4973,7 +4973,7 @@ const Delegate = (props) => {
|
|
|
4973
4973
|
}
|
|
4974
4974
|
);
|
|
4975
4975
|
}
|
|
4976
|
-
return /* @__PURE__ */ React
|
|
4976
|
+
return /* @__PURE__ */ React.createElement(
|
|
4977
4977
|
Registration,
|
|
4978
4978
|
{
|
|
4979
4979
|
persona,
|
|
@@ -4986,7 +4986,7 @@ const Delegate = (props) => {
|
|
|
4986
4986
|
);
|
|
4987
4987
|
}
|
|
4988
4988
|
if (!interests && !props.hasInterests) {
|
|
4989
|
-
return /* @__PURE__ */ React
|
|
4989
|
+
return /* @__PURE__ */ React.createElement(
|
|
4990
4990
|
ImpactQuiz,
|
|
4991
4991
|
{
|
|
4992
4992
|
persona,
|
|
@@ -4998,14 +4998,14 @@ const Delegate = (props) => {
|
|
|
4998
4998
|
}
|
|
4999
4999
|
);
|
|
5000
5000
|
}
|
|
5001
|
-
return /* @__PURE__ */ React
|
|
5001
|
+
return /* @__PURE__ */ React.createElement(Welcome, { givenName: props.givenName, onContinue: props.onFinish });
|
|
5002
5002
|
};
|
|
5003
5003
|
|
|
5004
5004
|
const PathwayButton = (props) => {
|
|
5005
5005
|
const base = "px-2 py-4 text-left cursor-pointer hover:bg-white active:bg-white";
|
|
5006
5006
|
const bg = props.active ? "bg-sky-100" : "bg-gray-50";
|
|
5007
5007
|
const className = [base, bg].join(" ");
|
|
5008
|
-
return /* @__PURE__ */ React
|
|
5008
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: props.onClick, className }, /* @__PURE__ */ React.createElement("div", { className: "inline-block align-middle w-3 h-3 min-w-3 stroke-slate-600 fill-slate-600" }, /* @__PURE__ */ React.createElement(Icon$1, { name: props.name || "pathway" })), /* @__PURE__ */ React.createElement("span", { className: "ml-2 align-middle capitalize font-semibold text-sm text-slate-600" }, " ", props.name, " "));
|
|
5009
5009
|
};
|
|
5010
5010
|
|
|
5011
5011
|
const PathwayFilter = (props) => {
|
|
@@ -5022,7 +5022,7 @@ const PathwayFilter = (props) => {
|
|
|
5022
5022
|
props.onChange(newPathways);
|
|
5023
5023
|
}
|
|
5024
5024
|
};
|
|
5025
|
-
return /* @__PURE__ */ React
|
|
5025
|
+
return /* @__PURE__ */ React.createElement(
|
|
5026
5026
|
"div",
|
|
5027
5027
|
{
|
|
5028
5028
|
className: "border-gray-200 border shadow-sm rounded-md min-h-48 w-full overflow-hidden",
|
|
@@ -5030,36 +5030,36 @@ const PathwayFilter = (props) => {
|
|
|
5030
5030
|
role: "dialog",
|
|
5031
5031
|
"aria-modal": "true"
|
|
5032
5032
|
},
|
|
5033
|
-
/* @__PURE__ */ React
|
|
5034
|
-
/* @__PURE__ */ React
|
|
5033
|
+
/* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 bg-gray-200" }),
|
|
5034
|
+
/* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1" }, /* @__PURE__ */ React.createElement("div", { className: "p-2 border-b border-gray-200" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grow" }, /* @__PURE__ */ React.createElement("h4", { className: "capitalize align-middle font-semibold text-slate-600 inline-block" }, props.title)))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1" }, /* @__PURE__ */ React.createElement(
|
|
5035
5035
|
PathwayButton,
|
|
5036
5036
|
{
|
|
5037
5037
|
onClick: () => togglePathway("policy & government"),
|
|
5038
5038
|
active: pathways.indexOf("policy & government") >= 0,
|
|
5039
5039
|
name: "policy & government"
|
|
5040
5040
|
}
|
|
5041
|
-
), /* @__PURE__ */ React
|
|
5041
|
+
), /* @__PURE__ */ React.createElement(
|
|
5042
5042
|
PathwayButton,
|
|
5043
5043
|
{
|
|
5044
5044
|
onClick: () => togglePathway("arts & culture"),
|
|
5045
5045
|
active: pathways.indexOf("arts & culture") >= 0,
|
|
5046
5046
|
name: "arts & culture"
|
|
5047
5047
|
}
|
|
5048
|
-
), /* @__PURE__ */ React
|
|
5048
|
+
), /* @__PURE__ */ React.createElement(
|
|
5049
5049
|
PathwayButton,
|
|
5050
5050
|
{
|
|
5051
5051
|
onClick: () => togglePathway("recreation"),
|
|
5052
5052
|
active: pathways.indexOf("recreation") >= 0,
|
|
5053
5053
|
name: "recreation"
|
|
5054
5054
|
}
|
|
5055
|
-
), /* @__PURE__ */ React
|
|
5055
|
+
), /* @__PURE__ */ React.createElement(
|
|
5056
5056
|
PathwayButton,
|
|
5057
5057
|
{
|
|
5058
5058
|
onClick: () => togglePathway("volunteer"),
|
|
5059
5059
|
active: pathways.indexOf("volunteer") >= 0,
|
|
5060
5060
|
name: "volunteer"
|
|
5061
5061
|
}
|
|
5062
|
-
), /* @__PURE__ */ React
|
|
5062
|
+
), /* @__PURE__ */ React.createElement(
|
|
5063
5063
|
PathwayButton,
|
|
5064
5064
|
{
|
|
5065
5065
|
onClick: () => togglePathway("college & career"),
|
|
@@ -5083,7 +5083,7 @@ const PathwayProgress = (props) => {
|
|
|
5083
5083
|
const config = defaultActivityProgressConfig();
|
|
5084
5084
|
const height = props.height || "sm";
|
|
5085
5085
|
withHeight(config, height);
|
|
5086
|
-
return /* @__PURE__ */ React
|
|
5086
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-2 items-center" }, props.icon && /* @__PURE__ */ React.createElement("div", { className: config.icon.container }, /* @__PURE__ */ React.createElement(Button, { disabled: !props.open, size: config.icon.size, icon: props.icon, onClick: props.onOpen })), /* @__PURE__ */ React.createElement("div", { className: "grow grid grid-cols-1 gap-2 items-center" }, /* @__PURE__ */ React.createElement("div", null, props.title && /* @__PURE__ */ React.createElement("p", { className: "capitalize text-xs text-slate-400" }, props.title), /* @__PURE__ */ React.createElement("div", { className: classname(config.progress) }, /* @__PURE__ */ React.createElement(Progress, { start: proficiency, end: nextProficiency }))), /* @__PURE__ */ React.createElement("div", { className: "flex" }, height !== "sm" && /* @__PURE__ */ React.createElement("div", { className: "grow flex gap-x-1" }, /* @__PURE__ */ React.createElement("p", { className: classname(config.xp.value) }, compact(proficiency)), /* @__PURE__ */ React.createElement("p", { className: classname(config.xp.suffix) }, "XP")), height !== "sm" && !!props.level && /* @__PURE__ */ React.createElement("p", { className: classname(config.magnitude) }, compact(nextProficiency - proficiency), " exp. until level ", props.level + 1)))));
|
|
5087
5087
|
};
|
|
5088
5088
|
const defaultActivityProgressConfig = () => {
|
|
5089
5089
|
const config = {
|
|
@@ -5134,27 +5134,27 @@ const withHeight = (config, height) => {
|
|
|
5134
5134
|
};
|
|
5135
5135
|
|
|
5136
5136
|
const PathwayWidget = (props) => {
|
|
5137
|
-
const hasContent = props.children && React
|
|
5138
|
-
return /* @__PURE__ */ React
|
|
5137
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
5138
|
+
return /* @__PURE__ */ React.createElement(Widget, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetHeader, null, /* @__PURE__ */ React.createElement(WidgetTitle, { icon: "pathway" }, "Pathways"), /* @__PURE__ */ React.createElement(WidgetHeaderLink, { onClick: props.onHelp, display: props.edit }, /* @__PURE__ */ React.createElement(Icon$1, { name: "help" }))), /* @__PURE__ */ React.createElement(WidgetBody, null, hasContent && /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, props.children)));
|
|
5139
5139
|
};
|
|
5140
5140
|
|
|
5141
5141
|
const AboutWidget = (props) => {
|
|
5142
5142
|
const hasContent = props.impactStatement || props.placeName || props.communityName;
|
|
5143
|
-
return /* @__PURE__ */ React
|
|
5143
|
+
return /* @__PURE__ */ React.createElement(Widget, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetHeader, null, /* @__PURE__ */ React.createElement(WidgetTitle, { icon: "profile" }, "About Me"), /* @__PURE__ */ React.createElement(WidgetHeaderLink, { onClick: props.onEdit, display: props.edit }, /* @__PURE__ */ React.createElement(Icon$1, { name: "edit" }))), /* @__PURE__ */ React.createElement(WidgetBody, null, hasContent && /* @__PURE__ */ React.createElement("div", { className: "grid gap-2" }, /* @__PURE__ */ React.createElement("p", { className: "line-clamp-10 text-sm text-slate-400" }, props.impactStatement), !!props.placeName && /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex gap-x-2 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-4 h-4 text-slate-600 inline-block" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "pin" })), /* @__PURE__ */ React.createElement("h4", { className: "grow text-sm text-slate-500" }, props.placeName)), props.communityName && /* @__PURE__ */ React.createElement("div", { className: "mt-2 flex gap-x-2 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "w-4 h-4 text-slate-600 inline-block" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "college & career" })), /* @__PURE__ */ React.createElement("h4", { className: "grow text-sm text-slate-500" }, props.communityName)))));
|
|
5144
5144
|
};
|
|
5145
5145
|
|
|
5146
5146
|
const AchievementWidget = (props) => {
|
|
5147
|
-
return /* @__PURE__ */ React
|
|
5147
|
+
return /* @__PURE__ */ React.createElement(Widget, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetHeader, null, /* @__PURE__ */ React.createElement(WidgetTitle, { icon: "achievements" }, "My Achievements")), /* @__PURE__ */ React.createElement(WidgetBody, null, /* @__PURE__ */ React.createElement("div", { className: "flex justify-between gap-x-2 justify-items-center" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-3xl w-max m-auto text-green-500" }, compact(props.lessonsCompleted || 0)), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-center w-max m-auto text-slate-500" }, "Lessons", /* @__PURE__ */ React.createElement("br", null), "Completed")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-3xl w-max m-auto text-green-500" }, compact((props.badgesEarned || 0) + 1)), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-center w-max m-auto text-slate-500" }, "Badges", /* @__PURE__ */ React.createElement("br", null), "Earned")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-3xl w-max m-auto text-green-500" }, compact(props.civicMilestones || 0)), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-center w-max m-auto text-slate-500" }, "Civic", /* @__PURE__ */ React.createElement("br", null), "Milestones")), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-3xl w-max m-auto text-green-500" }, compact(props.serviceHours || 0)), /* @__PURE__ */ React.createElement("p", { className: "text-xs text-center w-max m-auto text-slate-500" }, "Service", /* @__PURE__ */ React.createElement("br", null), "Hours")))));
|
|
5148
5148
|
};
|
|
5149
5149
|
|
|
5150
5150
|
const SettingsCard = (props) => {
|
|
5151
|
-
const [avatarFile, setAvatarFile] = React
|
|
5152
|
-
const [avatarURL, setAvatarURL] = React
|
|
5153
|
-
const [givenName, setGivenName] = React
|
|
5154
|
-
const [familyName, setFamilyName] = React
|
|
5155
|
-
const [grade, setGrade] = React
|
|
5156
|
-
const [impactStatement, setImpactStatement] = React
|
|
5157
|
-
const [focus, setFocus] = React
|
|
5151
|
+
const [avatarFile, setAvatarFile] = React.useState(void 0);
|
|
5152
|
+
const [avatarURL, setAvatarURL] = React.useState(props.avatarURL);
|
|
5153
|
+
const [givenName, setGivenName] = React.useState(props.givenName);
|
|
5154
|
+
const [familyName, setFamilyName] = React.useState(props.familyName);
|
|
5155
|
+
const [grade, setGrade] = React.useState(props.grade);
|
|
5156
|
+
const [impactStatement, setImpactStatement] = React.useState(props.impactStatement);
|
|
5157
|
+
const [focus, setFocus] = React.useState("");
|
|
5158
5158
|
const hasChanges = props.hasChanges || givenName !== props.givenName || familyName !== props.familyName || grade !== props.grade || impactStatement !== props.impactStatement || avatarURL !== props.avatarURL;
|
|
5159
5159
|
const onSave = () => hasChanges && props.onSave && props.onSave({
|
|
5160
5160
|
givenName,
|
|
@@ -5177,14 +5177,14 @@ const SettingsCard = (props) => {
|
|
|
5177
5177
|
reader.readAsDataURL(file);
|
|
5178
5178
|
setFocus("");
|
|
5179
5179
|
};
|
|
5180
|
-
return /* @__PURE__ */ React
|
|
5180
|
+
return /* @__PURE__ */ React.createElement(Modal, { isLoading: props.isLoading, visible: props.visible, onClose: props.onClose }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-2 md:w-[30rem]" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm font-semibold text-slate-500 mb-2 px-6" }, "Settings"), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 pb-4 px-6 gap-6" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center space-x-6" }, /* @__PURE__ */ React.createElement("div", { className: "shrink-0" }, /* @__PURE__ */ React.createElement(
|
|
5181
5181
|
"img",
|
|
5182
5182
|
{
|
|
5183
5183
|
className: "h-16 w-16 object-cover rounded-full",
|
|
5184
5184
|
src: avatarURL || props.avatarURL || "https://cdn.localcivics.io/hub/avatar.jpg",
|
|
5185
5185
|
alt: "Current profile photo"
|
|
5186
5186
|
}
|
|
5187
|
-
)), /* @__PURE__ */ React
|
|
5187
|
+
)), /* @__PURE__ */ React.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Choose profile photo"), /* @__PURE__ */ React.createElement(
|
|
5188
5188
|
"input",
|
|
5189
5189
|
{
|
|
5190
5190
|
onChange: (e) => onAvatarChange(e),
|
|
@@ -5192,7 +5192,7 @@ const SettingsCard = (props) => {
|
|
|
5192
5192
|
type: "file",
|
|
5193
5193
|
className: "block w-full text-sm text-slate-500\n file:mr-4 file:py-2 file:px-4\n file:rounded-full file:border-0\n file:text-sm file:font-semibold\n file:bg-violet-50 file:text-violet-700\n hover:file:bg-violet-100"
|
|
5194
5194
|
}
|
|
5195
|
-
))), /* @__PURE__ */ React
|
|
5195
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-6 h-[18rem] md:h-[24rem] px-1 overflow-y-scroll" }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 w-full font-semibold text-slate-500 text-sm" }, "First Name"), /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-slate-500 text-xs" }, "What is your given name?"), /* @__PURE__ */ React.createElement(
|
|
5196
5196
|
"input",
|
|
5197
5197
|
{
|
|
5198
5198
|
max: 3e3,
|
|
@@ -5204,7 +5204,7 @@ const SettingsCard = (props) => {
|
|
|
5204
5204
|
defaultValue: givenName,
|
|
5205
5205
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
5206
5206
|
}
|
|
5207
|
-
)), /* @__PURE__ */ React
|
|
5207
|
+
)), /* @__PURE__ */ React.createElement("div", { className: "w-full" }, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Last Name"), /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-slate-500 text-xs" }, "What is your family name?"), /* @__PURE__ */ React.createElement(
|
|
5208
5208
|
"input",
|
|
5209
5209
|
{
|
|
5210
5210
|
max: 3e3,
|
|
@@ -5216,22 +5216,22 @@ const SettingsCard = (props) => {
|
|
|
5216
5216
|
defaultValue: familyName,
|
|
5217
5217
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
5218
5218
|
}
|
|
5219
|
-
)), /* @__PURE__ */ React
|
|
5219
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Grade"), /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-slate-500 text-xs" }, "What grade are you in?"), /* @__PURE__ */ React.createElement(
|
|
5220
5220
|
"select",
|
|
5221
5221
|
{
|
|
5222
5222
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
5223
5223
|
defaultValue: grade,
|
|
5224
5224
|
className: "appearance-none mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none"
|
|
5225
5225
|
},
|
|
5226
|
-
/* @__PURE__ */ React
|
|
5227
|
-
/* @__PURE__ */ React
|
|
5228
|
-
/* @__PURE__ */ React
|
|
5229
|
-
/* @__PURE__ */ React
|
|
5230
|
-
/* @__PURE__ */ React
|
|
5231
|
-
/* @__PURE__ */ React
|
|
5232
|
-
/* @__PURE__ */ React
|
|
5233
|
-
/* @__PURE__ */ React
|
|
5234
|
-
)), /* @__PURE__ */ React
|
|
5226
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a grade"),
|
|
5227
|
+
/* @__PURE__ */ React.createElement("option", { value: "6" }, "6th"),
|
|
5228
|
+
/* @__PURE__ */ React.createElement("option", { value: "7" }, "7th"),
|
|
5229
|
+
/* @__PURE__ */ React.createElement("option", { value: "8" }, "8th"),
|
|
5230
|
+
/* @__PURE__ */ React.createElement("option", { value: "9" }, "9th"),
|
|
5231
|
+
/* @__PURE__ */ React.createElement("option", { value: "10" }, "10th"),
|
|
5232
|
+
/* @__PURE__ */ React.createElement("option", { value: "11" }, "11th"),
|
|
5233
|
+
/* @__PURE__ */ React.createElement("option", { value: "12" }, "12th")
|
|
5234
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Impact Statement"), /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-slate-500 text-xs" }, "How would you like to contribute to your community?"), /* @__PURE__ */ React.createElement(
|
|
5235
5235
|
"textarea",
|
|
5236
5236
|
{
|
|
5237
5237
|
maxLength: 3e3,
|
|
@@ -5243,30 +5243,30 @@ const SettingsCard = (props) => {
|
|
|
5243
5243
|
defaultValue: impactStatement,
|
|
5244
5244
|
className: "resize-none text-slate-500 focus:text-slate-600 h-24 mt-1 block w-full px-3 py-2 bg-white border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
5245
5245
|
}
|
|
5246
|
-
)), /* @__PURE__ */ React
|
|
5246
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Access Token"), /* @__PURE__ */ React.createElement("p", { className: "mb-2 text-slate-500 text-xs" }, "Treat this like your password, keep it safe."), /* @__PURE__ */ React.createElement(
|
|
5247
5247
|
"input",
|
|
5248
5248
|
{
|
|
5249
5249
|
disabled: true,
|
|
5250
5250
|
defaultValue: props.accessToken || "",
|
|
5251
5251
|
className: "mt-1 block w-full px-3 py-2 bg-white text-slate-500 focus:text-slate-600 border border-slate-300 rounded-md text-sm shadow-sm placeholder-slate-400\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\n disabled:bg-slate-50 disabled:text-slate-500 disabled:border-slate-200 disabled:shadow-none\n invalid:border-pink-500 invalid:text-pink-600\n focus:invalid:border-pink-500 focus:invalid:ring-pink-500"
|
|
5252
5252
|
}
|
|
5253
|
-
)))), hasChanges && /* @__PURE__ */ React
|
|
5253
|
+
)))), hasChanges && /* @__PURE__ */ React.createElement(Button, { spacing: "lg", border: "rectangle", color: "slate", theme: "dark", text: "Save", onClick: onSave })));
|
|
5254
5254
|
};
|
|
5255
5255
|
|
|
5256
5256
|
const ImpactWidget = (props) => {
|
|
5257
|
-
return /* @__PURE__ */ React
|
|
5257
|
+
return /* @__PURE__ */ React.createElement(Widget, { color: "sky", borderless: true, headless: true, isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetHeader, null, /* @__PURE__ */ React.createElement(WidgetTitle, { icon: "objective" }, "Impact Score")), /* @__PURE__ */ React.createElement(WidgetBody, null, /* @__PURE__ */ React.createElement(PathwayProgress, { height: "md", level: props.level, xp: props.xp, nextXP: props.nextXP })));
|
|
5258
5258
|
};
|
|
5259
5259
|
|
|
5260
5260
|
const ProfileWidget = (props) => {
|
|
5261
5261
|
const hasContent = props.givenName || props.familyName;
|
|
5262
|
-
return /* @__PURE__ */ React
|
|
5262
|
+
return /* @__PURE__ */ React.createElement(Widget, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(WidgetBody, null, hasContent && /* @__PURE__ */ React.createElement("div", { className: "p-2" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
|
|
5263
5263
|
"img",
|
|
5264
5264
|
{
|
|
5265
5265
|
src: props.avatarURL || "https://cdn.localcivics.io/hub/avatar.jpg",
|
|
5266
5266
|
alt: "avatar",
|
|
5267
5267
|
className: "border border-gray-200 shadow-sm w-16 h-16 lg:w-32 lg:h-32 rounded-full object-cover"
|
|
5268
5268
|
}
|
|
5269
|
-
), props.online && /* @__PURE__ */ React
|
|
5269
|
+
), props.online && /* @__PURE__ */ React.createElement("span", { className: "absolute h-3.5 w-3.5 lg:w-4 lg:h-4 top-0 right-0 lg:top-2 lg:right-3 rounded-full bg-green-500 border-4 border-white" })), /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 content-center align-middle" }, /* @__PURE__ */ React.createElement("div", { className: "grid lg:gap-1" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1" }, props.tenantName && /* @__PURE__ */ React.createElement("span", { className: "text-slate-300 text-sm" }, "@", props.tenantName), /* @__PURE__ */ React.createElement("h4", { className: "inline-block font-semibold capitalize text-2xl lg:text-4xl text-slate-600" }, props.givenName, " ", props.familyName)), props.createdAt && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-300" }, "Member since ", new Date(props.createdAt).getFullYear())))))));
|
|
5270
5270
|
};
|
|
5271
5271
|
|
|
5272
5272
|
var __defProp$2 = Object.defineProperty;
|
|
@@ -5286,12 +5286,12 @@ var __spreadValues$2 = (a, b) => {
|
|
|
5286
5286
|
return a;
|
|
5287
5287
|
};
|
|
5288
5288
|
const FormInput = (props) => {
|
|
5289
|
-
return /* @__PURE__ */ React
|
|
5289
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-y-2" }, props.headline && /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-1" }, /* @__PURE__ */ React.createElement("div", { className: "flex items-start gap-x-4" }, /* @__PURE__ */ React.createElement("div", { className: "grow" }, props.headline && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-slate-600 font-semibold" }, props.headline), props.summary && /* @__PURE__ */ React.createElement("p", { className: "text-xs text-slate-500" }, props.summary))), !props.readonly && props.required && /* @__PURE__ */ React.createElement("p", { className: "text-sm text-rose-600" }, "*")), /* @__PURE__ */ React.createElement("div", null, (() => {
|
|
5290
5290
|
switch (props.type) {
|
|
5291
5291
|
case "dropdown":
|
|
5292
|
-
return /* @__PURE__ */ React
|
|
5292
|
+
return /* @__PURE__ */ React.createElement(DropDownInput, __spreadValues$2({}, props));
|
|
5293
5293
|
default:
|
|
5294
|
-
return /* @__PURE__ */ React
|
|
5294
|
+
return /* @__PURE__ */ React.createElement(Input, __spreadValues$2({}, props));
|
|
5295
5295
|
}
|
|
5296
5296
|
})()));
|
|
5297
5297
|
};
|
|
@@ -5303,7 +5303,7 @@ const DropDownInput = (props) => {
|
|
|
5303
5303
|
props.onChange(e.target.value);
|
|
5304
5304
|
}
|
|
5305
5305
|
};
|
|
5306
|
-
return /* @__PURE__ */ React
|
|
5306
|
+
return /* @__PURE__ */ React.createElement(
|
|
5307
5307
|
"select",
|
|
5308
5308
|
{
|
|
5309
5309
|
disabled: props.readonly,
|
|
@@ -5312,9 +5312,9 @@ const DropDownInput = (props) => {
|
|
|
5312
5312
|
name: props.headline,
|
|
5313
5313
|
onChange
|
|
5314
5314
|
},
|
|
5315
|
-
/* @__PURE__ */ React
|
|
5315
|
+
/* @__PURE__ */ React.createElement("option", { value: "" }, props.readonly && !props.value ? "N/A" : "Select one"),
|
|
5316
5316
|
options.map((option) => {
|
|
5317
|
-
return /* @__PURE__ */ React
|
|
5317
|
+
return /* @__PURE__ */ React.createElement("option", { key: option, selected: props.value === option, value: option }, option);
|
|
5318
5318
|
})
|
|
5319
5319
|
);
|
|
5320
5320
|
};
|
|
@@ -5327,7 +5327,7 @@ const Input = (props) => {
|
|
|
5327
5327
|
props.onChange(e.target.value);
|
|
5328
5328
|
}
|
|
5329
5329
|
};
|
|
5330
|
-
return /* @__PURE__ */ React
|
|
5330
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, !props.paragraph && /* @__PURE__ */ React.createElement(
|
|
5331
5331
|
"input",
|
|
5332
5332
|
{
|
|
5333
5333
|
className: `mt-1 block w-full bg-white text-slate-500 ${writeClass} focus:outline-none rounded-sm text-sm placeholder-slate-400`,
|
|
@@ -5341,7 +5341,7 @@ const Input = (props) => {
|
|
|
5341
5341
|
min: props.min,
|
|
5342
5342
|
max: props.max
|
|
5343
5343
|
}
|
|
5344
|
-
), props.paragraph && /* @__PURE__ */ React
|
|
5344
|
+
), props.paragraph && /* @__PURE__ */ React.createElement(
|
|
5345
5345
|
"textarea",
|
|
5346
5346
|
{
|
|
5347
5347
|
className: `resize-none text-slate-500 h-24 mt-1 block w-full bg-white focus:outline-none ${writeClass} rounded-sm text-sm placeholder-slate-400`,
|
|
@@ -5356,7 +5356,7 @@ const Input = (props) => {
|
|
|
5356
5356
|
};
|
|
5357
5357
|
|
|
5358
5358
|
const FormExitDialog = (props) => {
|
|
5359
|
-
return /* @__PURE__ */ React
|
|
5359
|
+
return /* @__PURE__ */ React.createElement(Modal, { visible: true, transparent: true, onClose: props.onNo }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] px-8 py-5 shadow-sm grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-slate-500 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "help" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-lg" }, /* @__PURE__ */ React.createElement("span", null, "Are you sure you want to leave?")), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Your progress will not be saved.")), /* @__PURE__ */ React.createElement("div", { className: "my-5 grid grid-cols-2 gap-4" }, /* @__PURE__ */ React.createElement(
|
|
5360
5360
|
Button,
|
|
5361
5361
|
{
|
|
5362
5362
|
wide: true,
|
|
@@ -5368,7 +5368,7 @@ const FormExitDialog = (props) => {
|
|
|
5368
5368
|
size: "md",
|
|
5369
5369
|
onClick: props.onYes
|
|
5370
5370
|
}
|
|
5371
|
-
), /* @__PURE__ */ React
|
|
5371
|
+
), /* @__PURE__ */ React.createElement(
|
|
5372
5372
|
Button,
|
|
5373
5373
|
{
|
|
5374
5374
|
wide: true,
|
|
@@ -5384,7 +5384,7 @@ const FormExitDialog = (props) => {
|
|
|
5384
5384
|
};
|
|
5385
5385
|
|
|
5386
5386
|
const FormSubmitDialog = (props) => {
|
|
5387
|
-
return /* @__PURE__ */ React
|
|
5387
|
+
return /* @__PURE__ */ React.createElement(Modal, { visible: true, transparent: true, onClose: props.onGoBack }, /* @__PURE__ */ React.createElement("div", { className: "w-full md:w-[24rem] px-8 py-5 shadow-sm grid grid-cols-1 gap-10 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 gap-4 content-center justify-items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-sky-500 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "service-tracking" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-700 text-center" }, /* @__PURE__ */ React.createElement("div", { className: "font-bold text-lg" }, /* @__PURE__ */ React.createElement("span", null, "Your hours are logged!")), /* @__PURE__ */ React.createElement("p", { className: "text-sm max-w-[16rem]" }, "Click continue to go back home."))), /* @__PURE__ */ React.createElement("div", { className: "px-16 w-full" }, /* @__PURE__ */ React.createElement(
|
|
5388
5388
|
Button,
|
|
5389
5389
|
{
|
|
5390
5390
|
wide: true,
|
|
@@ -5419,10 +5419,10 @@ var __spreadValues$1 = (a, b) => {
|
|
|
5419
5419
|
};
|
|
5420
5420
|
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
5421
5421
|
const Form = (props) => {
|
|
5422
|
-
const [showExitDialogue, setShowExitDialogue] = React
|
|
5423
|
-
const [showSubmitDialogue, setShowSubmitDialogue] = React
|
|
5424
|
-
const [responses, setResponses] = React
|
|
5425
|
-
const [inReview, setInReview] = React
|
|
5422
|
+
const [showExitDialogue, setShowExitDialogue] = React.useState(!!props.showExitDialogue);
|
|
5423
|
+
const [showSubmitDialogue, setShowSubmitDialogue] = React.useState(!!props.showSubmitDialogue);
|
|
5424
|
+
const [responses, setResponses] = React.useState({});
|
|
5425
|
+
const [inReview, setInReview] = React.useState(!!props.inReview);
|
|
5426
5426
|
const setResponse = (key, value) => {
|
|
5427
5427
|
setResponses(__spreadProps$1(__spreadValues$1({}, responses), { [key]: value }));
|
|
5428
5428
|
};
|
|
@@ -5438,10 +5438,10 @@ const Form = (props) => {
|
|
|
5438
5438
|
});
|
|
5439
5439
|
}
|
|
5440
5440
|
};
|
|
5441
|
-
React
|
|
5442
|
-
React
|
|
5443
|
-
React
|
|
5444
|
-
return /* @__PURE__ */ React
|
|
5441
|
+
React.useEffect(() => setInReview(!!props.inReview), [props.inReview]);
|
|
5442
|
+
React.useEffect(() => setShowExitDialogue(!!props.showExitDialogue), [props.showExitDialogue]);
|
|
5443
|
+
React.useEffect(() => setShowSubmitDialogue(!!props.showSubmitDialogue), [props.showSubmitDialogue]);
|
|
5444
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Overlay, null, /* @__PURE__ */ React.createElement("div", { className: "flex overflow-auto md:w-max h-screen gap-x-2 justify-items-center content-center m-auto" }, /* @__PURE__ */ React.createElement(Card, { onClose: () => setShowExitDialogue(true) }, /* @__PURE__ */ React.createElement("div", { className: "h-max w-max overflow-x-hidden md:w-[50rem] px-16 py-4 grid grid-cols-1 gap-y-12" }, /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-2 items-center" }, /* @__PURE__ */ React.createElement("div", { className: "text-sky-500 w-14 h-14" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "service-tracking" })), /* @__PURE__ */ React.createElement("div", { className: "text-slate-600" }, /* @__PURE__ */ React.createElement("p", { className: "font-bold text-xl" }, "Service Log"), /* @__PURE__ */ React.createElement("p", { className: "text-sm" }, inReview ? "Please review your submission." : "Tell us about your service below."))), /* @__PURE__ */ React.createElement("form", { className: "w-full m-auto grid grid-cols-1 gap-y-12 pb-8", onSubmit }, props.children, !props.children && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 lg:grid-cols-2 gap-x-6 gap-y-8 items-start max-h-96 overflow-auto" }, /* @__PURE__ */ React.createElement(
|
|
5445
5445
|
FormInput,
|
|
5446
5446
|
{
|
|
5447
5447
|
required: true,
|
|
@@ -5450,7 +5450,7 @@ const Form = (props) => {
|
|
|
5450
5450
|
value: responses["organizationName"],
|
|
5451
5451
|
onChange: (value) => setResponse("organizationName", value)
|
|
5452
5452
|
}
|
|
5453
|
-
), /* @__PURE__ */ React
|
|
5453
|
+
), /* @__PURE__ */ React.createElement(
|
|
5454
5454
|
FormInput,
|
|
5455
5455
|
{
|
|
5456
5456
|
readonly: inReview,
|
|
@@ -5458,7 +5458,7 @@ const Form = (props) => {
|
|
|
5458
5458
|
value: responses["contactPerson"],
|
|
5459
5459
|
onChange: (value) => setResponse("contactPerson", value)
|
|
5460
5460
|
}
|
|
5461
|
-
), /* @__PURE__ */ React
|
|
5461
|
+
), /* @__PURE__ */ React.createElement(
|
|
5462
5462
|
FormInput,
|
|
5463
5463
|
{
|
|
5464
5464
|
readonly: inReview,
|
|
@@ -5467,7 +5467,7 @@ const Form = (props) => {
|
|
|
5467
5467
|
value: responses["contactPhoneNumber"],
|
|
5468
5468
|
onChange: (value) => setResponse("contactPhoneNumber", value)
|
|
5469
5469
|
}
|
|
5470
|
-
), /* @__PURE__ */ React
|
|
5470
|
+
), /* @__PURE__ */ React.createElement(
|
|
5471
5471
|
FormInput,
|
|
5472
5472
|
{
|
|
5473
5473
|
readonly: inReview,
|
|
@@ -5476,7 +5476,7 @@ const Form = (props) => {
|
|
|
5476
5476
|
value: responses["contactEmail"],
|
|
5477
5477
|
onChange: (value) => setResponse("contactEmail", value)
|
|
5478
5478
|
}
|
|
5479
|
-
), /* @__PURE__ */ React
|
|
5479
|
+
), /* @__PURE__ */ React.createElement("div", { className: "grid lg:grid-cols-2 gap-y-8 gap-x-2" }, /* @__PURE__ */ React.createElement(
|
|
5480
5480
|
FormInput,
|
|
5481
5481
|
{
|
|
5482
5482
|
required: true,
|
|
@@ -5486,7 +5486,7 @@ const Form = (props) => {
|
|
|
5486
5486
|
value: responses["date"],
|
|
5487
5487
|
onChange: (value) => setResponse("date", value)
|
|
5488
5488
|
}
|
|
5489
|
-
), /* @__PURE__ */ React
|
|
5489
|
+
), /* @__PURE__ */ React.createElement(
|
|
5490
5490
|
FormInput,
|
|
5491
5491
|
{
|
|
5492
5492
|
required: true,
|
|
@@ -5498,7 +5498,7 @@ const Form = (props) => {
|
|
|
5498
5498
|
value: responses["totalHours"],
|
|
5499
5499
|
onChange: (value) => setResponse("totalHours", value)
|
|
5500
5500
|
}
|
|
5501
|
-
)), /* @__PURE__ */ React
|
|
5501
|
+
)), /* @__PURE__ */ React.createElement(
|
|
5502
5502
|
FormInput,
|
|
5503
5503
|
{
|
|
5504
5504
|
required: true,
|
|
@@ -5509,7 +5509,7 @@ const Form = (props) => {
|
|
|
5509
5509
|
options: ["Community Service", "Capstone", "Internship", "Project", "Other"],
|
|
5510
5510
|
onChange: (value) => setResponse("type", value)
|
|
5511
5511
|
}
|
|
5512
|
-
), /* @__PURE__ */ React
|
|
5512
|
+
), /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-2" }, /* @__PURE__ */ React.createElement(
|
|
5513
5513
|
FormInput,
|
|
5514
5514
|
{
|
|
5515
5515
|
required: true,
|
|
@@ -5519,7 +5519,7 @@ const Form = (props) => {
|
|
|
5519
5519
|
value: responses["description"],
|
|
5520
5520
|
onChange: (value) => setResponse("description", value)
|
|
5521
5521
|
}
|
|
5522
|
-
))), /* @__PURE__ */ React
|
|
5522
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-4 w-max m-auto" }, inReview && /* @__PURE__ */ React.createElement(
|
|
5523
5523
|
Button,
|
|
5524
5524
|
{
|
|
5525
5525
|
onClick: () => setInReview(false),
|
|
@@ -5529,7 +5529,7 @@ const Form = (props) => {
|
|
|
5529
5529
|
border: "rounded",
|
|
5530
5530
|
text: "Edit"
|
|
5531
5531
|
}
|
|
5532
|
-
), /* @__PURE__ */ React
|
|
5532
|
+
), /* @__PURE__ */ React.createElement(
|
|
5533
5533
|
Button,
|
|
5534
5534
|
{
|
|
5535
5535
|
type: "submit",
|
|
@@ -5540,7 +5540,7 @@ const Form = (props) => {
|
|
|
5540
5540
|
theme: "dark",
|
|
5541
5541
|
text: inReview ? "Submit" : "Continue"
|
|
5542
5542
|
}
|
|
5543
|
-
)))))))), showExitDialogue && /* @__PURE__ */ React
|
|
5543
|
+
)))))))), showExitDialogue && /* @__PURE__ */ React.createElement("div", { className: "fixed top-0 left-0 px-4 md:px-2 w-screen h-screen py-5 transition ease-in-out duration-400 bg-gray-200/75 z-40" }, /* @__PURE__ */ React.createElement("div", { className: "flex md:w-max h-screen gap-x-2 justify-items-center content-center m-auto" }, /* @__PURE__ */ React.createElement(FormExitDialog, { onYes: props.onClose, onNo: () => setShowExitDialogue(false) }))), showSubmitDialogue && /* @__PURE__ */ React.createElement("div", { className: "fixed top-0 left-0 px-4 md:px-2 w-screen h-screen py-5 transition ease-in-out duration-400 bg-gray-200/75 z-40" }, /* @__PURE__ */ React.createElement("div", { className: "flex md:w-max h-screen gap-x-2 justify-items-center content-center m-auto" }, /* @__PURE__ */ React.createElement(FormSubmitDialog, { onGoBack: () => setShowSubmitDialogue(false), onContinue: props.onClose }))));
|
|
5544
5544
|
};
|
|
5545
5545
|
|
|
5546
5546
|
var __defProp = Object.defineProperty;
|
|
@@ -5563,7 +5563,7 @@ var __spreadValues = (a, b) => {
|
|
|
5563
5563
|
};
|
|
5564
5564
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
5565
5565
|
const LogServiceButton = (props) => {
|
|
5566
|
-
const [isOpen, setIsOpen] = React
|
|
5566
|
+
const [isOpen, setIsOpen] = React.useState(!!props.isOpen);
|
|
5567
5567
|
const text = props.text || "Log Service";
|
|
5568
5568
|
const onOpen = () => {
|
|
5569
5569
|
if (props.onClick) {
|
|
@@ -5577,10 +5577,10 @@ const LogServiceButton = (props) => {
|
|
|
5577
5577
|
}
|
|
5578
5578
|
setIsOpen(false);
|
|
5579
5579
|
};
|
|
5580
|
-
React
|
|
5580
|
+
React.useEffect(() => {
|
|
5581
5581
|
setIsOpen(!!props.isOpen);
|
|
5582
5582
|
}, [props.isOpen]);
|
|
5583
|
-
return /* @__PURE__ */ React
|
|
5583
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
5584
5584
|
Button,
|
|
5585
5585
|
{
|
|
5586
5586
|
wide: true,
|
|
@@ -5592,7 +5592,7 @@ const LogServiceButton = (props) => {
|
|
|
5592
5592
|
size: "full:md",
|
|
5593
5593
|
onClick: onOpen
|
|
5594
5594
|
}
|
|
5595
|
-
), isOpen && /* @__PURE__ */ React
|
|
5595
|
+
), isOpen && /* @__PURE__ */ React.createElement(Form, __spreadProps(__spreadValues({ onSubmit: props.onSubmit }, props.form), { onClose })));
|
|
5596
5596
|
};
|
|
5597
5597
|
|
|
5598
5598
|
const TaskItem = (props) => {
|
|
@@ -5601,28 +5601,28 @@ const TaskItem = (props) => {
|
|
|
5601
5601
|
const opacity = props.status === "done" ? "opacity-50" : "";
|
|
5602
5602
|
const icon = props.status === "done" ? "accept" : "circle";
|
|
5603
5603
|
const cursor = props.status === "done" ? "" : "cursor-pointer hover:text-cyan-400 hover:bg-slate-50";
|
|
5604
|
-
return /* @__PURE__ */ React
|
|
5604
|
+
return /* @__PURE__ */ React.createElement(
|
|
5605
5605
|
"div",
|
|
5606
5606
|
{
|
|
5607
5607
|
onClick: () => props.onAction && props.onAction(),
|
|
5608
5608
|
className: `flex px-3 py-2 gap-5 align-middle leading-6 items-center ${color} ${cursor} ${border} ${opacity}`
|
|
5609
5609
|
},
|
|
5610
|
-
/* @__PURE__ */ React
|
|
5611
|
-
/* @__PURE__ */ React
|
|
5610
|
+
/* @__PURE__ */ React.createElement("div", { className: "h-3 w-3" }, /* @__PURE__ */ React.createElement(Icon$1, { name: icon })),
|
|
5611
|
+
/* @__PURE__ */ React.createElement("p", { className: "grow font-semibold text-slate-500 text-sm truncate" }, props.headline)
|
|
5612
5612
|
);
|
|
5613
5613
|
};
|
|
5614
5614
|
|
|
5615
5615
|
const TaskList = (props) => {
|
|
5616
5616
|
const active = props.active || "todo";
|
|
5617
|
-
const tabs = /* @__PURE__ */ React
|
|
5618
|
-
const hasContent = props.children && React
|
|
5619
|
-
const workflow = /* @__PURE__ */ React
|
|
5620
|
-
return /* @__PURE__ */ React
|
|
5617
|
+
const tabs = /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(Tab, { disabled: true, secondary: true, icon: "todo", title: "todo", active: active === "todo", onClick: props.onTodo }), /* @__PURE__ */ React.createElement(Tab, { secondary: true, icon: "review", title: "in-progress", active: active === "in-progress", onClick: props.onInProgress }), /* @__PURE__ */ React.createElement(Tab, { secondary: true, icon: "done", title: "done", active: active === "done", onClick: props.onDone }));
|
|
5618
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
5619
|
+
const workflow = /* @__PURE__ */ React.createElement(React.Fragment, null, !hasContent && /* @__PURE__ */ React.createElement("div", { className: "grid justify-items-center content-center h-[12rem] lg:h-[18rem]" }, /* @__PURE__ */ React.createElement("p", { className: "text-sm text-center align-middle leading-6 font-semibold text-slate-300" }, "No content to display.")), hasContent && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 overflow-auto" }, props.children));
|
|
5620
|
+
return /* @__PURE__ */ React.createElement("div", { className: "h-[16rem] lg:h-[22rem] w-full" }, /* @__PURE__ */ React.createElement(Board, { isLoading: props.isLoading, tabs, workflow, secondary: true }));
|
|
5621
5621
|
};
|
|
5622
5622
|
|
|
5623
5623
|
const AuthLayout = (props) => {
|
|
5624
5624
|
const onOnboarding = () => props.onOnboarding && props.onOnboarding();
|
|
5625
|
-
React
|
|
5625
|
+
React.useEffect(() => {
|
|
5626
5626
|
var _a;
|
|
5627
5627
|
if (!props.tenantName) {
|
|
5628
5628
|
return;
|
|
@@ -5632,7 +5632,7 @@ const AuthLayout = (props) => {
|
|
|
5632
5632
|
return;
|
|
5633
5633
|
}
|
|
5634
5634
|
}, [props.tenantName, props.impactStatement, props.pathname]);
|
|
5635
|
-
return /* @__PURE__ */ React
|
|
5635
|
+
return /* @__PURE__ */ React.createElement("main", { className: "relative h-screen w-full bg-white font-proxima" }, /* @__PURE__ */ React.createElement(Loader, { isLoading: props.isLoading }, /* @__PURE__ */ React.createElement(NavBar, null, /* @__PURE__ */ React.createElement(NavLink, { disabled: !props.onHome || props.disabled, name: "home", onClick: props.onHome }), props.onFAQ && /* @__PURE__ */ React.createElement(NavLink, { name: "faq", onClick: props.onFAQ }), props.onPrivacy && /* @__PURE__ */ React.createElement(NavLink, { name: "privacy", onClick: props.onPrivacy }), props.onTerms && /* @__PURE__ */ React.createElement(NavLink, { name: "terms", onClick: props.onTerms }), props.onProfile && /* @__PURE__ */ React.createElement(
|
|
5636
5636
|
NavLink,
|
|
5637
5637
|
{
|
|
5638
5638
|
disabled: props.disabled,
|
|
@@ -5640,7 +5640,7 @@ const AuthLayout = (props) => {
|
|
|
5640
5640
|
onClick: props.onProfile,
|
|
5641
5641
|
active: props.page === "profile"
|
|
5642
5642
|
}
|
|
5643
|
-
), props.onExplore && /* @__PURE__ */ React
|
|
5643
|
+
), props.onExplore && /* @__PURE__ */ React.createElement(
|
|
5644
5644
|
NavLink,
|
|
5645
5645
|
{
|
|
5646
5646
|
disabled: props.disabled,
|
|
@@ -5648,7 +5648,7 @@ const AuthLayout = (props) => {
|
|
|
5648
5648
|
onClick: props.onExplore,
|
|
5649
5649
|
active: props.page === "explore"
|
|
5650
5650
|
}
|
|
5651
|
-
), props.onCalendar && /* @__PURE__ */ React
|
|
5651
|
+
), props.onCalendar && /* @__PURE__ */ React.createElement(
|
|
5652
5652
|
NavLink,
|
|
5653
5653
|
{
|
|
5654
5654
|
disabled: props.disabled,
|
|
@@ -5656,12 +5656,12 @@ const AuthLayout = (props) => {
|
|
|
5656
5656
|
onClick: props.onCalendar,
|
|
5657
5657
|
active: props.page === "calendar"
|
|
5658
5658
|
}
|
|
5659
|
-
), props.onSwitchAccount && /* @__PURE__ */ React
|
|
5659
|
+
), props.onSwitchAccount && /* @__PURE__ */ React.createElement(NavLink, { name: "switch accounts", onClick: props.onSwitchAccount }), props.onLogout && /* @__PURE__ */ React.createElement(NavLink, { name: "Logout", onClick: props.onLogout })), props.children && /* @__PURE__ */ React.createElement("section", { className: "absolute top-0 left-0 h-full overflow-auto pt-16 w-full" }, props.children), !props.children && /* @__PURE__ */ React.createElement("section", { className: "w-full px-4 py-5 lg:px-36 flex flex-col gap-4" }, props.header && /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-[62.5rem] m-auto min-h-16 lg:min-h-24 lg:flex" }, props.header), /* @__PURE__ */ React.createElement("div", { className: "grow w-full min-h-96" }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-[62.5rem] m-auto grid grid-cols-1 gap-y-4 lg:flex lg:gap-x-2" }, props.sidebar && /* @__PURE__ */ React.createElement("div", { className: "grid grid-cols-1 max-w-full md:flex md:flex-col gap-2 lg:w-[16rem] shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-4 lg:gap-x-2 lg:gap-y-3" }, props.sidebar), /* @__PURE__ */ React.createElement("p", { className: "hidden place-self-center lg:inline-block text-xs text-slate-300" }, "Local Civics \xA9 ", new Date().getFullYear())), (props.subheader || props.main) && /* @__PURE__ */ React.createElement("div", { className: "grow grid grid-cols-1 max-w-full overflow-x-hidden md:flex md:flex-col gap-4 lg:gap-2" }, props.subheader && /* @__PURE__ */ React.createElement("div", { className: "relative grid grid-cols-1 md:flex w-full gap-4 lg:gap-2" }, props.subheader), props.main && /* @__PURE__ */ React.createElement("div", { className: "relative grid grid-cols-1 w-full gap-4 lg:gap-2" }, props.main)))))), props.outlet);
|
|
5660
5660
|
};
|
|
5661
5661
|
|
|
5662
5662
|
const HomeLayout = (props) => {
|
|
5663
5663
|
const onProfile = () => props.onProfile && props.onProfile();
|
|
5664
|
-
React
|
|
5664
|
+
React.useEffect(() => {
|
|
5665
5665
|
if (props.isLoading) {
|
|
5666
5666
|
return;
|
|
5667
5667
|
}
|
|
@@ -5672,7 +5672,7 @@ const HomeLayout = (props) => {
|
|
|
5672
5672
|
}
|
|
5673
5673
|
}
|
|
5674
5674
|
}, [props.isLoading, props.pathname, props.nickname]);
|
|
5675
|
-
return /* @__PURE__ */ React
|
|
5675
|
+
return /* @__PURE__ */ React.createElement("main", { className: "relative h-screen w-full overflow-hidden bg-white font-proxima" }, /* @__PURE__ */ React.createElement(NavBar, null, /* @__PURE__ */ React.createElement(NavLink, { name: "home", onClick: props.onHome, active: true }), /* @__PURE__ */ React.createElement(NavLink, { name: "login", onClick: props.onLogin }), /* @__PURE__ */ React.createElement(NavLink, { name: "faq", onClick: props.onFAQ }), /* @__PURE__ */ React.createElement(NavLink, { name: "privacy", onClick: props.onPrivacy }), /* @__PURE__ */ React.createElement(NavLink, { name: "terms", onClick: props.onTerms })), /* @__PURE__ */ React.createElement("section", { className: "absolute top-0 left-0 h-full overflow-hidden pt-16 w-full" }, props.children));
|
|
5676
5676
|
};
|
|
5677
5677
|
|
|
5678
5678
|
exports.AboutWidget = AboutWidget;
|