@local-civics/mgmt-ui 0.1.102 → 0.1.103

package/dist/index.mjs

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useState } from 'react';
-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, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
+import { createStyles, Group, Avatar, Text, Box, Badge as Badge$1, ThemeIcon, Collapse, Navbar as Navbar$1, Center, Image, Code, Burger, ScrollArea, Modal, Loader, Container, Button, Title, UnstyledButton, Card, SimpleGrid, Tabs as Tabs$1, Menu, ActionIcon, Grid, Table as Table$h, Stack as Stack$3, LoadingOverlay, Select, Autocomplete, Drawer, Divider, TextInput, Tooltip, Paper, Overlay, Anchor, Checkbox, createEmotionCache, MantineProvider, AppShell } from '@mantine/core';
 import { IconChevronRight, IconChevronLeft, IconVideo, IconSwitchHorizontal, IconLogout, IconHome2, IconGauge, IconCategory2, IconAlbum, IconLambda, IconBuilding, IconBatteryEco, IconBooks, IconBackpack, IconChevronDown, IconClipboardCopy, IconTableExport, IconArrowLeft, IconPlaylistAdd, IconCheck, IconTrash, IconDownload, IconX, IconCloudUpload, IconInfoCircle, IconColorSwatch, IconPointer, IconScribble, IconSchool, IconPodium, IconBriefcase, IconPresentation, IconNews, IconTools, IconBrandInstagram, IconBrandLinkedin, IconBrandFacebook } from '@tabler/icons';
 import { Link } from 'react-router-dom';
 import { NotificationsProvider } from '@mantine/notifications';
@@ -42,7 +42,7 @@ var __objRest$2 = (source, exclude) => {
     }
   return target;
 };
-const useStyles$p = createStyles((theme) => ({
+const useStyles$q = createStyles((theme) => ({
   user: {
     display: "block",
     width: "100%",
@@ -53,7 +53,7 @@ const useStyles$p = createStyles((theme) => ({
 }));
 function UserButton(_a) {
   var _b = _a, { image, name, email, icon } = _b, others = __objRest$2(_b, ["image", "name", "email", "icon"]);
-  const { classes } = useStyles$p();
+  const { classes } = useStyles$q();
   return /* @__PURE__ */ React.createElement(Group, __spreadValues$9({ className: classes.user }, others), /* @__PURE__ */ React.createElement(Avatar, { src: image, radius: "xl" }), /* @__PURE__ */ React.createElement("div", { style: { flex: 1 } }, /* @__PURE__ */ React.createElement(Text, { size: "sm", weight: 500 }, name), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", size: "xs" }, email)));
 }
 
@@ -64,7 +64,7 @@ const compact = (num) => {
   }).format(num || 0);
 };
 
-const useStyles$o = createStyles((theme, _params, getRef) => {
+const useStyles$p = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     control: {
@@ -117,7 +117,7 @@ const useStyles$o = createStyles((theme, _params, getRef) => {
   };
 });
 function LinksGroup({ icon: Icon, href, label, initiallyOpened, links, active, notifications }) {
-  const { classes, theme, cx } = useStyles$o();
+  const { classes, theme, cx } = useStyles$p();
   const hasLinks = Array.isArray(links) && links.length > 0;
   const hasActiveLinks = Array.isArray(links) && links.map((l) => !!active && active === `${label}/${l.label}`).reduce((a, b) => a || b, false);
   const [opened, setOpened] = useState(initiallyOpened || hasActiveLinks || false);
@@ -181,7 +181,7 @@ var __spreadValues$8 = (a, b) => {
   return a;
 };
 var __spreadProps$5 = (a, b) => __defProps$5(a, __getOwnPropDescs$5(b));
-const useStyles$n = createStyles((theme, _params, getRef) => {
+const useStyles$o = createStyles((theme, _params, getRef) => {
   const icon = getRef("icon");
   return {
     navbar: {
@@ -280,7 +280,7 @@ const TRIAL_PAGES = [
   "Badges"
 ];
 function Navbar(props) {
-  const { classes, cx } = useStyles$n();
+  const { classes, cx } = useStyles$o();
   const [burgerOpen, setBurgerOpen] = React.useState(false);
   const toggle = () => setBurgerOpen(!burgerOpen);
   const links = data.map((item) => {
@@ -323,6 +323,56 @@ function Navbar(props) {
   } }, /* @__PURE__ */ React.createElement(IconLogout, { className: classes.linkIcon, stroke: 1.5 }), /* @__PURE__ */ React.createElement("span", null, "Logout"))))));
 }
 
+const useStyles$n = createStyles((theme) => ({
+  inner: {
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl * 4
+  },
+  content: {
+    maxWidth: 600,
+    marginRight: theme.spacing.xl,
+    [theme.fn.smallerThan("md")]: {
+      maxWidth: "100%",
+      marginRight: 0
+    }
+  },
+  title: {
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    fontSize: 44,
+    lineHeight: 1.2,
+    fontWeight: 900,
+    [theme.fn.smallerThan("xs")]: {
+      fontSize: 28
+    }
+  },
+  control: {
+    [theme.fn.smallerThan("xs")]: {
+      flex: 1
+    }
+  },
+  highlight: {
+    position: "relative",
+    backgroundColor: theme.fn.variant({ variant: "light", color: theme.primaryColor }).background,
+    borderRadius: theme.radius.sm,
+    padding: "4px 12px"
+  }
+}));
+const GettingStarted = (props) => {
+  const { classes } = useStyles$n();
+  return /* @__PURE__ */ React.createElement(
+    Modal,
+    {
+      centered: true,
+      fullScreen: true,
+      opened: props.opened,
+      onClose: () => props.onClose && props.onClose(),
+      size: "sm"
+    },
+    /* @__PURE__ */ React.createElement("div", { style: { position: "relative" } }, props.loading && /* @__PURE__ */ React.createElement(Center, { style: { height: 400 } }, /* @__PURE__ */ React.createElement(Loader, null)), !props.loading && /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(Group, { position: "center" }, /* @__PURE__ */ React.createElement("div", { className: classes.inner }, /* @__PURE__ */ React.createElement("div", { className: classes.content }, /* @__PURE__ */ React.createElement(Button, { radius: "xl", size: "md", className: classes.control }, "Skip tour"), /* @__PURE__ */ React.createElement(Title, { className: classes.title }, "An experience purpose built for educators like you!"), /* @__PURE__ */ React.createElement(Text, { color: "dimmed", mt: "md" }, "Hello! We're excited that you chose try out a few of the tools that Local Civics can bring to your classroom. Watch this short video tour to get a sense of how to navigate around the platform."), /* @__PURE__ */ React.createElement("video", { style: { marginTop: "20px", marginBottom: "20px" }, width: "600", height: "350", controls: true }, /* @__PURE__ */ React.createElement("source", { src: props.videoURL, type: "video/mp4" }), "Your browser does not support the video tag."))))))
+  );
+};
+
 const useStyles$m = createStyles((theme) => ({
   title: {
     fontSize: 34,
@@ -3050,5 +3100,5 @@ const useAccount = (account, accounts, onAccountChange) => {
   };
 };
 
-export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
+export { AdminProvider, App, Badge, Badges, Class, Classes, Dashboard, GettingStarted, Home, Lesson, Lessons, Navbar, Organization, People, StartAnonymousLesson, Student, SwitchAccount, TrialHome, TrialRegistration };
 //# sourceMappingURL=index.mjs.map