@local-civics/mgmt-ui 0.1.74 → 0.1.76

package/dist/index.mjs

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { useState } from 'react';
-import { createStyles, Navbar as Navbar$1, Center, Avatar, Image, Stack as Stack$3, Tooltip, UnstyledButton, Group, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Code, Burger, ScrollArea, Card, Modal, Loader, SimpleGrid, Tabs as Tabs$1, Button, Menu, ActionIcon, Title, Grid, Table as Table$h, Container, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Paper, Overlay, Anchor, Progress, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
-import { IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconChevronRight, IconChevronLeft, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconBadge, IconCopy, IconHistory, IconLego, IconNews, IconTools, IconPodium, IconAffiliate, IconGrowth, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
+import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, UnstyledButton, Card, Modal, Loader, SimpleGrid, Tabs as Tabs$1, Button, Menu, ActionIcon, Title, Grid, Table as Table$h, Container, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Progress, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { IconChevronRight, IconChevronLeft, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconBadge, IconCopy, IconHistory, IconLego, IconNews, IconTools, IconPodium, IconAffiliate, IconGrowth, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { NotificationsProvider } from '@mantine/notifications';
 export { showNotification, updateNotification } from '@mantine/notifications';
@@ -14,65 +14,6 @@ import { Chart } from 'react-charts';
 import AvatarInit from 'avatar-initials';
 import { useUncontrolled } from '@mantine/hooks';
 
-const useStyles$p = createStyles((theme) => ({
-  link: {
-    width: 50,
-    height: 50,
-    borderRadius: theme.radius.md,
-    display: "flex",
-    alignItems: "center",
-    justifyContent: "center",
-    color: theme.colorScheme === "dark" ? theme.colors.dark[0] : theme.colors.gray[7],
-    "&:hover": {
-      backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[0]
-    }
-  },
-  active: {
-    "&, &:hover": {
-      backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
-      color: theme.fn.variant({ variant: "light", color: theme.primaryColor }).color
-    }
-  }
-}));
-const data$1 = [
-  { icon: IconHome2, label: "Home", href: "/home" },
-  { icon: IconGauge, label: "Dashboard", href: "/dashboard" },
-  { icon: IconCategory2, label: "Classes", href: "/classes" },
-  { icon: IconAlbum, label: "Badges", href: "/badges" },
-  { icon: IconLambda, label: "Lessons", href: "/lessons" }
-];
-const NavbarLink = ({ icon: Icon, label, active, onClick }) => {
-  const { classes, cx } = useStyles$p();
-  return /* @__PURE__ */ React.createElement(Tooltip, { label, position: "right", transitionDuration: 0 }, /* @__PURE__ */ React.createElement(UnstyledButton, { onClick, className: cx(classes.link, { [classes.active]: active }) }, /* @__PURE__ */ React.createElement(Icon, { stroke: 1.5 })));
-};
-const Navbar = (props) => {
-  const links = data$1.map((link) => /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      key: link.label,
-      label: link.label,
-      icon: link.icon,
-      active: link.label === props.active,
-      onClick: () => props.navigate(link.href)
-    }
-  ));
-  return /* @__PURE__ */ React.createElement(Navbar$1, { width: { base: 80 }, p: "md" }, /* @__PURE__ */ React.createElement(Center, null, /* @__PURE__ */ React.createElement(Avatar, { color: "blue", radius: "sm" }, /* @__PURE__ */ React.createElement("div", { style: { width: 15, marginLeft: "auto", marginRight: "auto" } }, /* @__PURE__ */ React.createElement(Image, { fit: "contain", src: "https://cdn.localcivics.io/brand/l.png" })))), /* @__PURE__ */ React.createElement(Navbar$1.Section, { grow: true, mt: 50 }, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, links)), /* @__PURE__ */ React.createElement(Navbar$1.Section, null, /* @__PURE__ */ React.createElement(Stack$3, { justify: "center", spacing: 0 }, /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      icon: IconSwitchHorizontal,
-      label: "Switch accounts",
-      onClick: props.onSwitchAccounts
-    }
-  ), /* @__PURE__ */ React.createElement(
-    NavbarLink,
-    {
-      icon: IconLogout,
-      label: "Logout",
-      onClick: props.onLogout
-    }
-  ))));
-};
-
 var __defProp$9 = Object.defineProperty;
 var __getOwnPropSymbols$9 = Object.getOwnPropertySymbols;
 var __hasOwnProp$9 = Object.prototype.hasOwnProperty;
@@ -333,7 +274,7 @@ const data = [
     ]
   }
 ];
-function NestedNavbar(props) {
+function Navbar(props) {
   const { classes, cx } = useStyles$m();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
@@ -2764,7 +2705,15 @@ const TrialRegistration = (props) => {
   const [firstName, setFirstName] = React.useState("");
   const [lastName, setLastName] = React.useState("");
   const [interests, setInterests] = React.useState({});
-  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 1, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Trial Educator"), /* @__PURE__ */ React.createElement(Text, { className: classes.description, mt: "sm", mb: 30 }, "Try out a some of the features we can bring to your classroom. No commitment required.")), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(Group, { mb: "md", spacing: "md", grow: true }, /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React.createElement(SimpleGrid, { maw: 960, ml: "auto", mr: "auto", cols: 1, spacing: 15, breakpoints: [{ maxWidth: "sm", cols: 1 }] }, /* @__PURE__ */ React.createElement(Group, { spacing: "sm" }, /* @__PURE__ */ React.createElement(
+    Image,
+    {
+      height: 100,
+      width: "auto",
+      fit: "contain",
+      src: "https://cdn.localcivics.io/brand/l.png"
+    }
+  ), /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "Trial Educator"), /* @__PURE__ */ React.createElement(Text, { className: classes.description, mt: "sm" }, "Try out a few of the features we can bring to your classroom. No commitment required."))), /* @__PURE__ */ React.createElement("div", { className: classes.form }, /* @__PURE__ */ React.createElement(Group, { mb: "md", spacing: "md", grow: true }, /* @__PURE__ */ React.createElement(
     TextInput,
     {
       label: "First Name",
@@ -2836,17 +2785,17 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-const useStyles = createStyles((theme) => ({
+const useStyles = createStyles((theme, props) => ({
   footer: {
     paddingTop: theme.spacing.md,
     paddingBottom: theme.spacing.md,
-    paddingLeft: theme.spacing.md,
+    paddingLeft: props.navbar ? theme.spacing.md : 0,
     backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : theme.colors.gray[0],
     borderTop: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]}`,
     [theme.fn.largerThan("sm")]: {
       paddingTop: theme.spacing.xl * 2,
       paddingBottom: theme.spacing.xl * 2,
-      paddingLeft: theme.spacing.xl * 13
+      paddingLeft: props.navbar ? theme.spacing.xl * 13 : 0
     }
   },
   logo: {
@@ -2918,14 +2867,14 @@ const useStyles = createStyles((theme) => ({
   }
 }));
 const App = (props) => {
-  const { classes } = useStyles();
+  const { classes } = useStyles(props);
   const account = useAccount(props.account, props.accounts, props.onAccountChange);
   return /* @__PURE__ */ React.createElement(
     AppShell,
     {
       padding: "xs",
-      navbar: /* @__PURE__ */ React.createElement(
-        NestedNavbar,
+      navbar: props.navbar && /* @__PURE__ */ React.createElement(
+        Navbar,
         __spreadProps(__spreadValues({}, props.navbar.props), {
           onSwitchAccounts: account.accounts && account.accounts.length > 1 ? () => account.setChangeModalOpen(true) : void 0
         })
@@ -2972,7 +2921,7 @@ const App = (props) => {
       })
     },
     /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, (props.loading || account.opened) && /* @__PURE__ */ React.createElement(Center, { style: { height: 400 } }, /* @__PURE__ */ React.createElement(Loader, null)), !props.loading && !account.opened && props.page),
-    /* @__PURE__ */ React.createElement(
+    !!account.accounts && !!account.account && /* @__PURE__ */ React.createElement(
       SwitchAccount,
       {
         opened: account.opened,
@@ -3001,6 +2950,9 @@ const useAccount = (account, accounts, onAccountChange) => {
     setChangeModalOpen,
     onAccountChange: (account2) => {
       setLoading(true);
+      if (!onAccountChange) {
+        return;
+      }
       onAccountChange(account2).then(() => {
         setActive(account2);
         setLoading(false);
@@ -3010,5 +2962,5 @@ const useAccount = (account, accounts, onAccountChange) => {
   };
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, NestedNavbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map