@local-civics/mgmt-ui 0.1.56 → 0.1.58

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.
Files changed (6) hide show
  1. package/dist/index.d.ts +8 -3
  2. package/dist/index.js +145 -43
  3. package/dist/index.js.map +1 -1
  4. package/dist/index.mjs +147 -45
  5. package/dist/index.mjs.map +1 -1
  6. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -6,8 +6,8 @@ import * as React from 'react';
6
6
  */
7
7
  interface Item$i {
8
8
  lessonName: string;
9
+ completion: number;
9
10
  isStarted?: boolean;
10
- isComplete?: boolean;
11
11
  }
12
12
 
13
13
  /**
@@ -59,6 +59,8 @@ type BadgeProps = {
59
59
  onPreviewClick: () => void;
60
60
  onUserClick: (user: BadgeUserItem) => void;
61
61
  onLessonClick: (lesson: Item$g) => void;
62
+ onCopyLinkClick: () => void;
63
+ onExportDataClick: () => void;
62
64
  };
63
65
  /**
64
66
  * Badge
@@ -207,8 +209,9 @@ type ClassProps = {
207
209
  description: string;
208
210
  students: StudentItem[];
209
211
  percentageOfAccountsCreated: number;
210
- percentageOfBadgesEarned: number;
211
- percentageOfLessonsCompleted: number;
212
+ numberOfBadgesEarned: number;
213
+ numberOfLessonsCompleted: number;
214
+ withClassLink?: boolean;
212
215
  onBackClick: () => void;
213
216
  onCreateStudents: (students: StudentItem[]) => void;
214
217
  onDeleteStudent: (student: StudentItem) => void;
@@ -394,6 +397,8 @@ type LessonProps = {
394
397
  onClassChange: (classId: string) => void;
395
398
  onPreviewClick: () => void;
396
399
  onUserClick: (user: LessonUserItem) => void;
400
+ onCopyLinkClick: () => void;
401
+ onExportDataClick: () => void;
397
402
  };
398
403
  /**
399
404
  * Lesson
package/dist/index.js CHANGED
@@ -31,7 +31,7 @@ function _interopNamespaceDefault(e) {
31
31
  var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
32
32
  var papa__namespace = /*#__PURE__*/_interopNamespaceDefault(papa);
33
33
 
34
- const useStyles$d = core.createStyles((theme) => ({
34
+ const useStyles$f = core.createStyles((theme) => ({
35
35
  root: {
36
36
  display: "flex",
37
37
  backgroundImage: `linear-gradient(-60deg, ${theme.colors[theme.primaryColor][4]} 0%, ${theme.colors[theme.primaryColor][7]} 100%)`,
@@ -78,7 +78,7 @@ const useStyles$d = core.createStyles((theme) => ({
78
78
  }
79
79
  }));
80
80
  const StatsGroup = ({ data }) => {
81
- const { classes } = useStyles$d();
81
+ const { classes } = useStyles$f();
82
82
  const stats = data.map((stat) => {
83
83
  const value = (() => {
84
84
  if (stat.unit === "%") {
@@ -97,7 +97,58 @@ const Tabs = (props) => {
97
97
  return /* @__PURE__ */ React__namespace.createElement(core.Tabs, { value: props.value, onTabChange: props.onChange }, /* @__PURE__ */ React__namespace.createElement(core.Tabs.List, null, tabs));
98
98
  };
99
99
 
100
- const useStyles$c = core.createStyles((theme) => ({
100
+ const useStyles$e = core.createStyles((theme) => ({
101
+ button: {
102
+ borderTopRightRadius: 0,
103
+ borderBottomRightRadius: 0,
104
+ marginLeft: 0,
105
+ marginRight: 0
106
+ },
107
+ menuControl: {
108
+ borderTopLeftRadius: 0,
109
+ borderBottomLeftRadius: 0,
110
+ border: 0,
111
+ borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
112
+ }
113
+ }));
114
+ const SplitButton$2 = (props) => {
115
+ const { classes, theme } = useStyles$e();
116
+ const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
117
+ return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
118
+ core.Button,
119
+ {
120
+ className: classes.button,
121
+ variant: "gradient",
122
+ onClick: props.onPreviewClick
123
+ },
124
+ "Preview"
125
+ ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
126
+ core.ActionIcon,
127
+ {
128
+ variant: "gradient",
129
+ color: theme.primaryColor,
130
+ size: 36,
131
+ className: classes.menuControl
132
+ },
133
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
134
+ )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React__namespace.createElement(
135
+ core.Menu.Item,
136
+ {
137
+ icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
138
+ onClick: props.onCopyLinkClick
139
+ },
140
+ "Copy link"
141
+ ), /* @__PURE__ */ React__namespace.createElement(
142
+ core.Menu.Item,
143
+ {
144
+ icon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 16, stroke: 1.5, color: menuIconColor }),
145
+ onClick: props.onExportDataClick
146
+ },
147
+ "Export data (.csv)"
148
+ ))));
149
+ };
150
+
151
+ const useStyles$d = core.createStyles((theme) => ({
101
152
  wrapper: {
102
153
  display: "flex",
103
154
  alignItems: "center",
@@ -148,7 +199,7 @@ const useStyles$c = core.createStyles((theme) => ({
148
199
  }
149
200
  }));
150
201
  const PlaceholderBanner = (props) => {
151
- const { classes } = useStyles$c();
202
+ const { classes } = useStyles$d();
152
203
  const title = props.title || "Nothing to display";
153
204
  const description = props.description || "We don't have anything to show you here just yet. Add data, check back later, or adjust your search.";
154
205
  return /* @__PURE__ */ React__namespace.createElement("div", { className: classes.wrapper }, /* @__PURE__ */ React__namespace.createElement("div", { className: classes.body }, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.loading ? "Loading..." : title), /* @__PURE__ */ React__namespace.createElement(core.Text, { size: "sm", color: "dimmed" }, props.loading ? "Hold on, we're loading your data." : description)), /* @__PURE__ */ React__namespace.createElement(core.Image, { src: `https://cdn.localcivics.io/illustrations/${props.icon}.svg`, className: classes.image }));
@@ -158,7 +209,7 @@ function Stack$2(props) {
158
209
  if (props.items.length === 0) {
159
210
  return null;
160
211
  }
161
- const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, !!row.isComplete && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), !row.isComplete && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), !row.isComplete && !!row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, "In progress"))));
212
+ const rows = props.items.map((row) => /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { color: "dark.4", size: "lg" }, row.lessonName)), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { span: 6 }, row.completion >= 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled" }, "Complete"), row.completion === 0 && !row.isStarted && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "red", variant: "filled" }, "Not started"), row.completion > 0 && row.completion < 1 && /* @__PURE__ */ React__namespace.createElement(core.Badge, { color: "violet", variant: "filled" }, Math.round((row.completion + Number.EPSILON) * 100), "% Complete"))));
162
213
  return /* @__PURE__ */ React__namespace.createElement(core.Grid, { grow: true, gutter: "lg", sx: { padding: 20, minWidth: 700 } }, rows);
163
214
  }
164
215
 
@@ -220,7 +271,7 @@ function Table$e(props) {
220
271
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Lesson Completion"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
221
272
  }
222
273
 
223
- const useStyles$b = core.createStyles((theme) => ({
274
+ const useStyles$c = core.createStyles((theme) => ({
224
275
  title: {
225
276
  fontSize: 34,
226
277
  fontWeight: 900,
@@ -233,7 +284,7 @@ const useStyles$b = core.createStyles((theme) => ({
233
284
  }
234
285
  }));
235
286
  const Badge = (props) => {
236
- const { classes } = useStyles$b();
287
+ const { classes } = useStyles$c();
237
288
  const [tab, setTab] = React.useState("lessons");
238
289
  const numberOfStudents = props.students.length;
239
290
  const percentageOfBadgesEarned = numberOfStudents > 0 ? props.students.filter((u) => u.isComplete).length / numberOfStudents : 0;
@@ -246,12 +297,12 @@ const Badge = (props) => {
246
297
  },
247
298
  "Badges"
248
299
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Badge"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
249
- core.Button,
300
+ SplitButton$2,
250
301
  {
251
- variant: "gradient",
252
- onClick: props.onPreviewClick
253
- },
254
- "Preview"
302
+ onPreviewClick: props.onPreviewClick,
303
+ onCopyLinkClick: props.onCopyLinkClick,
304
+ onExportDataClick: props.onExportDataClick
305
+ }
255
306
  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
256
307
  {
257
308
  title: "BADGE COMPLETION",
@@ -331,7 +382,7 @@ function Table$d(props) {
331
382
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { horizontalSpacing: 0, verticalSpacing: 0, sx: { minWidth: 700 } }, /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
332
383
  }
333
384
 
334
- const useStyles$a = core.createStyles((theme) => ({
385
+ const useStyles$b = core.createStyles((theme) => ({
335
386
  title: {
336
387
  fontSize: 34,
337
388
  fontWeight: 900,
@@ -344,7 +395,7 @@ const useStyles$a = core.createStyles((theme) => ({
344
395
  }
345
396
  }));
346
397
  const Badges = (props) => {
347
- const { classes } = useStyles$a();
398
+ const { classes } = useStyles$b();
348
399
  return /* @__PURE__ */ React__namespace.createElement(core.Container, { size: "lg", py: "xl" }, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: "md" }, /* @__PURE__ */ React__namespace.createElement(core.Grid, null, /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "auto" }, /* @__PURE__ */ React__namespace.createElement(core.Badge, { variant: "filled", size: "lg" }, "Badges"), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, "Badges and micro-credentials"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, "Project-sized skills acquisition and standards alignment."))), /* @__PURE__ */ React__namespace.createElement(
349
400
  core.Autocomplete,
350
401
  {
@@ -552,7 +603,7 @@ const Dashboard = (props) => {
552
603
  )))))));
553
604
  };
554
605
 
555
- const useStyles$9 = core.createStyles((theme) => ({
606
+ const useStyles$a = core.createStyles((theme) => ({
556
607
  button: {
557
608
  borderTopRightRadius: 0,
558
609
  borderBottomRightRadius: 0,
@@ -566,18 +617,19 @@ const useStyles$9 = core.createStyles((theme) => ({
566
617
  borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
567
618
  }
568
619
  }));
569
- const SplitButton = (props) => {
570
- const { classes, theme } = useStyles$9();
620
+ const SplitButton$1 = (props) => {
621
+ const { classes, theme } = useStyles$a();
571
622
  const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
623
+ const hasMenu = !!props.withClassLink;
572
624
  return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
573
625
  core.Button,
574
626
  {
575
- className: classes.button,
627
+ className: hasMenu ? classes.button : "",
576
628
  leftIcon: /* @__PURE__ */ React__namespace.createElement(icons.IconPlaylistAdd, { size: 14 }),
577
629
  onClick: props.onAddStudentsClick
578
630
  },
579
631
  "Add students"
580
- ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
632
+ ), hasMenu && /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
581
633
  core.ActionIcon,
582
634
  {
583
635
  variant: "filled",
@@ -586,7 +638,7 @@ const SplitButton = (props) => {
586
638
  className: classes.menuControl
587
639
  },
588
640
  /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
589
- )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React__namespace.createElement(
641
+ )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, !!props.withClassLink && /* @__PURE__ */ React__namespace.createElement(
590
642
  core.Menu.Item,
591
643
  {
592
644
  icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
@@ -639,7 +691,7 @@ var __spreadValues$3 = (a, b) => {
639
691
  return a;
640
692
  };
641
693
  var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
642
- const useStyles$8 = core.createStyles((theme) => ({
694
+ const useStyles$9 = core.createStyles((theme) => ({
643
695
  title: {
644
696
  fontSize: 34,
645
697
  fontWeight: 900,
@@ -669,7 +721,7 @@ const useStyles$8 = core.createStyles((theme) => ({
669
721
  }
670
722
  }));
671
723
  const Class = (props) => {
672
- const { classes } = useStyles$8();
724
+ const { classes } = useStyles$9();
673
725
  const form$1 = form.useForm({
674
726
  initialValues: {
675
727
  classId: "",
@@ -733,8 +785,9 @@ const Class = (props) => {
733
785
  },
734
786
  "Classes"
735
787
  ), /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Class"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Grid.Col, { sm: "content" }, !props.loading && /* @__PURE__ */ React__namespace.createElement(
736
- SplitButton,
788
+ SplitButton$1,
737
789
  {
790
+ withClassLink: props.withClassLink,
738
791
  onAddStudentsClick: () => setOpened(true),
739
792
  onCopyClassLinkClick: props.onCopyLinkClick
740
793
  }
@@ -749,14 +802,12 @@ const Class = (props) => {
749
802
  unit: "%"
750
803
  },
751
804
  {
752
- title: "BADGE COMPLETION",
753
- value: props.percentageOfBadgesEarned,
754
- unit: "%"
805
+ title: "BADGES EARNED",
806
+ value: props.numberOfBadgesEarned
755
807
  },
756
808
  {
757
- title: "LESSON COMPLETION",
758
- value: props.percentageOfLessonsCompleted,
759
- unit: "%"
809
+ title: "LESSONS COMPLETED",
810
+ value: props.numberOfLessonsCompleted
760
811
  }
761
812
  ] }), /* @__PURE__ */ React__namespace.createElement(
762
813
  Table$7,
@@ -769,7 +820,7 @@ const Class = (props) => {
769
820
  ))))));
770
821
  };
771
822
  const DropzoneButton = (props) => {
772
- const { classes, theme } = useStyles$8();
823
+ const { classes, theme } = useStyles$9();
773
824
  const openRef = React__namespace.useRef(null);
774
825
  const [loading, setLoading] = React__namespace.useState(false);
775
826
  const onDrop = React__namespace.useCallback((acceptedFiles) => {
@@ -855,7 +906,7 @@ var __spreadValues$2 = (a, b) => {
855
906
  }
856
907
  return a;
857
908
  };
858
- const useStyles$7 = core.createStyles((theme) => ({
909
+ const useStyles$8 = core.createStyles((theme) => ({
859
910
  title: {
860
911
  fontSize: 34,
861
912
  fontWeight: 900,
@@ -868,7 +919,7 @@ const useStyles$7 = core.createStyles((theme) => ({
868
919
  }
869
920
  }));
870
921
  const Classes = (props) => {
871
- const { classes } = useStyles$7();
922
+ const { classes } = useStyles$8();
872
923
  const form$1 = form.useForm({
873
924
  initialValues: {
874
925
  classId: "",
@@ -931,7 +982,7 @@ const Classes = (props) => {
931
982
  ))))));
932
983
  };
933
984
 
934
- const useStyles$6 = core.createStyles((theme) => ({
985
+ const useStyles$7 = core.createStyles((theme) => ({
935
986
  title: {
936
987
  fontSize: 34,
937
988
  fontWeight: 900,
@@ -945,7 +996,7 @@ const useStyles$6 = core.createStyles((theme) => ({
945
996
  }
946
997
  }));
947
998
  const UserInfo = (props) => {
948
- const { classes } = useStyles$6();
999
+ const { classes } = useStyles$7();
949
1000
  return /* @__PURE__ */ React__namespace.createElement(React__namespace.Fragment, null, /* @__PURE__ */ React__namespace.createElement(core.Title, { className: classes.title }, props.name), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "xs" }, props.impactStatement));
950
1001
  };
951
1002
 
@@ -1066,7 +1117,7 @@ const Student = (props) => {
1066
1117
  ))))));
1067
1118
  };
1068
1119
 
1069
- const useStyles$5 = core.createStyles((theme, props) => {
1120
+ const useStyles$6 = core.createStyles((theme, props) => {
1070
1121
  const from = props.from || "blue";
1071
1122
  const to = props.to || "green";
1072
1123
  return {
@@ -1094,7 +1145,7 @@ const useStyles$5 = core.createStyles((theme, props) => {
1094
1145
  };
1095
1146
  });
1096
1147
  function CardGradient(props) {
1097
- const { classes } = useStyles$5(props);
1148
+ const { classes } = useStyles$6(props);
1098
1149
  const from = props.from || "blue";
1099
1150
  const to = props.to || "green";
1100
1151
  const icon = props.icon || /* @__PURE__ */ React__namespace.createElement(icons.IconColorSwatch, { size: 28, stroke: 1.5 });
@@ -1138,7 +1189,7 @@ var __objRest = (source, exclude) => {
1138
1189
  }
1139
1190
  return target;
1140
1191
  };
1141
- const useStyles$4 = core.createStyles((theme) => ({
1192
+ const useStyles$5 = core.createStyles((theme) => ({
1142
1193
  card: {
1143
1194
  height: 240,
1144
1195
  backgroundSize: "cover",
@@ -1183,7 +1234,7 @@ const TenantBanner = (_a) => {
1183
1234
  "style",
1184
1235
  "className"
1185
1236
  ]);
1186
- const { classes, cx, theme } = useStyles$4();
1237
+ const { classes, cx, theme } = useStyles$5();
1187
1238
  return /* @__PURE__ */ React__namespace.createElement(
1188
1239
  core.Card,
1189
1240
  __spreadValues$1({
@@ -1281,6 +1332,57 @@ function Table$2(props) {
1281
1332
  return /* @__PURE__ */ React__namespace.createElement(core.ScrollArea.Autosize, { maxHeight: 500 }, /* @__PURE__ */ React__namespace.createElement(core.Table, { verticalSpacing: "sm", sx: { minWidth: 700 }, highlightOnHover: true, striped: true }, /* @__PURE__ */ React__namespace.createElement("thead", null, /* @__PURE__ */ React__namespace.createElement("tr", null, /* @__PURE__ */ React__namespace.createElement("th", null, "Student Name"), /* @__PURE__ */ React__namespace.createElement("th", null, "Reflection"), /* @__PURE__ */ React__namespace.createElement("th", null, "Rating"))), /* @__PURE__ */ React__namespace.createElement("tbody", null, rows)));
1282
1333
  }
1283
1334
 
1335
+ const useStyles$4 = core.createStyles((theme) => ({
1336
+ button: {
1337
+ borderTopRightRadius: 0,
1338
+ borderBottomRightRadius: 0,
1339
+ marginLeft: 0,
1340
+ marginRight: 0
1341
+ },
1342
+ menuControl: {
1343
+ borderTopLeftRadius: 0,
1344
+ borderBottomLeftRadius: 0,
1345
+ border: 0,
1346
+ borderLeft: `1px solid ${theme.colorScheme === "dark" ? theme.colors.dark[7] : theme.white}`
1347
+ }
1348
+ }));
1349
+ const SplitButton = (props) => {
1350
+ const { classes, theme } = useStyles$4();
1351
+ const menuIconColor = theme.colors[theme.primaryColor][theme.colorScheme === "dark" ? 5 : 6];
1352
+ return /* @__PURE__ */ React__namespace.createElement(core.Group, { noWrap: true, spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(
1353
+ core.Button,
1354
+ {
1355
+ className: classes.button,
1356
+ variant: "gradient",
1357
+ onClick: props.onPreviewClick
1358
+ },
1359
+ "Preview"
1360
+ ), /* @__PURE__ */ React__namespace.createElement(core.Menu, { transition: "pop", position: "bottom-end" }, /* @__PURE__ */ React__namespace.createElement(core.Menu.Target, null, /* @__PURE__ */ React__namespace.createElement(
1361
+ core.ActionIcon,
1362
+ {
1363
+ variant: "gradient",
1364
+ color: theme.primaryColor,
1365
+ size: 36,
1366
+ className: classes.menuControl
1367
+ },
1368
+ /* @__PURE__ */ React__namespace.createElement(icons.IconChevronDown, { size: 16, stroke: 1.5 })
1369
+ )), /* @__PURE__ */ React__namespace.createElement(core.Menu.Dropdown, null, /* @__PURE__ */ React__namespace.createElement(
1370
+ core.Menu.Item,
1371
+ {
1372
+ icon: /* @__PURE__ */ React__namespace.createElement(icons.IconClipboardCopy, { size: 16, stroke: 1.5, color: menuIconColor }),
1373
+ onClick: props.onCopyLinkClick
1374
+ },
1375
+ "Copy link"
1376
+ ), /* @__PURE__ */ React__namespace.createElement(
1377
+ core.Menu.Item,
1378
+ {
1379
+ icon: /* @__PURE__ */ React__namespace.createElement(icons.IconTableExport, { size: 16, stroke: 1.5, color: menuIconColor }),
1380
+ onClick: props.onExportDataClick
1381
+ },
1382
+ "Export data (.csv)"
1383
+ ))));
1384
+ };
1385
+
1284
1386
  function Stack$1(props) {
1285
1387
  if (props.items.length === 0) {
1286
1388
  return null;
@@ -1422,12 +1524,12 @@ const Lesson = (props) => {
1422
1524
  },
1423
1525
  "Lessons"
1424
1526
  ), /* @__PURE__ */ React__namespace.createElement(core.Group, null, /* @__PURE__ */ React__namespace.createElement(core.Stack, { spacing: 0 }, /* @__PURE__ */ React__namespace.createElement(core.Title, { order: 2, className: classes.title, mt: "md" }, props.displayName || "Lesson"), /* @__PURE__ */ React__namespace.createElement(core.Text, { color: "dimmed", className: classes.description, mt: "sm" }, props.description || "No description")), /* @__PURE__ */ React__namespace.createElement(core.Stack, { ml: "auto" }, /* @__PURE__ */ React__namespace.createElement(
1425
- core.Button,
1527
+ SplitButton,
1426
1528
  {
1427
- variant: "gradient",
1428
- onClick: props.onPreviewClick
1429
- },
1430
- "Preview"
1529
+ onPreviewClick: props.onPreviewClick,
1530
+ onCopyLinkClick: props.onCopyLinkClick,
1531
+ onExportDataClick: props.onExportDataClick
1532
+ }
1431
1533
  ))))), /* @__PURE__ */ React__namespace.createElement("div", null, /* @__PURE__ */ React__namespace.createElement("div", { style: { position: "relative" } }, /* @__PURE__ */ React__namespace.createElement(core.LoadingOverlay, { visible: props.loading, overlayBlur: 2 }), /* @__PURE__ */ React__namespace.createElement(core.Stack, null, /* @__PURE__ */ React__namespace.createElement(StatsGroup, { data: [
1432
1534
  {
1433
1535
  title: "LESSON COMPLETION",