@local-civics/hub-ui 0.1.111 → 0.1.113
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 +336 -336
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +216 -216
- 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
|
require('external-svg-loader');
|
|
5
5
|
var LinkifyIt = require('linkify-it');
|
|
6
6
|
var reactStringReplace = require('react-string-replace');
|
|
@@ -22,7 +22,7 @@ function _interopNamespaceDefault(e) {
|
|
|
22
22
|
return Object.freeze(n);
|
|
23
23
|
}
|
|
24
24
|
|
|
25
|
-
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React
|
|
25
|
+
var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
|
|
26
26
|
|
|
27
27
|
function styleInject(css, ref) {
|
|
28
28
|
if ( ref === void 0 ) ref = {};
|
|
@@ -974,23 +974,23 @@ const Icon$1 = (props) => {
|
|
|
974
974
|
if (!contents) {
|
|
975
975
|
return null;
|
|
976
976
|
}
|
|
977
|
-
return /* @__PURE__ */ React
|
|
977
|
+
return /* @__PURE__ */ React.createElement(
|
|
978
978
|
"svg",
|
|
979
979
|
{
|
|
980
980
|
className: "fill-current stroke-current w-full h-full drop-shadow-[inherit]",
|
|
981
981
|
xmlns: "http://www.w3.org/2000/svg",
|
|
982
982
|
viewBox
|
|
983
983
|
},
|
|
984
|
-
/* @__PURE__ */ React
|
|
984
|
+
/* @__PURE__ */ React.createElement("title", null, props.name),
|
|
985
985
|
contents.map((v, k) => {
|
|
986
|
-
return v.d && /* @__PURE__ */ React
|
|
986
|
+
return v.d && /* @__PURE__ */ React.createElement("path", __spreadValues$g({ key: k }, v));
|
|
987
987
|
}),
|
|
988
|
-
contents.map((v, k) => v.r && /* @__PURE__ */ React
|
|
988
|
+
contents.map((v, k) => v.r && /* @__PURE__ */ React.createElement("circle", __spreadValues$g({ key: k }, v)))
|
|
989
989
|
);
|
|
990
990
|
};
|
|
991
991
|
|
|
992
992
|
const Logo = () => {
|
|
993
|
-
return /* @__PURE__ */ React
|
|
993
|
+
return /* @__PURE__ */ React.createElement(
|
|
994
994
|
"img",
|
|
995
995
|
{
|
|
996
996
|
className: "w-full overflow-hidden object-contain",
|
|
@@ -1011,7 +1011,7 @@ const Button = (props) => {
|
|
|
1011
1011
|
withBorder(config, props.border);
|
|
1012
1012
|
withSpacing(config, props.spacing, props.wide);
|
|
1013
1013
|
const onClick = () => !props.active && !props.disabled && props.onClick && props.onClick();
|
|
1014
|
-
return /* @__PURE__ */ React
|
|
1014
|
+
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)));
|
|
1015
1015
|
};
|
|
1016
1016
|
const defaultConfig$1 = () => {
|
|
1017
1017
|
const config = {
|
|
@@ -1393,7 +1393,7 @@ const Loader = (props) => {
|
|
|
1393
1393
|
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();
|
|
1394
1394
|
const contentClassName = builder("w-full transition ease-in-out duration-500").if(!!props.isLoading, "invisible opacity-0").else("visible opacity-full").build();
|
|
1395
1395
|
const containerClassName = builder("my-auto").if(!!props.isLoading, "relative").build();
|
|
1396
|
-
return /* @__PURE__ */ React
|
|
1396
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", { className: containerClassName }, /* @__PURE__ */ React.createElement("div", { className: loaderClassName }, /* @__PURE__ */ React.createElement(
|
|
1397
1397
|
"svg",
|
|
1398
1398
|
{
|
|
1399
1399
|
className: "m-auto stroke-sky-300",
|
|
@@ -1402,7 +1402,7 @@ const Loader = (props) => {
|
|
|
1402
1402
|
viewBox: "0 0 45 45",
|
|
1403
1403
|
xmlns: "http://www.w3.org/2000/svg"
|
|
1404
1404
|
},
|
|
1405
|
-
/* @__PURE__ */ React
|
|
1405
|
+
/* @__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(
|
|
1406
1406
|
"animate",
|
|
1407
1407
|
{
|
|
1408
1408
|
attributeName: "r",
|
|
@@ -1412,7 +1412,7 @@ const Loader = (props) => {
|
|
|
1412
1412
|
calcMode: "linear",
|
|
1413
1413
|
repeatCount: "indefinite"
|
|
1414
1414
|
}
|
|
1415
|
-
), /* @__PURE__ */ React
|
|
1415
|
+
), /* @__PURE__ */ React.createElement(
|
|
1416
1416
|
"animate",
|
|
1417
1417
|
{
|
|
1418
1418
|
attributeName: "stroke-opacity",
|
|
@@ -1422,7 +1422,7 @@ const Loader = (props) => {
|
|
|
1422
1422
|
calcMode: "linear",
|
|
1423
1423
|
repeatCount: "indefinite"
|
|
1424
1424
|
}
|
|
1425
|
-
), /* @__PURE__ */ React
|
|
1425
|
+
), /* @__PURE__ */ React.createElement(
|
|
1426
1426
|
"animate",
|
|
1427
1427
|
{
|
|
1428
1428
|
attributeName: "stroke-width",
|
|
@@ -1432,7 +1432,7 @@ const Loader = (props) => {
|
|
|
1432
1432
|
calcMode: "linear",
|
|
1433
1433
|
repeatCount: "indefinite"
|
|
1434
1434
|
}
|
|
1435
|
-
)), /* @__PURE__ */ React
|
|
1435
|
+
)), /* @__PURE__ */ React.createElement("circle", { cx: "22", cy: "22", r: "6", strokeOpacity: "0" }, /* @__PURE__ */ React.createElement(
|
|
1436
1436
|
"animate",
|
|
1437
1437
|
{
|
|
1438
1438
|
attributeName: "r",
|
|
@@ -1442,7 +1442,7 @@ const Loader = (props) => {
|
|
|
1442
1442
|
calcMode: "linear",
|
|
1443
1443
|
repeatCount: "indefinite"
|
|
1444
1444
|
}
|
|
1445
|
-
), /* @__PURE__ */ React
|
|
1445
|
+
), /* @__PURE__ */ React.createElement(
|
|
1446
1446
|
"animate",
|
|
1447
1447
|
{
|
|
1448
1448
|
attributeName: "stroke-opacity",
|
|
@@ -1452,7 +1452,7 @@ const Loader = (props) => {
|
|
|
1452
1452
|
calcMode: "linear",
|
|
1453
1453
|
repeatCount: "indefinite"
|
|
1454
1454
|
}
|
|
1455
|
-
), /* @__PURE__ */ React
|
|
1455
|
+
), /* @__PURE__ */ React.createElement(
|
|
1456
1456
|
"animate",
|
|
1457
1457
|
{
|
|
1458
1458
|
attributeName: "stroke-width",
|
|
@@ -1462,7 +1462,7 @@ const Loader = (props) => {
|
|
|
1462
1462
|
calcMode: "linear",
|
|
1463
1463
|
repeatCount: "indefinite"
|
|
1464
1464
|
}
|
|
1465
|
-
)), /* @__PURE__ */ React
|
|
1465
|
+
)), /* @__PURE__ */ React.createElement("circle", { cx: "22", cy: "22", r: "8" }, /* @__PURE__ */ React.createElement(
|
|
1466
1466
|
"animate",
|
|
1467
1467
|
{
|
|
1468
1468
|
attributeName: "r",
|
|
@@ -1473,7 +1473,7 @@ const Loader = (props) => {
|
|
|
1473
1473
|
repeatCount: "indefinite"
|
|
1474
1474
|
}
|
|
1475
1475
|
)))
|
|
1476
|
-
)), /* @__PURE__ */ React
|
|
1476
|
+
)), /* @__PURE__ */ React.createElement("div", { className: contentClassName }, props.children)));
|
|
1477
1477
|
};
|
|
1478
1478
|
|
|
1479
1479
|
const Modal = (props) => {
|
|
@@ -1484,7 +1484,7 @@ const Modal = (props) => {
|
|
|
1484
1484
|
props.onClose();
|
|
1485
1485
|
}
|
|
1486
1486
|
};
|
|
1487
|
-
return /* @__PURE__ */ React
|
|
1487
|
+
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))));
|
|
1488
1488
|
};
|
|
1489
1489
|
|
|
1490
1490
|
const ActivityCard = (props) => {
|
|
@@ -1495,7 +1495,7 @@ const ActivityCard = (props) => {
|
|
|
1495
1495
|
const status = inProgress ? "in-progress" : props.isBookmarked ? "subscribed" : "unsubscribed";
|
|
1496
1496
|
switch (status) {
|
|
1497
1497
|
case "in-progress":
|
|
1498
|
-
return /* @__PURE__ */ React
|
|
1498
|
+
return /* @__PURE__ */ React.createElement(
|
|
1499
1499
|
Button,
|
|
1500
1500
|
{
|
|
1501
1501
|
onClick: props.onLaunch,
|
|
@@ -1508,7 +1508,7 @@ const ActivityCard = (props) => {
|
|
|
1508
1508
|
}
|
|
1509
1509
|
);
|
|
1510
1510
|
case "unsubscribed":
|
|
1511
|
-
return /* @__PURE__ */ React
|
|
1511
|
+
return /* @__PURE__ */ React.createElement(
|
|
1512
1512
|
Button,
|
|
1513
1513
|
{
|
|
1514
1514
|
onClick: props.onRegister,
|
|
@@ -1521,7 +1521,7 @@ const ActivityCard = (props) => {
|
|
|
1521
1521
|
}
|
|
1522
1522
|
);
|
|
1523
1523
|
case "subscribed":
|
|
1524
|
-
return /* @__PURE__ */ React
|
|
1524
|
+
return /* @__PURE__ */ React.createElement(
|
|
1525
1525
|
Button,
|
|
1526
1526
|
{
|
|
1527
1527
|
onClick: props.onUnregister,
|
|
@@ -1535,7 +1535,7 @@ const ActivityCard = (props) => {
|
|
|
1535
1535
|
);
|
|
1536
1536
|
}
|
|
1537
1537
|
};
|
|
1538
|
-
return /* @__PURE__ */ React
|
|
1538
|
+
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(
|
|
1539
1539
|
Button,
|
|
1540
1540
|
{
|
|
1541
1541
|
disabled: !props.canReflect,
|
|
@@ -1547,8 +1547,8 @@ const ActivityCard = (props) => {
|
|
|
1547
1547
|
size: "md",
|
|
1548
1548
|
onClick: props.onReflect
|
|
1549
1549
|
}
|
|
1550
|
-
))), /* @__PURE__ */ React
|
|
1551
|
-
return /* @__PURE__ */ React
|
|
1550
|
+
))), /* @__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) => {
|
|
1551
|
+
return /* @__PURE__ */ React.createElement(
|
|
1552
1552
|
"button",
|
|
1553
1553
|
{
|
|
1554
1554
|
onClick: () => props.onSkillClick && props.onSkillClick(skill),
|
|
@@ -1557,10 +1557,10 @@ const ActivityCard = (props) => {
|
|
|
1557
1557
|
},
|
|
1558
1558
|
skill
|
|
1559
1559
|
);
|
|
1560
|
-
})))), /* @__PURE__ */ React
|
|
1560
|
+
})))), /* @__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", {
|
|
1561
1561
|
dateStyle: "full",
|
|
1562
1562
|
timeStyle: "long"
|
|
1563
|
-
}).format(new Date(props.startTime)))), props.link && /* @__PURE__ */ React
|
|
1563
|
+
}).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)))))))));
|
|
1564
1564
|
};
|
|
1565
1565
|
|
|
1566
1566
|
const ActivityItem = (props) => {
|
|
@@ -1594,7 +1594,7 @@ const TagFilter = (props) => {
|
|
|
1594
1594
|
props.tags && props.tags.map((tag) => {
|
|
1595
1595
|
init[tag] = true;
|
|
1596
1596
|
});
|
|
1597
|
-
const [active, setActive] = React
|
|
1597
|
+
const [active, setActive] = React.useState(init);
|
|
1598
1598
|
const onTagClick = (tag) => {
|
|
1599
1599
|
if (active[tag]) {
|
|
1600
1600
|
setActive(__spreadProps$d(__spreadValues$f({}, active), { [tag]: false }));
|
|
@@ -1606,38 +1606,38 @@ const TagFilter = (props) => {
|
|
|
1606
1606
|
props.onChange && props.onChange(tags);
|
|
1607
1607
|
}
|
|
1608
1608
|
};
|
|
1609
|
-
React
|
|
1609
|
+
React.useEffect(() => {
|
|
1610
1610
|
props.tags && props.tags.map((tag) => {
|
|
1611
1611
|
init[tag] = true;
|
|
1612
1612
|
});
|
|
1613
1613
|
}, [props.tags]);
|
|
1614
|
-
return /* @__PURE__ */ React
|
|
1614
|
+
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) => {
|
|
1615
1615
|
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";
|
|
1616
1616
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1617
1617
|
const className = [base, bg].join(" ");
|
|
1618
|
-
return /* @__PURE__ */ React
|
|
1619
|
-
}))), /* @__PURE__ */ React
|
|
1618
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1619
|
+
}))), /* @__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) => {
|
|
1620
1620
|
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";
|
|
1621
1621
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1622
1622
|
const className = [base, bg].join(" ");
|
|
1623
|
-
return /* @__PURE__ */ React
|
|
1624
|
-
}))), /* @__PURE__ */ React
|
|
1623
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1624
|
+
}))), /* @__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) => {
|
|
1625
1625
|
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";
|
|
1626
1626
|
const bg = active[tag] ? "bg-sky-500 text-white" : "bg-gray-100 text-gray-600";
|
|
1627
1627
|
const className = [base, bg].join(" ");
|
|
1628
|
-
return /* @__PURE__ */ React
|
|
1628
|
+
return /* @__PURE__ */ React.createElement("button", { onClick: () => onTagClick(tag), key: tag + i, className }, tag);
|
|
1629
1629
|
}))))));
|
|
1630
1630
|
};
|
|
1631
1631
|
|
|
1632
1632
|
const Gallery = (props) => {
|
|
1633
1633
|
const hasPrimary = !!props.primary;
|
|
1634
|
-
const hasTop = props.top && React
|
|
1635
|
-
const hasSoonest = props.soonest && React
|
|
1636
|
-
const hasMilestones = props.milestones && React
|
|
1637
|
-
const numFiltered = props.filtered ? React
|
|
1634
|
+
const hasTop = props.top && React.Children.count(props.top) > 0;
|
|
1635
|
+
const hasSoonest = props.soonest && React.Children.count(props.soonest) > 0;
|
|
1636
|
+
const hasMilestones = props.milestones && React.Children.count(props.milestones) > 0;
|
|
1637
|
+
const numFiltered = props.filtered ? React.Children.count(props.filtered) : 0;
|
|
1638
1638
|
const hasFiltered = numFiltered > 0;
|
|
1639
1639
|
const hasAny = hasPrimary || hasTop || hasSoonest || hasMilestones || hasFiltered;
|
|
1640
|
-
return /* @__PURE__ */ React
|
|
1640
|
+
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.")));
|
|
1641
1641
|
};
|
|
1642
1642
|
|
|
1643
1643
|
const debounce = (func, delay) => {
|
|
@@ -1678,18 +1678,18 @@ const ActivityList = (props) => {
|
|
|
1678
1678
|
const upcoming = props.upcoming ? props.upcoming.filter(
|
|
1679
1679
|
(a) => !topMap[a.activityId] && (!primary || primary && a.activityId !== primary.activityId)
|
|
1680
1680
|
) : props.upcoming;
|
|
1681
|
-
return /* @__PURE__ */ React
|
|
1681
|
+
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(
|
|
1682
1682
|
Gallery,
|
|
1683
1683
|
{
|
|
1684
1684
|
isLoading: props.isLoading,
|
|
1685
|
-
primary: !props.search && primary && /* @__PURE__ */ React
|
|
1685
|
+
primary: !props.search && primary && /* @__PURE__ */ React.createElement(
|
|
1686
1686
|
ActivityItem,
|
|
1687
1687
|
__spreadProps$c(__spreadValues$e({}, primary), {
|
|
1688
1688
|
onClick: () => props.onActivityClick && props.onActivityClick(primary.activityId)
|
|
1689
1689
|
})
|
|
1690
1690
|
),
|
|
1691
|
-
top: !props.search && top && top.length > 0 && /* @__PURE__ */ React
|
|
1692
|
-
return /* @__PURE__ */ React
|
|
1691
|
+
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) => {
|
|
1692
|
+
return /* @__PURE__ */ React.createElement(
|
|
1693
1693
|
ActivityItem,
|
|
1694
1694
|
__spreadProps$c(__spreadValues$e({
|
|
1695
1695
|
key: `${activity.activityId}`
|
|
@@ -1698,8 +1698,8 @@ const ActivityList = (props) => {
|
|
|
1698
1698
|
})
|
|
1699
1699
|
);
|
|
1700
1700
|
})),
|
|
1701
|
-
soonest: !props.search && upcoming && upcoming.length > 0 && /* @__PURE__ */ React
|
|
1702
|
-
return /* @__PURE__ */ React
|
|
1701
|
+
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) => {
|
|
1702
|
+
return /* @__PURE__ */ React.createElement(
|
|
1703
1703
|
ActivityItem,
|
|
1704
1704
|
__spreadProps$c(__spreadValues$e({
|
|
1705
1705
|
key: `${activity.activityId}`
|
|
@@ -1708,8 +1708,8 @@ const ActivityList = (props) => {
|
|
|
1708
1708
|
})
|
|
1709
1709
|
);
|
|
1710
1710
|
})),
|
|
1711
|
-
milestones: !props.search && props.milestones && props.milestones.length > 0 && /* @__PURE__ */ React
|
|
1712
|
-
return /* @__PURE__ */ React
|
|
1711
|
+
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) => {
|
|
1712
|
+
return /* @__PURE__ */ React.createElement(
|
|
1713
1713
|
ActivityItem,
|
|
1714
1714
|
__spreadProps$c(__spreadValues$e({
|
|
1715
1715
|
key: `${activity.activityId}`
|
|
@@ -1719,8 +1719,8 @@ const ActivityList = (props) => {
|
|
|
1719
1719
|
);
|
|
1720
1720
|
})),
|
|
1721
1721
|
filteredCount: (_a = props.activities) == null ? void 0 : _a.length,
|
|
1722
|
-
filtered: !!props.search && props.activities && props.activities.length > 0 && /* @__PURE__ */ React
|
|
1723
|
-
return /* @__PURE__ */ React
|
|
1722
|
+
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) => {
|
|
1723
|
+
return /* @__PURE__ */ React.createElement(
|
|
1724
1724
|
ActivityItem,
|
|
1725
1725
|
__spreadProps$c(__spreadValues$e({
|
|
1726
1726
|
key: `${activity.activityId}`
|
|
@@ -1733,8 +1733,8 @@ const ActivityList = (props) => {
|
|
|
1733
1733
|
));
|
|
1734
1734
|
};
|
|
1735
1735
|
const Search$1 = ({ send, value }) => {
|
|
1736
|
-
const handler = React
|
|
1737
|
-
return /* @__PURE__ */ React
|
|
1736
|
+
const handler = React.useCallback(debounce(send), []);
|
|
1737
|
+
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(
|
|
1738
1738
|
"input",
|
|
1739
1739
|
{
|
|
1740
1740
|
autoFocus: true,
|
|
@@ -1769,20 +1769,20 @@ var __spreadValues$d = (a, b) => {
|
|
|
1769
1769
|
var __spreadProps$b = (a, b) => __defProps$b(a, __getOwnPropDescs$b(b));
|
|
1770
1770
|
const ActivityReflection = (props) => {
|
|
1771
1771
|
const className = builder("w-full md:w-[40rem]").if(!!props.headline, "min-h-[20rem]").build();
|
|
1772
|
-
const [reaction, setReaction] = React
|
|
1772
|
+
const [reaction, setReaction] = React.useState({
|
|
1773
1773
|
rating: props.rating,
|
|
1774
1774
|
reflection: props.reflection
|
|
1775
1775
|
});
|
|
1776
1776
|
const hasChanges = props.hasChanges || props.canReflect && (props.rating !== reaction.rating || props.reflection !== reaction.reflection);
|
|
1777
1777
|
const setFeedback = (feedback) => setReaction(__spreadProps$b(__spreadValues$d({}, reaction), { reflection: feedback }));
|
|
1778
1778
|
const setRating = (rating) => setReaction(__spreadProps$b(__spreadValues$d({}, reaction), { rating }));
|
|
1779
|
-
React
|
|
1779
|
+
React.useEffect(() => {
|
|
1780
1780
|
setReaction({
|
|
1781
1781
|
rating: props.rating,
|
|
1782
1782
|
reflection: props.reflection
|
|
1783
1783
|
});
|
|
1784
1784
|
}, [props.reflection]);
|
|
1785
|
-
return /* @__PURE__ */ React
|
|
1785
|
+
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(
|
|
1786
1786
|
Button,
|
|
1787
1787
|
{
|
|
1788
1788
|
onClick: () => props.onSave && props.onSave(reaction.reflection || "", reaction.rating || 0),
|
|
@@ -1793,7 +1793,7 @@ const ActivityReflection = (props) => {
|
|
|
1793
1793
|
color: "slate",
|
|
1794
1794
|
text: "Save"
|
|
1795
1795
|
}
|
|
1796
|
-
)), /* @__PURE__ */ React
|
|
1796
|
+
)), /* @__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(
|
|
1797
1797
|
"textarea",
|
|
1798
1798
|
{
|
|
1799
1799
|
disabled: !props.canReflect,
|
|
@@ -1802,30 +1802,30 @@ const ActivityReflection = (props) => {
|
|
|
1802
1802
|
defaultValue: props.reflection,
|
|
1803
1803
|
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"
|
|
1804
1804
|
}
|
|
1805
|
-
), props.canReflect && /* @__PURE__ */ React
|
|
1805
|
+
), props.canReflect && /* @__PURE__ */ React.createElement(Rating$1, __spreadProps$b(__spreadValues$d(__spreadValues$d({}, props), reaction), { setRating })))))));
|
|
1806
1806
|
};
|
|
1807
1807
|
const Rating$1 = (props) => {
|
|
1808
1808
|
const maxPoints = 5;
|
|
1809
|
-
const [rating, setRating] = React
|
|
1809
|
+
const [rating, setRating] = React.useState(props.rating || -1);
|
|
1810
1810
|
const buttons = Array.from({ length: maxPoints }, (_, i) => {
|
|
1811
1811
|
const color = i < rating ? "text-sky-200" : "text-slate-200";
|
|
1812
|
-
return /* @__PURE__ */ React
|
|
1812
|
+
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" })));
|
|
1813
1813
|
});
|
|
1814
1814
|
const labels = Array.from({ length: maxPoints }, (_, i) => {
|
|
1815
1815
|
if (i === 0) {
|
|
1816
|
-
return /* @__PURE__ */ React
|
|
1816
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Poor");
|
|
1817
1817
|
}
|
|
1818
1818
|
if (i === maxPoints - 1) {
|
|
1819
|
-
return /* @__PURE__ */ React
|
|
1819
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Amazing");
|
|
1820
1820
|
}
|
|
1821
|
-
return /* @__PURE__ */ React
|
|
1821
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-monochrome-500" });
|
|
1822
1822
|
});
|
|
1823
|
-
React
|
|
1823
|
+
React.useEffect(() => {
|
|
1824
1824
|
if (props.rating && props.rating !== rating) {
|
|
1825
1825
|
setRating(props.rating);
|
|
1826
1826
|
}
|
|
1827
1827
|
}, [props.rating]);
|
|
1828
|
-
return /* @__PURE__ */ React
|
|
1828
|
+
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));
|
|
1829
1829
|
};
|
|
1830
1830
|
|
|
1831
1831
|
var _path$F;
|
|
@@ -3019,14 +3019,14 @@ const Progress = (props) => {
|
|
|
3019
3019
|
return ["bg-gray-200", "bg-green-400"];
|
|
3020
3020
|
}
|
|
3021
3021
|
})();
|
|
3022
|
-
return /* @__PURE__ */ React
|
|
3022
|
+
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}%` } }));
|
|
3023
3023
|
};
|
|
3024
3024
|
|
|
3025
3025
|
const BadgeEmblem = (props) => {
|
|
3026
3026
|
const size = (() => {
|
|
3027
3027
|
switch (props.size) {
|
|
3028
3028
|
case "xxs":
|
|
3029
|
-
return ["h-max w-
|
|
3029
|
+
return ["h-max w-12", "w-6 h-6"];
|
|
3030
3030
|
case "xs":
|
|
3031
3031
|
return ["h-max w-16", "w-8 h-8"];
|
|
3032
3032
|
case "sm":
|
|
@@ -3322,13 +3322,13 @@ const BadgeActivityMenu = (props) => {
|
|
|
3322
3322
|
const WidgetBody = (props) => {
|
|
3323
3323
|
const spacing = props.spacing || "sm";
|
|
3324
3324
|
const className = builder().if(spacing === "sm", "p-2").if(spacing === "md", "p-5").build();
|
|
3325
|
-
const hasContent = props.children && React
|
|
3326
|
-
return /* @__PURE__ */ React
|
|
3325
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
3326
|
+
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);
|
|
3327
3327
|
};
|
|
3328
3328
|
|
|
3329
3329
|
const WidgetHeader = (props) => {
|
|
3330
3330
|
const className = builder().if(!!props.divide, "border-b border-gray-200").if(!props.loose, "p-2").else("p-5").build();
|
|
3331
|
-
return /* @__PURE__ */ React
|
|
3331
|
+
return /* @__PURE__ */ React.createElement("div", { className }, /* @__PURE__ */ React.createElement("div", { className: "flex items-center text-slate-600 items-center gap-x-1" }, props.children));
|
|
3332
3332
|
};
|
|
3333
3333
|
|
|
3334
3334
|
const WidgetHeaderLink = (props) => {
|
|
@@ -3336,9 +3336,9 @@ const WidgetHeaderLink = (props) => {
|
|
|
3336
3336
|
return null;
|
|
3337
3337
|
}
|
|
3338
3338
|
if (typeof props.children === "string") {
|
|
3339
|
-
return /* @__PURE__ */ React
|
|
3339
|
+
return /* @__PURE__ */ React.createElement(Button, { size: props.size || "tiny", text: props.children, onClick: props.onClick });
|
|
3340
3340
|
} else {
|
|
3341
|
-
return /* @__PURE__ */ React
|
|
3341
|
+
return /* @__PURE__ */ React.createElement("div", { className: "flex items-center" }, /* @__PURE__ */ React.createElement(
|
|
3342
3342
|
Button,
|
|
3343
3343
|
{
|
|
3344
3344
|
size: props.size || "xs",
|
|
@@ -3351,12 +3351,12 @@ const WidgetHeaderLink = (props) => {
|
|
|
3351
3351
|
};
|
|
3352
3352
|
|
|
3353
3353
|
const WidgetTitle = (props) => {
|
|
3354
|
-
return /* @__PURE__ */ React
|
|
3354
|
+
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));
|
|
3355
3355
|
};
|
|
3356
3356
|
|
|
3357
3357
|
const Widget = (props) => {
|
|
3358
3358
|
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();
|
|
3359
|
-
return /* @__PURE__ */ React
|
|
3359
|
+
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)));
|
|
3360
3360
|
};
|
|
3361
3361
|
|
|
3362
3362
|
var __defProp$a = Object.defineProperty;
|
|
@@ -3464,13 +3464,13 @@ const BadgeSection = (props) => {
|
|
|
3464
3464
|
"Grid View?"
|
|
3465
3465
|
)))), /* @__PURE__ */ React__namespace.createElement("div", null, !!props.readonly && /* @__PURE__ */ React__namespace.createElement("div", { className: layoutClassName }, preview.map((b, i) => {
|
|
3466
3466
|
return /* @__PURE__ */ React__namespace.createElement(Badge, __spreadProps$8(__spreadValues$a({ key: i }, b), { compact: list, readonly: props.readonly }));
|
|
3467
|
-
})), !props.readonly && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-zinc-600 grid grid-cols-1 gap-y-4" }, (isWithoutFilters || "In Progress" in filters && filters["In Progress"].isActive) && progress.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-
|
|
3467
|
+
})), !props.readonly && /* @__PURE__ */ React__namespace.createElement("div", { className: "text-zinc-600 grid grid-cols-1 gap-y-4" }, (isWithoutFilters || "In Progress" in filters && filters["In Progress"].isActive) && progress.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-md underline font-bold" }, "In Progress"), /* @__PURE__ */ React__namespace.createElement("div", { className: layoutClassName }, progress.map((b, i) => {
|
|
3468
3468
|
return /* @__PURE__ */ React__namespace.createElement(Badge, __spreadProps$8(__spreadValues$a({ key: i }, b), { compact: list }));
|
|
3469
|
-
}))), (isWithoutFilters || "Completed" in filters && filters["Completed"].isActive) && collected.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-
|
|
3469
|
+
}))), (isWithoutFilters || "Completed" in filters && filters["Completed"].isActive) && collected.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-md underline font-bold" }, "Completed"), /* @__PURE__ */ React__namespace.createElement("div", { className: layoutClassName }, collected.map((b, i) => {
|
|
3470
3470
|
return /* @__PURE__ */ React__namespace.createElement(Badge, __spreadProps$8(__spreadValues$a({ key: i }, b), { compact: list }));
|
|
3471
|
-
}))), (isWithoutFilters || "Available" in filters && filters["Available"].isActive) && available.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-
|
|
3471
|
+
}))), (isWithoutFilters || "Available" in filters && filters["Available"].isActive) && available.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-md underline font-bold" }, "Available"), /* @__PURE__ */ React__namespace.createElement("div", { className: layoutClassName }, available.map((b, i) => {
|
|
3472
3472
|
return /* @__PURE__ */ React__namespace.createElement(Badge, __spreadProps$8(__spreadValues$a({ key: i }, b), { compact: list }));
|
|
3473
|
-
}))), (isWithoutFilters || "Locked" in filters && filters["Locked"].isActive) && locked.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-
|
|
3473
|
+
}))), (isWithoutFilters || "Locked" in filters && filters["Locked"].isActive) && locked.length > 0 && /* @__PURE__ */ React__namespace.createElement("div", null, showSectionHeaders && /* @__PURE__ */ React__namespace.createElement("p", { className: "mb-3 text-md underline font-bold" }, "Locked"), /* @__PURE__ */ React__namespace.createElement("div", { className: layoutClassName }, locked.map((b, i) => {
|
|
3474
3474
|
return /* @__PURE__ */ React__namespace.createElement(Badge, __spreadProps$8(__spreadValues$a({ key: i }, b), { compact: list }));
|
|
3475
3475
|
}))))))))));
|
|
3476
3476
|
};
|
|
@@ -3492,7 +3492,7 @@ const activeFilters = (filters) => {
|
|
|
3492
3492
|
};
|
|
3493
3493
|
|
|
3494
3494
|
const BadgeSuccessDialog = (props) => {
|
|
3495
|
-
return /* @__PURE__ */ React
|
|
3495
|
+
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!"))))));
|
|
3496
3496
|
};
|
|
3497
3497
|
|
|
3498
3498
|
const Tab = (props) => {
|
|
@@ -3501,7 +3501,7 @@ const Tab = (props) => {
|
|
|
3501
3501
|
withDisabled(config, props.disabled);
|
|
3502
3502
|
withSecondary(config, props.secondary);
|
|
3503
3503
|
const onClick = () => !props.disabled && !props.active && props.onClick && props.onClick();
|
|
3504
|
-
return /* @__PURE__ */ React
|
|
3504
|
+
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)));
|
|
3505
3505
|
};
|
|
3506
3506
|
const defaultTabConfig = () => {
|
|
3507
3507
|
const config = {
|
|
@@ -3571,20 +3571,20 @@ const withSecondary = (config, secondary) => {
|
|
|
3571
3571
|
const Board = (props) => {
|
|
3572
3572
|
const className = builder().if(!!props.secondary, "pt-2 px-2").else("p-2 bg-gray-200").build();
|
|
3573
3573
|
const layoutClassName = builder("grid grid-cols-3 justify-items-center").if(!props.secondary, "gap-2").build();
|
|
3574
|
-
const hasWorkflow = props.workflow && React
|
|
3575
|
-
return /* @__PURE__ */ React
|
|
3574
|
+
const hasWorkflow = props.workflow && React.Children.count(props.workflow) > 0;
|
|
3575
|
+
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)));
|
|
3576
3576
|
};
|
|
3577
3577
|
|
|
3578
3578
|
const DateSelection = (props) => {
|
|
3579
3579
|
const today = new Date();
|
|
3580
|
-
const [month, setMonth] = React
|
|
3581
|
-
return /* @__PURE__ */ React
|
|
3580
|
+
const [month, setMonth] = React.useState(calend(props.date || today));
|
|
3581
|
+
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 })));
|
|
3582
3582
|
};
|
|
3583
3583
|
const MonthSelection = (props) => {
|
|
3584
3584
|
const month = props.month;
|
|
3585
3585
|
const previousMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() - 1, 1));
|
|
3586
3586
|
const nextMonth = () => props.setMonth(new Date(month.getFullYear(), month.getMonth() + 1, 1));
|
|
3587
|
-
return /* @__PURE__ */ React
|
|
3587
|
+
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" })));
|
|
3588
3588
|
};
|
|
3589
3589
|
const DaySelection = (props) => {
|
|
3590
3590
|
const today = new Date();
|
|
@@ -3596,7 +3596,7 @@ const DaySelection = (props) => {
|
|
|
3596
3596
|
const isCurrentMonth = cur.getMonth() === props.month.getMonth();
|
|
3597
3597
|
const onClick = () => props.setDate(isActive ? null : cur);
|
|
3598
3598
|
Days.push(
|
|
3599
|
-
/* @__PURE__ */ React
|
|
3599
|
+
/* @__PURE__ */ React.createElement(
|
|
3600
3600
|
DaySelectionOption,
|
|
3601
3601
|
{
|
|
3602
3602
|
key: cur.toString(),
|
|
@@ -3609,13 +3609,13 @@ const DaySelection = (props) => {
|
|
|
3609
3609
|
)
|
|
3610
3610
|
);
|
|
3611
3611
|
}
|
|
3612
|
-
return /* @__PURE__ */ React
|
|
3613
|
-
return /* @__PURE__ */ React
|
|
3612
|
+
return /* @__PURE__ */ React.createElement("div", { className: "mt-4 grid grid-cols-7 gap-1 text-sm justify-items-center" }, WEEKDAYS.map((date) => {
|
|
3613
|
+
return /* @__PURE__ */ React.createElement("span", { key: date, className: "w-8 text-center text-slate-400" }, date);
|
|
3614
3614
|
}), Days);
|
|
3615
3615
|
};
|
|
3616
3616
|
const DaySelectionOption = (props) => {
|
|
3617
3617
|
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();
|
|
3618
|
-
return /* @__PURE__ */ React
|
|
3618
|
+
return /* @__PURE__ */ React.createElement("span", { onClick: props.onClick, className }, props.children);
|
|
3619
3619
|
};
|
|
3620
3620
|
const WEEKDAYS = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
|
|
3621
3621
|
const weeks = (date, weeks2) => {
|
|
@@ -3656,7 +3656,7 @@ const background = (name, active, disabled) => {
|
|
|
3656
3656
|
};
|
|
3657
3657
|
|
|
3658
3658
|
const EventItem = (props) => {
|
|
3659
|
-
return /* @__PURE__ */ React
|
|
3659
|
+
return /* @__PURE__ */ React.createElement(
|
|
3660
3660
|
"div",
|
|
3661
3661
|
{
|
|
3662
3662
|
onClick: props.onClick,
|
|
@@ -3664,19 +3664,19 @@ const EventItem = (props) => {
|
|
|
3664
3664
|
props.pathway
|
|
3665
3665
|
)} p-4 rounded-md text-gray-500 h-28`
|
|
3666
3666
|
},
|
|
3667
|
-
/* @__PURE__ */ React
|
|
3668
|
-
/* @__PURE__ */ React
|
|
3669
|
-
/* @__PURE__ */ React
|
|
3667
|
+
/* @__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" })),
|
|
3668
|
+
/* @__PURE__ */ React.createElement("p", { className: "capitalize text-slate-600 text-sm" }, props.pathway),
|
|
3669
|
+
/* @__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))
|
|
3670
3670
|
);
|
|
3671
3671
|
};
|
|
3672
3672
|
|
|
3673
3673
|
const EventList = (props) => {
|
|
3674
3674
|
const date = props.date || new Date();
|
|
3675
|
-
const hasChildren = props.children && React
|
|
3676
|
-
return /* @__PURE__ */ React
|
|
3675
|
+
const hasChildren = props.children && React.Children.count(props.children) > 0;
|
|
3676
|
+
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.")))));
|
|
3677
3677
|
};
|
|
3678
3678
|
const DateTitle = (props) => {
|
|
3679
|
-
return /* @__PURE__ */ React
|
|
3679
|
+
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" })));
|
|
3680
3680
|
};
|
|
3681
3681
|
const formatDate = (date, options) => {
|
|
3682
3682
|
return Intl.DateTimeFormat("en-US", options).format(date);
|
|
@@ -3704,7 +3704,7 @@ const Home = () => {
|
|
|
3704
3704
|
};
|
|
3705
3705
|
|
|
3706
3706
|
const FormExitDialog$1 = (props) => {
|
|
3707
|
-
return /* @__PURE__ */ React
|
|
3707
|
+
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(
|
|
3708
3708
|
Button,
|
|
3709
3709
|
{
|
|
3710
3710
|
wide: true,
|
|
@@ -3716,7 +3716,7 @@ const FormExitDialog$1 = (props) => {
|
|
|
3716
3716
|
size: "md",
|
|
3717
3717
|
onClick: props.onYes
|
|
3718
3718
|
}
|
|
3719
|
-
), /* @__PURE__ */ React
|
|
3719
|
+
), /* @__PURE__ */ React.createElement(
|
|
3720
3720
|
Button,
|
|
3721
3721
|
{
|
|
3722
3722
|
wide: true,
|
|
@@ -3738,7 +3738,7 @@ const linkify = (text) => {
|
|
|
3738
3738
|
const matches = LinkifyIt().match(text);
|
|
3739
3739
|
let replacedText = reactStringReplace(text);
|
|
3740
3740
|
matches == null ? void 0 : matches.forEach((match) => {
|
|
3741
|
-
replacedText = reactStringReplace(replacedText, match.raw, () => /* @__PURE__ */ React
|
|
3741
|
+
replacedText = reactStringReplace(replacedText, match.raw, () => /* @__PURE__ */ React.createElement(
|
|
3742
3742
|
"a",
|
|
3743
3743
|
{
|
|
3744
3744
|
href: match.url,
|
|
@@ -3779,7 +3779,7 @@ const FormItem = (props) => {
|
|
|
3779
3779
|
const isValidAnswer = notEmpty && (props.questionType !== "text" || !isTextError);
|
|
3780
3780
|
const checkIconColor = isValidAnswer ? "text-green-500" : "text-gray-300";
|
|
3781
3781
|
const contentMaxWidth = props.format === "question" ? "max-w-lg" : "";
|
|
3782
|
-
const [showError, setShowError] = React
|
|
3782
|
+
const [showError, setShowError] = React.useState(false);
|
|
3783
3783
|
const itemContainerError = showError && isTextError ? "border-2 border-rose-300" : "";
|
|
3784
3784
|
const onTextBlur = () => {
|
|
3785
3785
|
if (isTextError) {
|
|
@@ -3791,34 +3791,34 @@ const FormItem = (props) => {
|
|
|
3791
3791
|
props.onTextBlur();
|
|
3792
3792
|
}
|
|
3793
3793
|
};
|
|
3794
|
-
React
|
|
3794
|
+
React.useEffect(() => {
|
|
3795
3795
|
if (!isTextError) {
|
|
3796
3796
|
setShowError(false);
|
|
3797
3797
|
}
|
|
3798
3798
|
}, [isTextError]);
|
|
3799
3799
|
const marginBottom = props.format === "text" ? "-mb-7" : "";
|
|
3800
|
-
return /* @__PURE__ */ React
|
|
3800
|
+
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);
|
|
3801
3801
|
};
|
|
3802
3802
|
const Switch = (props) => {
|
|
3803
3803
|
switch (true) {
|
|
3804
3804
|
case props.format === "embed":
|
|
3805
|
-
return /* @__PURE__ */ React
|
|
3805
|
+
return /* @__PURE__ */ React.createElement(Embed, __spreadValues$9({}, props));
|
|
3806
3806
|
case props.format === "image":
|
|
3807
|
-
return /* @__PURE__ */ React
|
|
3807
|
+
return /* @__PURE__ */ React.createElement(Image, __spreadValues$9({}, props));
|
|
3808
3808
|
case props.questionType === "radio":
|
|
3809
|
-
return /* @__PURE__ */ React
|
|
3809
|
+
return /* @__PURE__ */ React.createElement(RadioQuestion, __spreadValues$9({}, props));
|
|
3810
3810
|
case props.questionType === "checkbox":
|
|
3811
|
-
return /* @__PURE__ */ React
|
|
3811
|
+
return /* @__PURE__ */ React.createElement(CheckboxQuestion, __spreadValues$9({}, props));
|
|
3812
3812
|
case props.questionType === "drop down":
|
|
3813
|
-
return /* @__PURE__ */ React
|
|
3813
|
+
return /* @__PURE__ */ React.createElement(DropDownQuestion, __spreadValues$9({}, props));
|
|
3814
3814
|
case props.questionType === "file upload":
|
|
3815
|
-
return /* @__PURE__ */ React
|
|
3815
|
+
return /* @__PURE__ */ React.createElement(FileUploadQuestion, __spreadValues$9({}, props));
|
|
3816
3816
|
case props.questionType === "text":
|
|
3817
|
-
return /* @__PURE__ */ React
|
|
3817
|
+
return /* @__PURE__ */ React.createElement(TextQuestion, __spreadValues$9({}, props));
|
|
3818
3818
|
case props.questionType === "date":
|
|
3819
|
-
return /* @__PURE__ */ React
|
|
3819
|
+
return /* @__PURE__ */ React.createElement(DateQuestion, __spreadValues$9({}, props));
|
|
3820
3820
|
case props.questionType === "time":
|
|
3821
|
-
return /* @__PURE__ */ React
|
|
3821
|
+
return /* @__PURE__ */ React.createElement(TimeQuestion, __spreadValues$9({}, props));
|
|
3822
3822
|
default:
|
|
3823
3823
|
return null;
|
|
3824
3824
|
}
|
|
@@ -3833,8 +3833,8 @@ const RadioQuestion = (props) => {
|
|
|
3833
3833
|
props.onResponseChange([e.target.value]);
|
|
3834
3834
|
}
|
|
3835
3835
|
};
|
|
3836
|
-
return /* @__PURE__ */ React
|
|
3837
|
-
return /* @__PURE__ */ React
|
|
3836
|
+
return /* @__PURE__ */ React.createElement("fieldset", { className: "grid grid-cols-1 gap-y-8" }, options.map((option, index) => {
|
|
3837
|
+
return /* @__PURE__ */ React.createElement("div", { key: option }, /* @__PURE__ */ React.createElement("label", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement(
|
|
3838
3838
|
"input",
|
|
3839
3839
|
{
|
|
3840
3840
|
className: "cursor-pointer",
|
|
@@ -3846,7 +3846,7 @@ const RadioQuestion = (props) => {
|
|
|
3846
3846
|
disabled: props.disabled,
|
|
3847
3847
|
name: displayNameString(props.displayName)
|
|
3848
3848
|
}
|
|
3849
|
-
), /* @__PURE__ */ React
|
|
3849
|
+
), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("span", { className: "font-bold" }, String.fromCharCode(65 + index), "."), " ", option)));
|
|
3850
3850
|
}));
|
|
3851
3851
|
};
|
|
3852
3852
|
const CheckboxQuestion = (props) => {
|
|
@@ -3854,7 +3854,7 @@ const CheckboxQuestion = (props) => {
|
|
|
3854
3854
|
const options = props.options || [];
|
|
3855
3855
|
const responses = props.responses || [];
|
|
3856
3856
|
const values = {};
|
|
3857
|
-
const ref = React
|
|
3857
|
+
const ref = React.useRef(null);
|
|
3858
3858
|
const rawResponse = responses.length > 0 ? responses[0] : ((_a = ref.current) == null ? void 0 : _a.value) || "";
|
|
3859
3859
|
const response = rawResponse.replace("Other: ", "");
|
|
3860
3860
|
const isOtherResponse = rawResponse.startsWith("Other: ");
|
|
@@ -3877,11 +3877,11 @@ const CheckboxQuestion = (props) => {
|
|
|
3877
3877
|
}
|
|
3878
3878
|
};
|
|
3879
3879
|
let isOneChecked = false;
|
|
3880
|
-
React
|
|
3880
|
+
React.useEffect(() => {
|
|
3881
3881
|
}, []);
|
|
3882
|
-
return /* @__PURE__ */ React
|
|
3882
|
+
return /* @__PURE__ */ React.createElement("fieldset", { className: "grid grid-cols-1 gap-y-8" }, options.map((option) => {
|
|
3883
3883
|
isOneChecked = Object.keys(values).length ? true : false;
|
|
3884
|
-
return /* @__PURE__ */ React
|
|
3884
|
+
return /* @__PURE__ */ React.createElement("div", { key: option }, /* @__PURE__ */ React.createElement("label", { className: "flex gap-x-4 items-center" }, /* @__PURE__ */ React.createElement(
|
|
3885
3885
|
"input",
|
|
3886
3886
|
{
|
|
3887
3887
|
id: "checkbox",
|
|
@@ -3894,7 +3894,7 @@ const CheckboxQuestion = (props) => {
|
|
|
3894
3894
|
value: option || response,
|
|
3895
3895
|
name: displayNameString(props.displayName)
|
|
3896
3896
|
}
|
|
3897
|
-
), option && /* @__PURE__ */ React
|
|
3897
|
+
), option && /* @__PURE__ */ React.createElement("div", null, option), !option && /* @__PURE__ */ React.createElement(React.Fragment, null, "Other:", " ", /* @__PURE__ */ React.createElement(
|
|
3898
3898
|
"input",
|
|
3899
3899
|
{
|
|
3900
3900
|
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\r\n focus:outline-none focus:ring-1 focus:ring-sky-500",
|
|
@@ -3918,7 +3918,7 @@ const DropDownQuestion = (props) => {
|
|
|
3918
3918
|
props.onResponseChange([e.target.value]);
|
|
3919
3919
|
}
|
|
3920
3920
|
};
|
|
3921
|
-
return /* @__PURE__ */ React
|
|
3921
|
+
return /* @__PURE__ */ React.createElement(
|
|
3922
3922
|
"select",
|
|
3923
3923
|
{
|
|
3924
3924
|
disabled: props.disabled,
|
|
@@ -3929,16 +3929,16 @@ const DropDownQuestion = (props) => {
|
|
|
3929
3929
|
name: displayNameString(props.displayName),
|
|
3930
3930
|
onChange
|
|
3931
3931
|
},
|
|
3932
|
-
/* @__PURE__ */ React
|
|
3932
|
+
/* @__PURE__ */ React.createElement("option", { className: "cursor-pointer", value: "" }, "Select one"),
|
|
3933
3933
|
options.map((option) => {
|
|
3934
|
-
return /* @__PURE__ */ React
|
|
3934
|
+
return /* @__PURE__ */ React.createElement("option", { key: option, selected: values[option], value: option }, option);
|
|
3935
3935
|
})
|
|
3936
3936
|
);
|
|
3937
3937
|
};
|
|
3938
3938
|
const FileUploadQuestion = (props) => {
|
|
3939
3939
|
const responses = props.responses || [];
|
|
3940
3940
|
const response = responses.length > 0 ? responses[0] : "";
|
|
3941
|
-
const [imageURL, setImageURL] = React
|
|
3941
|
+
const [imageURL, setImageURL] = React.useState(response);
|
|
3942
3942
|
const onChange = (e) => {
|
|
3943
3943
|
if (props.onResponseChange) {
|
|
3944
3944
|
props.onResponseChange([e.target.value]);
|
|
@@ -3960,10 +3960,10 @@ const FileUploadQuestion = (props) => {
|
|
|
3960
3960
|
reader.readAsDataURL(file);
|
|
3961
3961
|
}
|
|
3962
3962
|
};
|
|
3963
|
-
React
|
|
3963
|
+
React.useEffect(() => {
|
|
3964
3964
|
setImageURL(response);
|
|
3965
3965
|
}, [props.questionId, response]);
|
|
3966
|
-
return /* @__PURE__ */ React
|
|
3966
|
+
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(
|
|
3967
3967
|
"input",
|
|
3968
3968
|
{
|
|
3969
3969
|
disabled: props.disabled,
|
|
@@ -3972,7 +3972,7 @@ const FileUploadQuestion = (props) => {
|
|
|
3972
3972
|
type: "file",
|
|
3973
3973
|
className: "block w-full text-sm text-slate-500 disabled:text-gray-600\r\n file:mr-4 file:py-2 file:px-4\r\n file:rounded-full file:border-0\r\n file:text-sm file:font-semibold\r\n file:bg-violet-50 file:text-violet-700\r\n hover:file:bg-violet-100"
|
|
3974
3974
|
}
|
|
3975
|
-
))), /* @__PURE__ */ React
|
|
3975
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "-ml-2" }, /* @__PURE__ */ React.createElement(
|
|
3976
3976
|
"input",
|
|
3977
3977
|
{
|
|
3978
3978
|
type: "url",
|
|
@@ -3995,7 +3995,7 @@ const TextQuestion = (props) => {
|
|
|
3995
3995
|
props.onResponseChange([e.target.value]);
|
|
3996
3996
|
}
|
|
3997
3997
|
};
|
|
3998
|
-
return /* @__PURE__ */ React
|
|
3998
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, !props.paragraph && /* @__PURE__ */ React.createElement(
|
|
3999
3999
|
"input",
|
|
4000
4000
|
{
|
|
4001
4001
|
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\r\n focus:outline-none focus:ring-1 focus:ring-sky-500 focus:border-sky-500\r\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -4009,7 +4009,7 @@ const TextQuestion = (props) => {
|
|
|
4009
4009
|
placeholder: "Your answer",
|
|
4010
4010
|
value: response
|
|
4011
4011
|
}
|
|
4012
|
-
), props.paragraph && /* @__PURE__ */ React
|
|
4012
|
+
), props.paragraph && /* @__PURE__ */ React.createElement(
|
|
4013
4013
|
"textarea",
|
|
4014
4014
|
{
|
|
4015
4015
|
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\r\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -4032,7 +4032,7 @@ const DateQuestion = (props) => {
|
|
|
4032
4032
|
props.onResponseChange([e.target.value]);
|
|
4033
4033
|
}
|
|
4034
4034
|
};
|
|
4035
|
-
return /* @__PURE__ */ React
|
|
4035
|
+
return /* @__PURE__ */ React.createElement(
|
|
4036
4036
|
"input",
|
|
4037
4037
|
{
|
|
4038
4038
|
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\r\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -4053,7 +4053,7 @@ const TimeQuestion = (props) => {
|
|
|
4053
4053
|
props.onResponseChange([e.target.value]);
|
|
4054
4054
|
}
|
|
4055
4055
|
};
|
|
4056
|
-
return /* @__PURE__ */ React
|
|
4056
|
+
return /* @__PURE__ */ React.createElement(
|
|
4057
4057
|
"input",
|
|
4058
4058
|
{
|
|
4059
4059
|
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\r\n focus:outline-none focus:border-sky-500 focus:ring-1 focus:ring-sky-500\r\n disabled:bg-slate-50 disabled:text-gray-600 disabled:border-slate-200 disabled:shadow-none",
|
|
@@ -4067,7 +4067,7 @@ const TimeQuestion = (props) => {
|
|
|
4067
4067
|
);
|
|
4068
4068
|
};
|
|
4069
4069
|
const Image = (props) => {
|
|
4070
|
-
const [scale, setScale] = React
|
|
4070
|
+
const [scale, setScale] = React.useState("");
|
|
4071
4071
|
const scaleUp = () => {
|
|
4072
4072
|
switch (scale) {
|
|
4073
4073
|
case "scale-[0.50]":
|
|
@@ -4112,7 +4112,7 @@ const Image = (props) => {
|
|
|
4112
4112
|
return;
|
|
4113
4113
|
}
|
|
4114
4114
|
};
|
|
4115
|
-
return /* @__PURE__ */ React
|
|
4115
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative max-w-[25rem] md:max-w-[40rem] md:w-[40rem] overflow-hidden" }, /* @__PURE__ */ React.createElement(
|
|
4116
4116
|
"img",
|
|
4117
4117
|
{
|
|
4118
4118
|
referrerPolicy: "no-referrer",
|
|
@@ -4120,10 +4120,10 @@ const Image = (props) => {
|
|
|
4120
4120
|
alt: displayNameString(props.displayName),
|
|
4121
4121
|
src: props.url
|
|
4122
4122
|
}
|
|
4123
|
-
), /* @__PURE__ */ React
|
|
4123
|
+
), /* @__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 }, "-")));
|
|
4124
4124
|
};
|
|
4125
4125
|
const Embed = (props) => {
|
|
4126
|
-
return /* @__PURE__ */ React
|
|
4126
|
+
return /* @__PURE__ */ React.createElement("div", { className: "max-w-[25rem] md:max-w-[40rem] md:w-[40rem]" }, /* @__PURE__ */ React.createElement(
|
|
4127
4127
|
"iframe",
|
|
4128
4128
|
{
|
|
4129
4129
|
className: "w-full",
|
|
@@ -4143,7 +4143,7 @@ const displayNameString = (displayName) => {
|
|
|
4143
4143
|
};
|
|
4144
4144
|
|
|
4145
4145
|
const FormSubmitDialog$1 = (props) => {
|
|
4146
|
-
return /* @__PURE__ */ React
|
|
4146
|
+
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(
|
|
4147
4147
|
Button,
|
|
4148
4148
|
{
|
|
4149
4149
|
wide: true,
|
|
@@ -4155,7 +4155,7 @@ const FormSubmitDialog$1 = (props) => {
|
|
|
4155
4155
|
size: "md",
|
|
4156
4156
|
onClick: props.onGoBack
|
|
4157
4157
|
}
|
|
4158
|
-
), /* @__PURE__ */ React
|
|
4158
|
+
), /* @__PURE__ */ React.createElement(
|
|
4159
4159
|
Button,
|
|
4160
4160
|
{
|
|
4161
4161
|
wide: true,
|
|
@@ -4208,13 +4208,13 @@ const autoSave = (run, func, callback) => {
|
|
|
4208
4208
|
};
|
|
4209
4209
|
const LearningForm = (props) => {
|
|
4210
4210
|
var _a;
|
|
4211
|
-
const [answersKey, setAnswersKey] = React
|
|
4212
|
-
const [reflection, setReflection] = React
|
|
4213
|
-
const [rating, setRating] = React
|
|
4214
|
-
const [showExitDialogue, setShowExitDialogue] = React
|
|
4215
|
-
const [showSubmitDialogue, setShowSubmitDialogue] = React
|
|
4216
|
-
const [isDraft, setIsDraft] = React
|
|
4217
|
-
const autoSaveHandler = React
|
|
4211
|
+
const [answersKey, setAnswersKey] = React.useState(null);
|
|
4212
|
+
const [reflection, setReflection] = React.useState(props.reflection || "");
|
|
4213
|
+
const [rating, setRating] = React.useState(props.rating);
|
|
4214
|
+
const [showExitDialogue, setShowExitDialogue] = React.useState(false);
|
|
4215
|
+
const [showSubmitDialogue, setShowSubmitDialogue] = React.useState(false);
|
|
4216
|
+
const [isDraft, setIsDraft] = React.useState(false);
|
|
4217
|
+
const autoSaveHandler = React.useCallback(
|
|
4218
4218
|
autoSave(isDraft, props.onSaveDraft, () => setIsDraft(false)),
|
|
4219
4219
|
[isDraft]
|
|
4220
4220
|
);
|
|
@@ -4239,21 +4239,21 @@ const LearningForm = (props) => {
|
|
|
4239
4239
|
answeredAllRequired && reflection.length >= MIN_REFLECTION_LENGTH;
|
|
4240
4240
|
const items = props.items || [];
|
|
4241
4241
|
const currentAnswersKey = answers && answers.length > 0 ? JSON.stringify(answers) : null;
|
|
4242
|
-
React
|
|
4242
|
+
React.useEffect(() => {
|
|
4243
4243
|
setRating(props.rating);
|
|
4244
4244
|
}, [props.rating]);
|
|
4245
|
-
React
|
|
4245
|
+
React.useEffect(() => {
|
|
4246
4246
|
setReflection(props.reflection || "");
|
|
4247
4247
|
}, [props.reflection]);
|
|
4248
|
-
React
|
|
4248
|
+
React.useEffect(() => {
|
|
4249
4249
|
autoSaveHandler(answers, reflection, rating);
|
|
4250
4250
|
}, [currentAnswersKey, reflection, rating, isDraft]);
|
|
4251
|
-
React
|
|
4251
|
+
React.useEffect(() => {
|
|
4252
4252
|
if (props.formId) {
|
|
4253
4253
|
setAnswersKey(currentAnswersKey);
|
|
4254
4254
|
}
|
|
4255
4255
|
}, [props.formId]);
|
|
4256
|
-
React
|
|
4256
|
+
React.useEffect(() => {
|
|
4257
4257
|
if (answersKey === null) {
|
|
4258
4258
|
return;
|
|
4259
4259
|
}
|
|
@@ -4282,7 +4282,7 @@ const LearningForm = (props) => {
|
|
|
4282
4282
|
}
|
|
4283
4283
|
};
|
|
4284
4284
|
const bg = props.preview ? "" : "bg-gray-100";
|
|
4285
|
-
return /* @__PURE__ */ React
|
|
4285
|
+
return /* @__PURE__ */ React.createElement("div", { className: `grid grid-cols-1 gap-y-12 ${bg} px-12 pb-24 lg:px-56` }, /* @__PURE__ */ React.createElement("div", { className: "w-full max-w-[64rem] 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(
|
|
4286
4286
|
"div",
|
|
4287
4287
|
{
|
|
4288
4288
|
onClick: () => {
|
|
@@ -4294,14 +4294,14 @@ const LearningForm = (props) => {
|
|
|
4294
4294
|
},
|
|
4295
4295
|
className: "flex h-max gap-x-2 cursor-pointer items-center text-slate-300 hover:text-slate-500"
|
|
4296
4296
|
},
|
|
4297
|
-
/* @__PURE__ */ React
|
|
4298
|
-
/* @__PURE__ */ React
|
|
4299
|
-
), !!props.displayName && /* @__PURE__ */ React
|
|
4300
|
-
return /* @__PURE__ */ React
|
|
4301
|
-
}), /* @__PURE__ */ React
|
|
4297
|
+
/* @__PURE__ */ React.createElement("div", { className: "w-3 h-3 min-w-3" }, /* @__PURE__ */ React.createElement(Icon$1, { name: "leftArrow" })),
|
|
4298
|
+
/* @__PURE__ */ React.createElement("span", { className: "text-md" }, "Back")
|
|
4299
|
+
), !!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-[64rem] m-auto grid grid-cols-1 gap-y-12", onSubmit }, items.map((item) => {
|
|
4300
|
+
return /* @__PURE__ */ React.createElement(FormItem, __spreadProps$6(__spreadValues$8({ key: item.itemId }, item), { minText: 0, disabled: !!props.preview }));
|
|
4301
|
+
}), /* @__PURE__ */ React.createElement(
|
|
4302
4302
|
FormItem,
|
|
4303
4303
|
{
|
|
4304
|
-
displayName: /* @__PURE__ */ React
|
|
4304
|
+
displayName: /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("p", null, "To earn your impact points for this activity, answer either of the following:"), /* @__PURE__ */ React.createElement("ul", { className: "list-disc my-2 ml-5 text-sm" }, /* @__PURE__ */ React.createElement("li", null, "How would you explain what you learned here to a friend? OR"), /* @__PURE__ */ React.createElement("li", null, "How does what you learned here connect to other school topics or everyday life?"))),
|
|
4305
4305
|
description: "(1-2 sentences minimum)",
|
|
4306
4306
|
format: "question",
|
|
4307
4307
|
questionType: "text",
|
|
@@ -4312,7 +4312,7 @@ const LearningForm = (props) => {
|
|
|
4312
4312
|
minText: MIN_REFLECTION_LENGTH,
|
|
4313
4313
|
responses: reflection ? [reflection] : void 0
|
|
4314
4314
|
}
|
|
4315
|
-
), /* @__PURE__ */ React
|
|
4315
|
+
), /* @__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(
|
|
4316
4316
|
Button,
|
|
4317
4317
|
{
|
|
4318
4318
|
type: "submit",
|
|
@@ -4323,7 +4323,7 @@ const LearningForm = (props) => {
|
|
|
4323
4323
|
theme: "dark",
|
|
4324
4324
|
text: "Submit"
|
|
4325
4325
|
}
|
|
4326
|
-
))), props.stopWatch && /* @__PURE__ */ React
|
|
4326
|
+
))), props.stopWatch && /* @__PURE__ */ React.createElement("div", { className: `fixed bottom-20 right-5 transition ease-in-out mb-5` }, props.stopWatch), !props.preview && /* @__PURE__ */ React.createElement("div", { className: `fixed bottom-5 right-14 transition ease-in-out ${saveVisibility}` }, /* @__PURE__ */ React.createElement(
|
|
4327
4327
|
Button,
|
|
4328
4328
|
{
|
|
4329
4329
|
type: "button",
|
|
@@ -4335,16 +4335,16 @@ const LearningForm = (props) => {
|
|
|
4335
4335
|
text: "Save",
|
|
4336
4336
|
onClick: saveDraft
|
|
4337
4337
|
}
|
|
4338
|
-
)), showExitDialogue && /* @__PURE__ */ React
|
|
4338
|
+
)), 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(
|
|
4339
4339
|
FormExitDialog$1,
|
|
4340
4340
|
{
|
|
4341
4341
|
onYes: () => saveDraft().then(() => props.onGoBack && props.onGoBack()),
|
|
4342
4342
|
onNo: () => setShowExitDialogue(false)
|
|
4343
4343
|
}
|
|
4344
|
-
))), showSubmitDialogue && /* @__PURE__ */ React
|
|
4344
|
+
))), 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 }))));
|
|
4345
4345
|
};
|
|
4346
4346
|
const Rating = (props) => {
|
|
4347
|
-
const [confidence, setConfidence] = React
|
|
4347
|
+
const [confidence, setConfidence] = React.useState(props.rating || -1);
|
|
4348
4348
|
const onMouseEnter = (i) => !props.disabled && setConfidence(i);
|
|
4349
4349
|
const onMouseLeave = () => !props.disabled && setConfidence(props.rating || -1);
|
|
4350
4350
|
const onClick = (i) => !props.disabled && props.setRating && props.setRating(i);
|
|
@@ -4352,23 +4352,23 @@ const Rating = (props) => {
|
|
|
4352
4352
|
const circlePointer = props.disabled ? "" : "cursor-pointer";
|
|
4353
4353
|
const buttons = Array.from({ length: maxPoints }, (_, i) => {
|
|
4354
4354
|
const color = i < confidence ? "text-sky-200" : "text-slate-200";
|
|
4355
|
-
return /* @__PURE__ */ React
|
|
4355
|
+
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" })));
|
|
4356
4356
|
});
|
|
4357
4357
|
const labels = Array.from({ length: maxPoints }, (_, i) => {
|
|
4358
4358
|
if (i === 0) {
|
|
4359
|
-
return /* @__PURE__ */ React
|
|
4359
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Poor");
|
|
4360
4360
|
}
|
|
4361
4361
|
if (i === maxPoints - 1) {
|
|
4362
|
-
return /* @__PURE__ */ React
|
|
4362
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-sm text-monochrome-500" }, "Amazing");
|
|
4363
4363
|
}
|
|
4364
|
-
return /* @__PURE__ */ React
|
|
4364
|
+
return /* @__PURE__ */ React.createElement("p", { key: i, className: "inline-block text-monochrome-500" });
|
|
4365
4365
|
});
|
|
4366
|
-
React
|
|
4366
|
+
React.useEffect(() => {
|
|
4367
4367
|
if (props.rating && props.rating !== confidence) {
|
|
4368
4368
|
setConfidence(props.rating);
|
|
4369
4369
|
}
|
|
4370
4370
|
}, [props.rating]);
|
|
4371
|
-
return /* @__PURE__ */ React
|
|
4371
|
+
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" }, "Almost there, rate this activity before submitting."), /* @__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(
|
|
4372
4372
|
"div",
|
|
4373
4373
|
{
|
|
4374
4374
|
className: `ml-5 w-[16.7rem] text-[0.5rem] text-slate-600 grid grid-cols-5 justify-self-center items-center`
|
|
@@ -4398,7 +4398,7 @@ const NavLink = (props) => {
|
|
|
4398
4398
|
const config = defaultConfig();
|
|
4399
4399
|
withMenu(config, props.menu);
|
|
4400
4400
|
withName(config, props.name);
|
|
4401
|
-
return /* @__PURE__ */ React
|
|
4401
|
+
return /* @__PURE__ */ React.createElement(Button, __spreadValues$7({ disabled: props.disabled, active: props.active, onClick }, config));
|
|
4402
4402
|
};
|
|
4403
4403
|
const defaultConfig = () => {
|
|
4404
4404
|
return {};
|
|
@@ -4494,41 +4494,41 @@ var __spreadValues$6 = (a, b) => {
|
|
|
4494
4494
|
var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
|
|
4495
4495
|
const NavBar = (props) => {
|
|
4496
4496
|
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-t-none md:border-b md:border-monochrome-50 lg:px-36 md:shadow-sm").build();
|
|
4497
|
-
const [secondary, setSecondary] = React
|
|
4497
|
+
const [secondary, setSecondary] = React.useState(false);
|
|
4498
4498
|
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();
|
|
4499
4499
|
const menuIcon = secondary ? "menu-close" : "menu";
|
|
4500
|
-
return /* @__PURE__ */ React
|
|
4500
|
+
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) => {
|
|
4501
4501
|
if (Link && Link.props.name === "home") {
|
|
4502
|
-
return /* @__PURE__ */ React
|
|
4502
|
+
return /* @__PURE__ */ React.createElement("div", { className: "grow items-center flex-shrink-0 md:mr-6" }, Link);
|
|
4503
4503
|
}
|
|
4504
4504
|
return null;
|
|
4505
|
-
}), /* @__PURE__ */ React
|
|
4505
|
+
}), /* @__PURE__ */ React.createElement("div", { className: "hidden md:flex md:items-center gap-x-8" }, React.Children.map(props.children, (Link) => {
|
|
4506
4506
|
if (Link && Link.props.name !== "home") {
|
|
4507
|
-
return /* @__PURE__ */ React
|
|
4507
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative" }, Link);
|
|
4508
4508
|
}
|
|
4509
4509
|
return null;
|
|
4510
|
-
})), /* @__PURE__ */ React
|
|
4510
|
+
})), /* @__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) => {
|
|
4511
4511
|
if (Link && Link.props.name !== "home") {
|
|
4512
|
-
return /* @__PURE__ */ React
|
|
4512
|
+
return /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(NavLink, __spreadProps$5(__spreadValues$6({}, Link.props), { menu: true })));
|
|
4513
4513
|
}
|
|
4514
4514
|
return null;
|
|
4515
4515
|
}))));
|
|
4516
4516
|
};
|
|
4517
4517
|
|
|
4518
4518
|
const NotFound = (props) => {
|
|
4519
|
-
return /* @__PURE__ */ React
|
|
4519
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
4520
4520
|
"img",
|
|
4521
4521
|
{
|
|
4522
4522
|
className: "object-cover w-screen h-screen -z-10",
|
|
4523
4523
|
alt: "landing",
|
|
4524
4524
|
src: "https://cdn.localcivics.io/hub/landing.jpg"
|
|
4525
4525
|
}
|
|
4526
|
-
), /* @__PURE__ */ React
|
|
4526
|
+
), /* @__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 })))));
|
|
4527
4527
|
};
|
|
4528
4528
|
|
|
4529
4529
|
const SearchButton = (props) => {
|
|
4530
4530
|
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();
|
|
4531
|
-
return /* @__PURE__ */ React
|
|
4531
|
+
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 }));
|
|
4532
4532
|
};
|
|
4533
4533
|
|
|
4534
4534
|
const SearchResult = (props) => {
|
|
@@ -4548,19 +4548,19 @@ const SearchResult = (props) => {
|
|
|
4548
4548
|
};
|
|
4549
4549
|
|
|
4550
4550
|
const Search = (props) => {
|
|
4551
|
-
const hasResults = !!props.results && React
|
|
4551
|
+
const hasResults = !!props.results && React.Children.count(props.results) > 0;
|
|
4552
4552
|
const placeholder = props.placeholder || "Quick search...";
|
|
4553
|
-
const searchRef = React
|
|
4554
|
-
const handler = React
|
|
4553
|
+
const searchRef = React.useRef(null);
|
|
4554
|
+
const handler = React.useCallback(
|
|
4555
4555
|
debounce((search) => props.onSearch && props.onSearch(search)),
|
|
4556
4556
|
[]
|
|
4557
4557
|
);
|
|
4558
|
-
React
|
|
4558
|
+
React.useEffect(() => {
|
|
4559
4559
|
if (searchRef.current) {
|
|
4560
4560
|
searchRef.current.focus();
|
|
4561
4561
|
}
|
|
4562
4562
|
}, [!!props.open]);
|
|
4563
|
-
return /* @__PURE__ */ React
|
|
4563
|
+
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(
|
|
4564
4564
|
"input",
|
|
4565
4565
|
{
|
|
4566
4566
|
ref: searchRef,
|
|
@@ -4573,25 +4573,25 @@ const Search = (props) => {
|
|
|
4573
4573
|
name: "search",
|
|
4574
4574
|
placeholder: `Search ${props.category || ""}`.trim()
|
|
4575
4575
|
}
|
|
4576
|
-
), /* @__PURE__ */ React
|
|
4576
|
+
), /* @__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" }))));
|
|
4577
4577
|
};
|
|
4578
4578
|
|
|
4579
4579
|
const LegalAgreement = (props) => {
|
|
4580
|
-
return /* @__PURE__ */ React
|
|
4580
|
+
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(
|
|
4581
4581
|
"button",
|
|
4582
4582
|
{
|
|
4583
4583
|
className: "text-sky-400 underline hover:text-sky-600 cursor-pointer",
|
|
4584
4584
|
onClick: () => window.open("https://www.localcivics.io/terms-of-service", "_blank")
|
|
4585
4585
|
},
|
|
4586
4586
|
"Terms of Service"
|
|
4587
|
-
), " ", "and", " ", /* @__PURE__ */ React
|
|
4587
|
+
), " ", "and", " ", /* @__PURE__ */ React.createElement(
|
|
4588
4588
|
"button",
|
|
4589
4589
|
{
|
|
4590
4590
|
className: "text-sky-400 underline hover:text-sky-600 cursor-pointer",
|
|
4591
4591
|
onClick: () => window.open("https://www.localcivics.io/privacy-policy", "_blank")
|
|
4592
4592
|
},
|
|
4593
4593
|
"Privacy Policy"
|
|
4594
|
-
), ".")), /* @__PURE__ */ React
|
|
4594
|
+
), ".")), /* @__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(
|
|
4595
4595
|
Button,
|
|
4596
4596
|
{
|
|
4597
4597
|
icon: "accept",
|
|
@@ -4626,8 +4626,8 @@ var __spreadValues$5 = (a, b) => {
|
|
|
4626
4626
|
};
|
|
4627
4627
|
var __spreadProps$4 = (a, b) => __defProps$4(a, __getOwnPropDescs$4(b));
|
|
4628
4628
|
const CommunitySearch = (props) => {
|
|
4629
|
-
const [accessCode, setAccessCode] = React
|
|
4630
|
-
return /* @__PURE__ */ React
|
|
4629
|
+
const [accessCode, setAccessCode] = React.useState("");
|
|
4630
|
+
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(
|
|
4631
4631
|
"input",
|
|
4632
4632
|
{
|
|
4633
4633
|
disabled: props.disabled,
|
|
@@ -4637,7 +4637,7 @@ const CommunitySearch = (props) => {
|
|
|
4637
4637
|
defaultValue: props.accessCode,
|
|
4638
4638
|
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"
|
|
4639
4639
|
}
|
|
4640
|
-
), /* @__PURE__ */ React
|
|
4640
|
+
), /* @__PURE__ */ React.createElement("div", { className: "col-span-1" }, /* @__PURE__ */ React.createElement(
|
|
4641
4641
|
Button,
|
|
4642
4642
|
{
|
|
4643
4643
|
disabled: !accessCode || props.disabled,
|
|
@@ -4653,7 +4653,7 @@ const CommunitySearch = (props) => {
|
|
|
4653
4653
|
};
|
|
4654
4654
|
|
|
4655
4655
|
const RoleSelection = (props) => {
|
|
4656
|
-
return /* @__PURE__ */ React
|
|
4656
|
+
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(
|
|
4657
4657
|
Button,
|
|
4658
4658
|
{
|
|
4659
4659
|
active: props.persona === "student",
|
|
@@ -4665,7 +4665,7 @@ const RoleSelection = (props) => {
|
|
|
4665
4665
|
size: "md",
|
|
4666
4666
|
onClick: props.onStudent
|
|
4667
4667
|
}
|
|
4668
|
-
), /* @__PURE__ */ React
|
|
4668
|
+
), /* @__PURE__ */ React.createElement(
|
|
4669
4669
|
Button,
|
|
4670
4670
|
{
|
|
4671
4671
|
active: props.persona === "educator",
|
|
@@ -4681,17 +4681,17 @@ const RoleSelection = (props) => {
|
|
|
4681
4681
|
};
|
|
4682
4682
|
|
|
4683
4683
|
const Registration = (props) => {
|
|
4684
|
-
const [givenName, setGivenName] = React
|
|
4685
|
-
const [familyName, setFamilyName] = React
|
|
4686
|
-
const [grade, setGrade] = React
|
|
4687
|
-
const [impactStatement, setImpactStatement] = React
|
|
4684
|
+
const [givenName, setGivenName] = React.useState(props.givenName);
|
|
4685
|
+
const [familyName, setFamilyName] = React.useState(props.familyName);
|
|
4686
|
+
const [grade, setGrade] = React.useState(props.grade);
|
|
4687
|
+
const [impactStatement, setImpactStatement] = React.useState(props.impactStatement);
|
|
4688
4688
|
const onRegister = () => props.onRegister && props.onRegister({
|
|
4689
4689
|
givenName,
|
|
4690
4690
|
familyName,
|
|
4691
4691
|
grade,
|
|
4692
4692
|
impactStatement
|
|
4693
4693
|
});
|
|
4694
|
-
return /* @__PURE__ */ React
|
|
4694
|
+
return /* @__PURE__ */ React.createElement(
|
|
4695
4695
|
"form",
|
|
4696
4696
|
{
|
|
4697
4697
|
onSubmit: (e) => {
|
|
@@ -4700,8 +4700,8 @@ const Registration = (props) => {
|
|
|
4700
4700
|
},
|
|
4701
4701
|
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"
|
|
4702
4702
|
},
|
|
4703
|
-
/* @__PURE__ */ React
|
|
4704
|
-
/* @__PURE__ */ React
|
|
4703
|
+
/* @__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.")),
|
|
4704
|
+
/* @__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(
|
|
4705
4705
|
"input",
|
|
4706
4706
|
{
|
|
4707
4707
|
required: true,
|
|
@@ -4711,7 +4711,7 @@ const Registration = (props) => {
|
|
|
4711
4711
|
defaultValue: givenName || "",
|
|
4712
4712
|
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"
|
|
4713
4713
|
}
|
|
4714
|
-
)), /* @__PURE__ */ React
|
|
4714
|
+
)), /* @__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(
|
|
4715
4715
|
"input",
|
|
4716
4716
|
{
|
|
4717
4717
|
required: true,
|
|
@@ -4720,38 +4720,38 @@ const Registration = (props) => {
|
|
|
4720
4720
|
defaultValue: familyName || "",
|
|
4721
4721
|
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"
|
|
4722
4722
|
}
|
|
4723
|
-
)), props.persona === "educator" && /* @__PURE__ */ React
|
|
4723
|
+
)), 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(
|
|
4724
4724
|
"select",
|
|
4725
4725
|
{
|
|
4726
4726
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
4727
4727
|
defaultValue: grade || "",
|
|
4728
4728
|
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"
|
|
4729
4729
|
},
|
|
4730
|
-
/* @__PURE__ */ React
|
|
4731
|
-
/* @__PURE__ */ React
|
|
4732
|
-
/* @__PURE__ */ React
|
|
4733
|
-
/* @__PURE__ */ React
|
|
4734
|
-
/* @__PURE__ */ React
|
|
4735
|
-
/* @__PURE__ */ React
|
|
4736
|
-
/* @__PURE__ */ React
|
|
4737
|
-
/* @__PURE__ */ React
|
|
4738
|
-
/* @__PURE__ */ React
|
|
4739
|
-
)), /* @__PURE__ */ React
|
|
4730
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a subject"),
|
|
4731
|
+
/* @__PURE__ */ React.createElement("option", { value: "social-studies-teacher" }, "Social Studies Teacher"),
|
|
4732
|
+
/* @__PURE__ */ React.createElement("option", { value: "english-teacher" }, "English Teacher"),
|
|
4733
|
+
/* @__PURE__ */ React.createElement("option", { value: "math-teacher" }, "Math Teacher"),
|
|
4734
|
+
/* @__PURE__ */ React.createElement("option", { value: "science-teacher" }, "Science Teacher"),
|
|
4735
|
+
/* @__PURE__ */ React.createElement("option", { value: "special-education-teacher" }, "Special Education Teacher (Generalist)"),
|
|
4736
|
+
/* @__PURE__ */ React.createElement("option", { value: "counseling-or-college-and-career" }, "Counseling/College & Career Readiness"),
|
|
4737
|
+
/* @__PURE__ */ React.createElement("option", { value: "non-instructional-staff" }, "Non-Instructional Staff"),
|
|
4738
|
+
/* @__PURE__ */ React.createElement("option", { value: "school-leadership" }, "School Leadership")
|
|
4739
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Grade"), /* @__PURE__ */ React.createElement(
|
|
4740
4740
|
"select",
|
|
4741
4741
|
{
|
|
4742
4742
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
4743
4743
|
defaultValue: grade,
|
|
4744
4744
|
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"
|
|
4745
4745
|
},
|
|
4746
|
-
/* @__PURE__ */ React
|
|
4747
|
-
/* @__PURE__ */ React
|
|
4748
|
-
/* @__PURE__ */ React
|
|
4749
|
-
/* @__PURE__ */ React
|
|
4750
|
-
/* @__PURE__ */ React
|
|
4751
|
-
/* @__PURE__ */ React
|
|
4752
|
-
/* @__PURE__ */ React
|
|
4753
|
-
/* @__PURE__ */ React
|
|
4754
|
-
)), /* @__PURE__ */ React
|
|
4746
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a grade"),
|
|
4747
|
+
/* @__PURE__ */ React.createElement("option", { value: "6" }, "6th"),
|
|
4748
|
+
/* @__PURE__ */ React.createElement("option", { value: "7" }, "7th"),
|
|
4749
|
+
/* @__PURE__ */ React.createElement("option", { value: "8" }, "8th"),
|
|
4750
|
+
/* @__PURE__ */ React.createElement("option", { value: "9" }, "9th"),
|
|
4751
|
+
/* @__PURE__ */ React.createElement("option", { value: "10" }, "10th"),
|
|
4752
|
+
/* @__PURE__ */ React.createElement("option", { value: "11" }, "11th"),
|
|
4753
|
+
/* @__PURE__ */ React.createElement("option", { value: "12" }, "12th")
|
|
4754
|
+
)), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement("p", { className: "mb-2 font-semibold text-slate-500 text-sm" }, "Impact Statement"), /* @__PURE__ */ React.createElement(
|
|
4755
4755
|
"textarea",
|
|
4756
4756
|
{
|
|
4757
4757
|
required: true,
|
|
@@ -4762,7 +4762,7 @@ const Registration = (props) => {
|
|
|
4762
4762
|
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"
|
|
4763
4763
|
}
|
|
4764
4764
|
)))),
|
|
4765
|
-
/* @__PURE__ */ React
|
|
4765
|
+
/* @__PURE__ */ React.createElement(
|
|
4766
4766
|
Button,
|
|
4767
4767
|
{
|
|
4768
4768
|
type: "submit",
|
|
@@ -4797,13 +4797,13 @@ var __spreadValues$4 = (a, b) => {
|
|
|
4797
4797
|
};
|
|
4798
4798
|
var __spreadProps$3 = (a, b) => __defProps$3(a, __getOwnPropDescs$3(b));
|
|
4799
4799
|
const ImpactQuiz = (props) => {
|
|
4800
|
-
const [started, setStarted] = React
|
|
4801
|
-
const [question, setQuestion] = React
|
|
4800
|
+
const [started, setStarted] = React.useState(false);
|
|
4801
|
+
const [question, setQuestion] = React.useState(0);
|
|
4802
4802
|
const initialAnswers = {};
|
|
4803
4803
|
props.interests && props.interests.map((interest) => {
|
|
4804
4804
|
initialAnswers[interest] = true;
|
|
4805
4805
|
});
|
|
4806
|
-
const [answers, setAnswers] = React
|
|
4806
|
+
const [answers, setAnswers] = React.useState(initialAnswers);
|
|
4807
4807
|
const setAnswer = (key, interest) => {
|
|
4808
4808
|
setAnswers(__spreadProps$3(__spreadValues$4({}, answers), { [key]: interest }));
|
|
4809
4809
|
next();
|
|
@@ -4813,7 +4813,7 @@ const ImpactQuiz = (props) => {
|
|
|
4813
4813
|
switch (props.persona) {
|
|
4814
4814
|
case "educator":
|
|
4815
4815
|
questions2.push(
|
|
4816
|
-
/* @__PURE__ */ React
|
|
4816
|
+
/* @__PURE__ */ React.createElement(
|
|
4817
4817
|
Question,
|
|
4818
4818
|
{
|
|
4819
4819
|
key: "policy & government",
|
|
@@ -4826,7 +4826,7 @@ const ImpactQuiz = (props) => {
|
|
|
4826
4826
|
onAnswer: (interest) => setAnswer("policy & government", interest)
|
|
4827
4827
|
}
|
|
4828
4828
|
),
|
|
4829
|
-
/* @__PURE__ */ React
|
|
4829
|
+
/* @__PURE__ */ React.createElement(
|
|
4830
4830
|
Question,
|
|
4831
4831
|
{
|
|
4832
4832
|
key: "arts & culture",
|
|
@@ -4839,7 +4839,7 @@ const ImpactQuiz = (props) => {
|
|
|
4839
4839
|
onAnswer: (interest) => setAnswer("arts & culture", interest)
|
|
4840
4840
|
}
|
|
4841
4841
|
),
|
|
4842
|
-
/* @__PURE__ */ React
|
|
4842
|
+
/* @__PURE__ */ React.createElement(
|
|
4843
4843
|
Question,
|
|
4844
4844
|
{
|
|
4845
4845
|
key: "sponsored",
|
|
@@ -4856,7 +4856,7 @@ const ImpactQuiz = (props) => {
|
|
|
4856
4856
|
break;
|
|
4857
4857
|
default:
|
|
4858
4858
|
questions2.push(
|
|
4859
|
-
/* @__PURE__ */ React
|
|
4859
|
+
/* @__PURE__ */ React.createElement(
|
|
4860
4860
|
Question,
|
|
4861
4861
|
{
|
|
4862
4862
|
key: "policy & government",
|
|
@@ -4869,7 +4869,7 @@ const ImpactQuiz = (props) => {
|
|
|
4869
4869
|
onAnswer: (interest) => setAnswer("policy & government", interest)
|
|
4870
4870
|
}
|
|
4871
4871
|
),
|
|
4872
|
-
/* @__PURE__ */ React
|
|
4872
|
+
/* @__PURE__ */ React.createElement(
|
|
4873
4873
|
Question,
|
|
4874
4874
|
{
|
|
4875
4875
|
key: "recreation",
|
|
@@ -4882,7 +4882,7 @@ const ImpactQuiz = (props) => {
|
|
|
4882
4882
|
onAnswer: (interest) => setAnswer("recreation", interest)
|
|
4883
4883
|
}
|
|
4884
4884
|
),
|
|
4885
|
-
/* @__PURE__ */ React
|
|
4885
|
+
/* @__PURE__ */ React.createElement(
|
|
4886
4886
|
Question,
|
|
4887
4887
|
{
|
|
4888
4888
|
key: "volunteer",
|
|
@@ -4895,7 +4895,7 @@ const ImpactQuiz = (props) => {
|
|
|
4895
4895
|
onAnswer: (interest) => setAnswer("volunteer", interest)
|
|
4896
4896
|
}
|
|
4897
4897
|
),
|
|
4898
|
-
/* @__PURE__ */ React
|
|
4898
|
+
/* @__PURE__ */ React.createElement(
|
|
4899
4899
|
Question,
|
|
4900
4900
|
{
|
|
4901
4901
|
key: "arts & culture",
|
|
@@ -4908,7 +4908,7 @@ const ImpactQuiz = (props) => {
|
|
|
4908
4908
|
onAnswer: (interest) => setAnswer("arts & culture", interest)
|
|
4909
4909
|
}
|
|
4910
4910
|
),
|
|
4911
|
-
/* @__PURE__ */ React
|
|
4911
|
+
/* @__PURE__ */ React.createElement(
|
|
4912
4912
|
Question,
|
|
4913
4913
|
{
|
|
4914
4914
|
key: "college & career",
|
|
@@ -4921,7 +4921,7 @@ const ImpactQuiz = (props) => {
|
|
|
4921
4921
|
onAnswer: (interest) => setAnswer("college & career", interest)
|
|
4922
4922
|
}
|
|
4923
4923
|
),
|
|
4924
|
-
/* @__PURE__ */ React
|
|
4924
|
+
/* @__PURE__ */ React.createElement(
|
|
4925
4925
|
Question,
|
|
4926
4926
|
{
|
|
4927
4927
|
key: "sponsored",
|
|
@@ -4940,7 +4940,7 @@ const ImpactQuiz = (props) => {
|
|
|
4940
4940
|
return questions2;
|
|
4941
4941
|
})();
|
|
4942
4942
|
const asked = questions.length;
|
|
4943
|
-
const [finished, setFinished] = React
|
|
4943
|
+
const [finished, setFinished] = React.useState(asked === 0);
|
|
4944
4944
|
const start = () => {
|
|
4945
4945
|
setFinished(asked === 0);
|
|
4946
4946
|
setStarted(true);
|
|
@@ -4962,7 +4962,7 @@ const ImpactQuiz = (props) => {
|
|
|
4962
4962
|
setStarted(false);
|
|
4963
4963
|
};
|
|
4964
4964
|
if (!started) {
|
|
4965
|
-
return /* @__PURE__ */ React
|
|
4965
|
+
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 })));
|
|
4966
4966
|
}
|
|
4967
4967
|
const interests = [];
|
|
4968
4968
|
Object.entries(answers).map(([v, interest]) => {
|
|
@@ -4971,7 +4971,7 @@ const ImpactQuiz = (props) => {
|
|
|
4971
4971
|
}
|
|
4972
4972
|
});
|
|
4973
4973
|
if (finished) {
|
|
4974
|
-
return /* @__PURE__ */ React
|
|
4974
|
+
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(
|
|
4975
4975
|
Button,
|
|
4976
4976
|
{
|
|
4977
4977
|
spacing: "md",
|
|
@@ -4984,13 +4984,13 @@ const ImpactQuiz = (props) => {
|
|
|
4984
4984
|
}
|
|
4985
4985
|
)));
|
|
4986
4986
|
}
|
|
4987
|
-
return /* @__PURE__ */ React
|
|
4987
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, questions);
|
|
4988
4988
|
};
|
|
4989
4989
|
const Question = (props) => {
|
|
4990
4990
|
if (!props.visible) {
|
|
4991
4991
|
return null;
|
|
4992
4992
|
}
|
|
4993
|
-
return /* @__PURE__ */ React
|
|
4993
|
+
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(
|
|
4994
4994
|
Button,
|
|
4995
4995
|
{
|
|
4996
4996
|
spacing: "md",
|
|
@@ -5001,7 +5001,7 @@ const Question = (props) => {
|
|
|
5001
5001
|
size: "md",
|
|
5002
5002
|
onClick: () => props.onAnswer && props.onAnswer(false)
|
|
5003
5003
|
}
|
|
5004
|
-
), /* @__PURE__ */ React
|
|
5004
|
+
), /* @__PURE__ */ React.createElement(
|
|
5005
5005
|
Button,
|
|
5006
5006
|
{
|
|
5007
5007
|
icon: "accept",
|
|
@@ -5017,7 +5017,7 @@ const Question = (props) => {
|
|
|
5017
5017
|
};
|
|
5018
5018
|
|
|
5019
5019
|
const Welcome = (props) => {
|
|
5020
|
-
return /* @__PURE__ */ React
|
|
5020
|
+
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(
|
|
5021
5021
|
Button,
|
|
5022
5022
|
{
|
|
5023
5023
|
spacing: "md",
|
|
@@ -5051,25 +5051,25 @@ var __spreadValues$3 = (a, b) => {
|
|
|
5051
5051
|
};
|
|
5052
5052
|
var __spreadProps$2 = (a, b) => __defProps$2(a, __getOwnPropDescs$2(b));
|
|
5053
5053
|
const Onboarding = (props) => {
|
|
5054
|
-
return /* @__PURE__ */ React
|
|
5054
|
+
return /* @__PURE__ */ React.createElement(Modal, { stage: true, isLoading: props.isLoading, inline: true, plain: true, visible: true }, /* @__PURE__ */ React.createElement(Delegate, __spreadValues$3({}, props)));
|
|
5055
5055
|
};
|
|
5056
5056
|
const Delegate = (props) => {
|
|
5057
|
-
const [agreed, setAgreed] = React
|
|
5058
|
-
const [interests, setInterests] = React
|
|
5059
|
-
const [organization, setOrganization] = React
|
|
5060
|
-
const [organizationOpen, setOrganizationOpen] = React
|
|
5061
|
-
const [persona, setPersona] = React
|
|
5057
|
+
const [agreed, setAgreed] = React.useState(!!props.hasOrganization || props.search !== null);
|
|
5058
|
+
const [interests, setInterests] = React.useState(false);
|
|
5059
|
+
const [organization, setOrganization] = React.useState(null);
|
|
5060
|
+
const [organizationOpen, setOrganizationOpen] = React.useState(!!props.search);
|
|
5061
|
+
const [persona, setPersona] = React.useState("");
|
|
5062
5062
|
if (!agreed) {
|
|
5063
|
-
return /* @__PURE__ */ React
|
|
5063
|
+
return /* @__PURE__ */ React.createElement(LegalAgreement, { onDecline: props.onDeclineLegalAgreement, onAccept: () => setAgreed(true) });
|
|
5064
5064
|
}
|
|
5065
5065
|
if (!props.hasOrganization) {
|
|
5066
|
-
return /* @__PURE__ */ React
|
|
5066
|
+
return /* @__PURE__ */ React.createElement(
|
|
5067
5067
|
CommunitySearch,
|
|
5068
5068
|
__spreadProps$2(__spreadValues$3({}, organization), {
|
|
5069
5069
|
open: organizationOpen,
|
|
5070
5070
|
value: props.search,
|
|
5071
5071
|
results: props.organizations && props.organizations.map((organization2) => {
|
|
5072
|
-
return /* @__PURE__ */ React
|
|
5072
|
+
return /* @__PURE__ */ React.createElement(
|
|
5073
5073
|
SearchResult,
|
|
5074
5074
|
{
|
|
5075
5075
|
key: organization2.organizationId,
|
|
@@ -5090,7 +5090,7 @@ const Delegate = (props) => {
|
|
|
5090
5090
|
}
|
|
5091
5091
|
if (!props.hasRegistration) {
|
|
5092
5092
|
if (!persona) {
|
|
5093
|
-
return /* @__PURE__ */ React
|
|
5093
|
+
return /* @__PURE__ */ React.createElement(
|
|
5094
5094
|
RoleSelection,
|
|
5095
5095
|
{
|
|
5096
5096
|
onStudent: () => setPersona("student"),
|
|
@@ -5098,7 +5098,7 @@ const Delegate = (props) => {
|
|
|
5098
5098
|
}
|
|
5099
5099
|
);
|
|
5100
5100
|
}
|
|
5101
|
-
return /* @__PURE__ */ React
|
|
5101
|
+
return /* @__PURE__ */ React.createElement(
|
|
5102
5102
|
Registration,
|
|
5103
5103
|
{
|
|
5104
5104
|
persona,
|
|
@@ -5111,7 +5111,7 @@ const Delegate = (props) => {
|
|
|
5111
5111
|
);
|
|
5112
5112
|
}
|
|
5113
5113
|
if (!interests && !props.hasInterests) {
|
|
5114
|
-
return /* @__PURE__ */ React
|
|
5114
|
+
return /* @__PURE__ */ React.createElement(
|
|
5115
5115
|
ImpactQuiz,
|
|
5116
5116
|
{
|
|
5117
5117
|
persona,
|
|
@@ -5123,14 +5123,14 @@ const Delegate = (props) => {
|
|
|
5123
5123
|
}
|
|
5124
5124
|
);
|
|
5125
5125
|
}
|
|
5126
|
-
return /* @__PURE__ */ React
|
|
5126
|
+
return /* @__PURE__ */ React.createElement(Welcome, { givenName: props.givenName, onContinue: props.onFinish });
|
|
5127
5127
|
};
|
|
5128
5128
|
|
|
5129
5129
|
const PathwayButton = (props) => {
|
|
5130
5130
|
const base = "px-2 py-4 text-left cursor-pointer hover:bg-white active:bg-white";
|
|
5131
5131
|
const bg = props.active ? "bg-sky-100" : "bg-gray-50";
|
|
5132
5132
|
const className = [base, bg].join(" ");
|
|
5133
|
-
return /* @__PURE__ */ React
|
|
5133
|
+
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, " "));
|
|
5134
5134
|
};
|
|
5135
5135
|
|
|
5136
5136
|
const PathwayFilter = (props) => {
|
|
@@ -5147,7 +5147,7 @@ const PathwayFilter = (props) => {
|
|
|
5147
5147
|
props.onChange(newPathways);
|
|
5148
5148
|
}
|
|
5149
5149
|
};
|
|
5150
|
-
return /* @__PURE__ */ React
|
|
5150
|
+
return /* @__PURE__ */ React.createElement(
|
|
5151
5151
|
"div",
|
|
5152
5152
|
{
|
|
5153
5153
|
className: "border-gray-200 border shadow-sm rounded-md min-h-48 w-full overflow-hidden",
|
|
@@ -5155,36 +5155,36 @@ const PathwayFilter = (props) => {
|
|
|
5155
5155
|
role: "dialog",
|
|
5156
5156
|
"aria-modal": "true"
|
|
5157
5157
|
},
|
|
5158
|
-
/* @__PURE__ */ React
|
|
5159
|
-
/* @__PURE__ */ React
|
|
5158
|
+
/* @__PURE__ */ React.createElement("div", { className: "px-2 py-2 bg-gray-200" }),
|
|
5159
|
+
/* @__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(
|
|
5160
5160
|
PathwayButton,
|
|
5161
5161
|
{
|
|
5162
5162
|
onClick: () => togglePathway("policy & government"),
|
|
5163
5163
|
active: pathways.indexOf("policy & government") >= 0,
|
|
5164
5164
|
name: "policy & government"
|
|
5165
5165
|
}
|
|
5166
|
-
), /* @__PURE__ */ React
|
|
5166
|
+
), /* @__PURE__ */ React.createElement(
|
|
5167
5167
|
PathwayButton,
|
|
5168
5168
|
{
|
|
5169
5169
|
onClick: () => togglePathway("arts & culture"),
|
|
5170
5170
|
active: pathways.indexOf("arts & culture") >= 0,
|
|
5171
5171
|
name: "arts & culture"
|
|
5172
5172
|
}
|
|
5173
|
-
), /* @__PURE__ */ React
|
|
5173
|
+
), /* @__PURE__ */ React.createElement(
|
|
5174
5174
|
PathwayButton,
|
|
5175
5175
|
{
|
|
5176
5176
|
onClick: () => togglePathway("recreation"),
|
|
5177
5177
|
active: pathways.indexOf("recreation") >= 0,
|
|
5178
5178
|
name: "recreation"
|
|
5179
5179
|
}
|
|
5180
|
-
), /* @__PURE__ */ React
|
|
5180
|
+
), /* @__PURE__ */ React.createElement(
|
|
5181
5181
|
PathwayButton,
|
|
5182
5182
|
{
|
|
5183
5183
|
onClick: () => togglePathway("volunteer"),
|
|
5184
5184
|
active: pathways.indexOf("volunteer") >= 0,
|
|
5185
5185
|
name: "volunteer"
|
|
5186
5186
|
}
|
|
5187
|
-
), /* @__PURE__ */ React
|
|
5187
|
+
), /* @__PURE__ */ React.createElement(
|
|
5188
5188
|
PathwayButton,
|
|
5189
5189
|
{
|
|
5190
5190
|
onClick: () => togglePathway("college & career"),
|
|
@@ -5208,7 +5208,7 @@ const PathwayProgress = (props) => {
|
|
|
5208
5208
|
const config = defaultActivityProgressConfig();
|
|
5209
5209
|
const height = props.height || "sm";
|
|
5210
5210
|
withHeight(config, height);
|
|
5211
|
-
return /* @__PURE__ */ React
|
|
5211
|
+
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)))));
|
|
5212
5212
|
};
|
|
5213
5213
|
const defaultActivityProgressConfig = () => {
|
|
5214
5214
|
const config = {
|
|
@@ -5259,27 +5259,27 @@ const withHeight = (config, height) => {
|
|
|
5259
5259
|
};
|
|
5260
5260
|
|
|
5261
5261
|
const PathwayWidget = (props) => {
|
|
5262
|
-
const hasContent = props.children && React
|
|
5263
|
-
return /* @__PURE__ */ React
|
|
5262
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
5263
|
+
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)));
|
|
5264
5264
|
};
|
|
5265
5265
|
|
|
5266
5266
|
const AboutWidget = (props) => {
|
|
5267
5267
|
const hasContent = props.impactStatement || props.placeName || props.communityName;
|
|
5268
|
-
return /* @__PURE__ */ React
|
|
5268
|
+
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)))));
|
|
5269
5269
|
};
|
|
5270
5270
|
|
|
5271
5271
|
const AchievementWidget = (props) => {
|
|
5272
|
-
return /* @__PURE__ */ React
|
|
5272
|
+
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")))));
|
|
5273
5273
|
};
|
|
5274
5274
|
|
|
5275
5275
|
const SettingsCard = (props) => {
|
|
5276
|
-
const [avatarFile, setAvatarFile] = React
|
|
5277
|
-
const [avatarURL, setAvatarURL] = React
|
|
5278
|
-
const [givenName, setGivenName] = React
|
|
5279
|
-
const [familyName, setFamilyName] = React
|
|
5280
|
-
const [grade, setGrade] = React
|
|
5281
|
-
const [impactStatement, setImpactStatement] = React
|
|
5282
|
-
const [focus, setFocus] = React
|
|
5276
|
+
const [avatarFile, setAvatarFile] = React.useState(void 0);
|
|
5277
|
+
const [avatarURL, setAvatarURL] = React.useState(props.avatarURL);
|
|
5278
|
+
const [givenName, setGivenName] = React.useState(props.givenName);
|
|
5279
|
+
const [familyName, setFamilyName] = React.useState(props.familyName);
|
|
5280
|
+
const [grade, setGrade] = React.useState(props.grade);
|
|
5281
|
+
const [impactStatement, setImpactStatement] = React.useState(props.impactStatement);
|
|
5282
|
+
const [focus, setFocus] = React.useState("");
|
|
5283
5283
|
const hasChanges = props.hasChanges || givenName !== props.givenName || familyName !== props.familyName || grade !== props.grade || impactStatement !== props.impactStatement || avatarURL !== props.avatarURL;
|
|
5284
5284
|
const onSave = () => hasChanges && props.onSave && props.onSave({
|
|
5285
5285
|
givenName,
|
|
@@ -5304,14 +5304,14 @@ const SettingsCard = (props) => {
|
|
|
5304
5304
|
}
|
|
5305
5305
|
setFocus("");
|
|
5306
5306
|
};
|
|
5307
|
-
return /* @__PURE__ */ React
|
|
5307
|
+
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(
|
|
5308
5308
|
"img",
|
|
5309
5309
|
{
|
|
5310
5310
|
className: "h-16 w-16 object-cover rounded-full",
|
|
5311
5311
|
src: avatarURL || props.avatarURL || "https://cdn.localcivics.io/hub/avatar.jpg",
|
|
5312
5312
|
alt: "Current profile photo"
|
|
5313
5313
|
}
|
|
5314
|
-
)), /* @__PURE__ */ React
|
|
5314
|
+
)), /* @__PURE__ */ React.createElement("label", { className: "block" }, /* @__PURE__ */ React.createElement("span", { className: "sr-only" }, "Choose profile photo"), /* @__PURE__ */ React.createElement(
|
|
5315
5315
|
"input",
|
|
5316
5316
|
{
|
|
5317
5317
|
onChange: (e) => onAvatarChange(e),
|
|
@@ -5319,7 +5319,7 @@ const SettingsCard = (props) => {
|
|
|
5319
5319
|
type: "file",
|
|
5320
5320
|
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"
|
|
5321
5321
|
}
|
|
5322
|
-
))), /* @__PURE__ */ React
|
|
5322
|
+
))), /* @__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(
|
|
5323
5323
|
"input",
|
|
5324
5324
|
{
|
|
5325
5325
|
max: 3e3,
|
|
@@ -5331,7 +5331,7 @@ const SettingsCard = (props) => {
|
|
|
5331
5331
|
defaultValue: givenName,
|
|
5332
5332
|
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"
|
|
5333
5333
|
}
|
|
5334
|
-
)), /* @__PURE__ */ React
|
|
5334
|
+
)), /* @__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(
|
|
5335
5335
|
"input",
|
|
5336
5336
|
{
|
|
5337
5337
|
max: 3e3,
|
|
@@ -5343,22 +5343,22 @@ const SettingsCard = (props) => {
|
|
|
5343
5343
|
defaultValue: familyName,
|
|
5344
5344
|
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"
|
|
5345
5345
|
}
|
|
5346
|
-
)), /* @__PURE__ */ React
|
|
5346
|
+
)), /* @__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(
|
|
5347
5347
|
"select",
|
|
5348
5348
|
{
|
|
5349
5349
|
onChange: (e) => setGrade(parseInt(e.target.value, 10)),
|
|
5350
5350
|
defaultValue: grade,
|
|
5351
5351
|
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"
|
|
5352
5352
|
},
|
|
5353
|
-
/* @__PURE__ */ React
|
|
5354
|
-
/* @__PURE__ */ React
|
|
5355
|
-
/* @__PURE__ */ React
|
|
5356
|
-
/* @__PURE__ */ React
|
|
5357
|
-
/* @__PURE__ */ React
|
|
5358
|
-
/* @__PURE__ */ React
|
|
5359
|
-
/* @__PURE__ */ React
|
|
5360
|
-
/* @__PURE__ */ React
|
|
5361
|
-
)), /* @__PURE__ */ React
|
|
5353
|
+
/* @__PURE__ */ React.createElement("option", null, "Select a grade"),
|
|
5354
|
+
/* @__PURE__ */ React.createElement("option", { value: "6" }, "6th"),
|
|
5355
|
+
/* @__PURE__ */ React.createElement("option", { value: "7" }, "7th"),
|
|
5356
|
+
/* @__PURE__ */ React.createElement("option", { value: "8" }, "8th"),
|
|
5357
|
+
/* @__PURE__ */ React.createElement("option", { value: "9" }, "9th"),
|
|
5358
|
+
/* @__PURE__ */ React.createElement("option", { value: "10" }, "10th"),
|
|
5359
|
+
/* @__PURE__ */ React.createElement("option", { value: "11" }, "11th"),
|
|
5360
|
+
/* @__PURE__ */ React.createElement("option", { value: "12" }, "12th")
|
|
5361
|
+
)), /* @__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(
|
|
5362
5362
|
"textarea",
|
|
5363
5363
|
{
|
|
5364
5364
|
maxLength: 3e3,
|
|
@@ -5370,30 +5370,30 @@ const SettingsCard = (props) => {
|
|
|
5370
5370
|
defaultValue: impactStatement,
|
|
5371
5371
|
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"
|
|
5372
5372
|
}
|
|
5373
|
-
)), /* @__PURE__ */ React
|
|
5373
|
+
)), /* @__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(
|
|
5374
5374
|
"input",
|
|
5375
5375
|
{
|
|
5376
5376
|
disabled: true,
|
|
5377
5377
|
defaultValue: props.accessToken || "",
|
|
5378
5378
|
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"
|
|
5379
5379
|
}
|
|
5380
|
-
)))), hasChanges && /* @__PURE__ */ React
|
|
5380
|
+
)))), hasChanges && /* @__PURE__ */ React.createElement(Button, { spacing: "lg", border: "rectangle", color: "slate", theme: "dark", text: "Save", onClick: onSave })));
|
|
5381
5381
|
};
|
|
5382
5382
|
|
|
5383
5383
|
const ImpactWidget = (props) => {
|
|
5384
|
-
return /* @__PURE__ */ React
|
|
5384
|
+
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 })));
|
|
5385
5385
|
};
|
|
5386
5386
|
|
|
5387
5387
|
const ProfileWidget = (props) => {
|
|
5388
5388
|
const hasContent = props.givenName || props.familyName;
|
|
5389
|
-
return /* @__PURE__ */ React
|
|
5389
|
+
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(
|
|
5390
5390
|
"img",
|
|
5391
5391
|
{
|
|
5392
5392
|
src: props.avatarURL || "https://cdn.localcivics.io/hub/avatar.jpg",
|
|
5393
5393
|
alt: "avatar",
|
|
5394
5394
|
className: "border border-gray-200 shadow-sm w-16 h-16 lg:w-32 lg:h-32 rounded-full object-cover"
|
|
5395
5395
|
}
|
|
5396
|
-
), props.online && /* @__PURE__ */ React
|
|
5396
|
+
), 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())))))));
|
|
5397
5397
|
};
|
|
5398
5398
|
|
|
5399
5399
|
var __defProp$2 = Object.defineProperty;
|
|
@@ -5413,12 +5413,12 @@ var __spreadValues$2 = (a, b) => {
|
|
|
5413
5413
|
return a;
|
|
5414
5414
|
};
|
|
5415
5415
|
const FormInput = (props) => {
|
|
5416
|
-
return /* @__PURE__ */ React
|
|
5416
|
+
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, (() => {
|
|
5417
5417
|
switch (props.type) {
|
|
5418
5418
|
case "dropdown":
|
|
5419
|
-
return /* @__PURE__ */ React
|
|
5419
|
+
return /* @__PURE__ */ React.createElement(DropDownInput, __spreadValues$2({}, props));
|
|
5420
5420
|
default:
|
|
5421
|
-
return /* @__PURE__ */ React
|
|
5421
|
+
return /* @__PURE__ */ React.createElement(Input, __spreadValues$2({}, props));
|
|
5422
5422
|
}
|
|
5423
5423
|
})()));
|
|
5424
5424
|
};
|
|
@@ -5430,7 +5430,7 @@ const DropDownInput = (props) => {
|
|
|
5430
5430
|
props.onChange(e.target.value);
|
|
5431
5431
|
}
|
|
5432
5432
|
};
|
|
5433
|
-
return /* @__PURE__ */ React
|
|
5433
|
+
return /* @__PURE__ */ React.createElement(
|
|
5434
5434
|
"select",
|
|
5435
5435
|
{
|
|
5436
5436
|
disabled: props.readonly,
|
|
@@ -5439,9 +5439,9 @@ const DropDownInput = (props) => {
|
|
|
5439
5439
|
name: props.headline,
|
|
5440
5440
|
onChange
|
|
5441
5441
|
},
|
|
5442
|
-
/* @__PURE__ */ React
|
|
5442
|
+
/* @__PURE__ */ React.createElement("option", { value: "" }, props.readonly && !props.value ? "N/A" : "Select one"),
|
|
5443
5443
|
options.map((option) => {
|
|
5444
|
-
return /* @__PURE__ */ React
|
|
5444
|
+
return /* @__PURE__ */ React.createElement("option", { key: option, selected: props.value === option, value: option }, option);
|
|
5445
5445
|
})
|
|
5446
5446
|
);
|
|
5447
5447
|
};
|
|
@@ -5454,7 +5454,7 @@ const Input = (props) => {
|
|
|
5454
5454
|
props.onChange(e.target.value);
|
|
5455
5455
|
}
|
|
5456
5456
|
};
|
|
5457
|
-
return /* @__PURE__ */ React
|
|
5457
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, !props.paragraph && /* @__PURE__ */ React.createElement(
|
|
5458
5458
|
"input",
|
|
5459
5459
|
{
|
|
5460
5460
|
className: `mt-1 block w-full bg-white text-slate-500 ${writeClass} focus:outline-none rounded-sm text-sm placeholder-slate-400`,
|
|
@@ -5468,7 +5468,7 @@ const Input = (props) => {
|
|
|
5468
5468
|
min: props.min,
|
|
5469
5469
|
max: props.max
|
|
5470
5470
|
}
|
|
5471
|
-
), props.paragraph && /* @__PURE__ */ React
|
|
5471
|
+
), props.paragraph && /* @__PURE__ */ React.createElement(
|
|
5472
5472
|
"textarea",
|
|
5473
5473
|
{
|
|
5474
5474
|
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`,
|
|
@@ -5483,7 +5483,7 @@ const Input = (props) => {
|
|
|
5483
5483
|
};
|
|
5484
5484
|
|
|
5485
5485
|
const FormExitDialog = (props) => {
|
|
5486
|
-
return /* @__PURE__ */ React
|
|
5486
|
+
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(
|
|
5487
5487
|
Button,
|
|
5488
5488
|
{
|
|
5489
5489
|
wide: true,
|
|
@@ -5495,7 +5495,7 @@ const FormExitDialog = (props) => {
|
|
|
5495
5495
|
size: "md",
|
|
5496
5496
|
onClick: props.onYes
|
|
5497
5497
|
}
|
|
5498
|
-
), /* @__PURE__ */ React
|
|
5498
|
+
), /* @__PURE__ */ React.createElement(
|
|
5499
5499
|
Button,
|
|
5500
5500
|
{
|
|
5501
5501
|
wide: true,
|
|
@@ -5511,7 +5511,7 @@ const FormExitDialog = (props) => {
|
|
|
5511
5511
|
};
|
|
5512
5512
|
|
|
5513
5513
|
const FormSubmitDialog = (props) => {
|
|
5514
|
-
return /* @__PURE__ */ React
|
|
5514
|
+
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(
|
|
5515
5515
|
Button,
|
|
5516
5516
|
{
|
|
5517
5517
|
wide: true,
|
|
@@ -5546,10 +5546,10 @@ var __spreadValues$1 = (a, b) => {
|
|
|
5546
5546
|
};
|
|
5547
5547
|
var __spreadProps$1 = (a, b) => __defProps$1(a, __getOwnPropDescs$1(b));
|
|
5548
5548
|
const Form = (props) => {
|
|
5549
|
-
const [showExitDialogue, setShowExitDialogue] = React
|
|
5550
|
-
const [showSubmitDialogue, setShowSubmitDialogue] = React
|
|
5551
|
-
const [responses, setResponses] = React
|
|
5552
|
-
const [inReview, setInReview] = React
|
|
5549
|
+
const [showExitDialogue, setShowExitDialogue] = React.useState(!!props.showExitDialogue);
|
|
5550
|
+
const [showSubmitDialogue, setShowSubmitDialogue] = React.useState(!!props.showSubmitDialogue);
|
|
5551
|
+
const [responses, setResponses] = React.useState({});
|
|
5552
|
+
const [inReview, setInReview] = React.useState(!!props.inReview);
|
|
5553
5553
|
const setResponse = (key, value) => {
|
|
5554
5554
|
setResponses(__spreadProps$1(__spreadValues$1({}, responses), { [key]: value }));
|
|
5555
5555
|
};
|
|
@@ -5565,10 +5565,10 @@ const Form = (props) => {
|
|
|
5565
5565
|
});
|
|
5566
5566
|
}
|
|
5567
5567
|
};
|
|
5568
|
-
React
|
|
5569
|
-
React
|
|
5570
|
-
React
|
|
5571
|
-
return /* @__PURE__ */ React
|
|
5568
|
+
React.useEffect(() => setInReview(!!props.inReview), [props.inReview]);
|
|
5569
|
+
React.useEffect(() => setShowExitDialogue(!!props.showExitDialogue), [props.showExitDialogue]);
|
|
5570
|
+
React.useEffect(() => setShowSubmitDialogue(!!props.showSubmitDialogue), [props.showSubmitDialogue]);
|
|
5571
|
+
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(
|
|
5572
5572
|
FormInput,
|
|
5573
5573
|
{
|
|
5574
5574
|
required: true,
|
|
@@ -5577,7 +5577,7 @@ const Form = (props) => {
|
|
|
5577
5577
|
value: responses["organizationName"],
|
|
5578
5578
|
onChange: (value) => setResponse("organizationName", value)
|
|
5579
5579
|
}
|
|
5580
|
-
), /* @__PURE__ */ React
|
|
5580
|
+
), /* @__PURE__ */ React.createElement(
|
|
5581
5581
|
FormInput,
|
|
5582
5582
|
{
|
|
5583
5583
|
readonly: inReview,
|
|
@@ -5585,7 +5585,7 @@ const Form = (props) => {
|
|
|
5585
5585
|
value: responses["contactPerson"],
|
|
5586
5586
|
onChange: (value) => setResponse("contactPerson", value)
|
|
5587
5587
|
}
|
|
5588
|
-
), /* @__PURE__ */ React
|
|
5588
|
+
), /* @__PURE__ */ React.createElement(
|
|
5589
5589
|
FormInput,
|
|
5590
5590
|
{
|
|
5591
5591
|
readonly: inReview,
|
|
@@ -5594,7 +5594,7 @@ const Form = (props) => {
|
|
|
5594
5594
|
value: responses["contactPhoneNumber"],
|
|
5595
5595
|
onChange: (value) => setResponse("contactPhoneNumber", value)
|
|
5596
5596
|
}
|
|
5597
|
-
), /* @__PURE__ */ React
|
|
5597
|
+
), /* @__PURE__ */ React.createElement(
|
|
5598
5598
|
FormInput,
|
|
5599
5599
|
{
|
|
5600
5600
|
readonly: inReview,
|
|
@@ -5603,7 +5603,7 @@ const Form = (props) => {
|
|
|
5603
5603
|
value: responses["contactEmail"],
|
|
5604
5604
|
onChange: (value) => setResponse("contactEmail", value)
|
|
5605
5605
|
}
|
|
5606
|
-
), /* @__PURE__ */ React
|
|
5606
|
+
), /* @__PURE__ */ React.createElement("div", { className: "grid lg:grid-cols-2 gap-y-8 gap-x-2" }, /* @__PURE__ */ React.createElement(
|
|
5607
5607
|
FormInput,
|
|
5608
5608
|
{
|
|
5609
5609
|
required: true,
|
|
@@ -5613,7 +5613,7 @@ const Form = (props) => {
|
|
|
5613
5613
|
value: responses["date"],
|
|
5614
5614
|
onChange: (value) => setResponse("date", value)
|
|
5615
5615
|
}
|
|
5616
|
-
), /* @__PURE__ */ React
|
|
5616
|
+
), /* @__PURE__ */ React.createElement(
|
|
5617
5617
|
FormInput,
|
|
5618
5618
|
{
|
|
5619
5619
|
required: true,
|
|
@@ -5625,7 +5625,7 @@ const Form = (props) => {
|
|
|
5625
5625
|
value: responses["totalHours"],
|
|
5626
5626
|
onChange: (value) => setResponse("totalHours", value)
|
|
5627
5627
|
}
|
|
5628
|
-
)), /* @__PURE__ */ React
|
|
5628
|
+
)), /* @__PURE__ */ React.createElement(
|
|
5629
5629
|
FormInput,
|
|
5630
5630
|
{
|
|
5631
5631
|
required: true,
|
|
@@ -5636,7 +5636,7 @@ const Form = (props) => {
|
|
|
5636
5636
|
options: ["Community Service", "Capstone", "Internship", "Project", "Other"],
|
|
5637
5637
|
onChange: (value) => setResponse("type", value)
|
|
5638
5638
|
}
|
|
5639
|
-
), /* @__PURE__ */ React
|
|
5639
|
+
), /* @__PURE__ */ React.createElement("div", { className: "lg:col-span-2" }, /* @__PURE__ */ React.createElement(
|
|
5640
5640
|
FormInput,
|
|
5641
5641
|
{
|
|
5642
5642
|
required: true,
|
|
@@ -5646,7 +5646,7 @@ const Form = (props) => {
|
|
|
5646
5646
|
value: responses["description"],
|
|
5647
5647
|
onChange: (value) => setResponse("description", value)
|
|
5648
5648
|
}
|
|
5649
|
-
))), /* @__PURE__ */ React
|
|
5649
|
+
))), /* @__PURE__ */ React.createElement("div", { className: "flex gap-x-4 w-max m-auto" }, inReview && /* @__PURE__ */ React.createElement(
|
|
5650
5650
|
Button,
|
|
5651
5651
|
{
|
|
5652
5652
|
onClick: () => setInReview(false),
|
|
@@ -5656,7 +5656,7 @@ const Form = (props) => {
|
|
|
5656
5656
|
border: "rounded",
|
|
5657
5657
|
text: "Edit"
|
|
5658
5658
|
}
|
|
5659
|
-
), /* @__PURE__ */ React
|
|
5659
|
+
), /* @__PURE__ */ React.createElement(
|
|
5660
5660
|
Button,
|
|
5661
5661
|
{
|
|
5662
5662
|
type: "submit",
|
|
@@ -5667,7 +5667,7 @@ const Form = (props) => {
|
|
|
5667
5667
|
theme: "dark",
|
|
5668
5668
|
text: inReview ? "Submit" : "Continue"
|
|
5669
5669
|
}
|
|
5670
|
-
)))))))), showExitDialogue && /* @__PURE__ */ React
|
|
5670
|
+
)))))))), 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 }))));
|
|
5671
5671
|
};
|
|
5672
5672
|
|
|
5673
5673
|
var __defProp = Object.defineProperty;
|
|
@@ -5690,7 +5690,7 @@ var __spreadValues = (a, b) => {
|
|
|
5690
5690
|
};
|
|
5691
5691
|
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
5692
5692
|
const LogServiceButton = (props) => {
|
|
5693
|
-
const [isOpen, setIsOpen] = React
|
|
5693
|
+
const [isOpen, setIsOpen] = React.useState(!!props.isOpen);
|
|
5694
5694
|
const text = props.text || "Log Service";
|
|
5695
5695
|
const onOpen = () => {
|
|
5696
5696
|
if (props.onClick) {
|
|
@@ -5704,10 +5704,10 @@ const LogServiceButton = (props) => {
|
|
|
5704
5704
|
}
|
|
5705
5705
|
setIsOpen(false);
|
|
5706
5706
|
};
|
|
5707
|
-
React
|
|
5707
|
+
React.useEffect(() => {
|
|
5708
5708
|
setIsOpen(!!props.isOpen);
|
|
5709
5709
|
}, [props.isOpen]);
|
|
5710
|
-
return /* @__PURE__ */ React
|
|
5710
|
+
return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
|
|
5711
5711
|
Button,
|
|
5712
5712
|
{
|
|
5713
5713
|
wide: true,
|
|
@@ -5719,11 +5719,11 @@ const LogServiceButton = (props) => {
|
|
|
5719
5719
|
size: "full:md",
|
|
5720
5720
|
onClick: onOpen
|
|
5721
5721
|
}
|
|
5722
|
-
), isOpen && /* @__PURE__ */ React
|
|
5722
|
+
), isOpen && /* @__PURE__ */ React.createElement(Form, __spreadProps(__spreadValues({ onSubmit: props.onSubmit }, props.form), { onClose })));
|
|
5723
5723
|
};
|
|
5724
5724
|
|
|
5725
5725
|
const Stopwatch = (props) => {
|
|
5726
|
-
const ctaList = props.ctaList || [];
|
|
5726
|
+
const ctaList = (props == null ? void 0 : props.ctaList) || [];
|
|
5727
5727
|
const getColor = (label) => {
|
|
5728
5728
|
if (label.toLowerCase() === "start") {
|
|
5729
5729
|
return "green";
|
|
@@ -5758,27 +5758,27 @@ const TaskItem = (props) => {
|
|
|
5758
5758
|
const opacity = props.status === "done" ? "opacity-50" : "";
|
|
5759
5759
|
const icon = props.status === "done" ? "accept" : "circle";
|
|
5760
5760
|
const cursor = props.status === "done" ? "" : "cursor-pointer hover:text-cyan-400 hover:bg-slate-50";
|
|
5761
|
-
return /* @__PURE__ */ React
|
|
5761
|
+
return /* @__PURE__ */ React.createElement(
|
|
5762
5762
|
"div",
|
|
5763
5763
|
{
|
|
5764
5764
|
onClick: () => props.onAction && props.onAction(),
|
|
5765
5765
|
className: `flex px-3 py-2 gap-5 align-middle leading-6 items-center ${color} ${cursor} ${border} ${opacity}`
|
|
5766
5766
|
},
|
|
5767
|
-
/* @__PURE__ */ React
|
|
5768
|
-
/* @__PURE__ */ React
|
|
5767
|
+
/* @__PURE__ */ React.createElement("div", { className: "h-3 w-3" }, /* @__PURE__ */ React.createElement(Icon$1, { name: icon })),
|
|
5768
|
+
/* @__PURE__ */ React.createElement("p", { className: "grow font-semibold text-slate-500 text-sm truncate" }, props.headline)
|
|
5769
5769
|
);
|
|
5770
5770
|
};
|
|
5771
5771
|
|
|
5772
5772
|
const TaskList = (props) => {
|
|
5773
5773
|
const active = props.active || "todo";
|
|
5774
|
-
const tabs = /* @__PURE__ */ React
|
|
5775
|
-
const hasContent = props.children && React
|
|
5776
|
-
const workflow = /* @__PURE__ */ React
|
|
5777
|
-
return /* @__PURE__ */ React
|
|
5774
|
+
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 }));
|
|
5775
|
+
const hasContent = props.children && React.Children.count(props.children) > 0;
|
|
5776
|
+
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));
|
|
5777
|
+
return /* @__PURE__ */ React.createElement("div", { className: "h-[16rem] lg:h-[22rem] w-full" }, /* @__PURE__ */ React.createElement(Board, { isLoading: props.isLoading, tabs, workflow, secondary: true }));
|
|
5778
5778
|
};
|
|
5779
5779
|
|
|
5780
5780
|
const AuthLayout = (props) => {
|
|
5781
|
-
return /* @__PURE__ */ React
|
|
5781
|
+
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(
|
|
5782
5782
|
NavLink,
|
|
5783
5783
|
{
|
|
5784
5784
|
disabled: props.disabled,
|
|
@@ -5786,7 +5786,7 @@ const AuthLayout = (props) => {
|
|
|
5786
5786
|
onClick: props.onProfile,
|
|
5787
5787
|
active: props.page === "profile"
|
|
5788
5788
|
}
|
|
5789
|
-
), props.onExplore && /* @__PURE__ */ React
|
|
5789
|
+
), props.onExplore && /* @__PURE__ */ React.createElement(
|
|
5790
5790
|
NavLink,
|
|
5791
5791
|
{
|
|
5792
5792
|
disabled: props.disabled,
|
|
@@ -5794,7 +5794,7 @@ const AuthLayout = (props) => {
|
|
|
5794
5794
|
onClick: props.onExplore,
|
|
5795
5795
|
active: props.page === "explore"
|
|
5796
5796
|
}
|
|
5797
|
-
), props.onCalendar && /* @__PURE__ */ React
|
|
5797
|
+
), props.onCalendar && /* @__PURE__ */ React.createElement(
|
|
5798
5798
|
NavLink,
|
|
5799
5799
|
{
|
|
5800
5800
|
disabled: props.disabled,
|
|
@@ -5802,12 +5802,12 @@ const AuthLayout = (props) => {
|
|
|
5802
5802
|
onClick: props.onCalendar,
|
|
5803
5803
|
active: props.page === "calendar"
|
|
5804
5804
|
}
|
|
5805
|
-
), props.onSwitchAccount && /* @__PURE__ */ React
|
|
5805
|
+
), 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-[64rem] 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-[64rem] 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);
|
|
5806
5806
|
};
|
|
5807
5807
|
|
|
5808
5808
|
const HomeLayout = (props) => {
|
|
5809
5809
|
const onProfile = () => props.onProfile && props.onProfile();
|
|
5810
|
-
React
|
|
5810
|
+
React.useEffect(() => {
|
|
5811
5811
|
if (props.isLoading) {
|
|
5812
5812
|
return;
|
|
5813
5813
|
}
|
|
@@ -5818,7 +5818,7 @@ const HomeLayout = (props) => {
|
|
|
5818
5818
|
}
|
|
5819
5819
|
}
|
|
5820
5820
|
}, [props.isLoading, props.pathname, props.nickname]);
|
|
5821
|
-
return /* @__PURE__ */ React
|
|
5821
|
+
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));
|
|
5822
5822
|
};
|
|
5823
5823
|
|
|
5824
5824
|
exports.AboutWidget = AboutWidget;
|