diff --git a/src/app/components/content/IsaacContent.tsx b/src/app/components/content/IsaacContent.tsx
index 63490d475d..70399b2a68 100644
--- a/src/app/components/content/IsaacContent.tsx
+++ b/src/app/components/content/IsaacContent.tsx
@@ -21,6 +21,7 @@ import { isQuestion } from "../../services";
import { IsaacCodeTabs } from "./IsaacCodeTabs";
import { IsaacInteractiveCodeSnippet } from "./IsaacInteractiveCodeSnippet";
import { IsaacCallout } from "./IsaacCallout";
+import { IsaacEventsCarousel } from "./IsaacEventsCarousel";
const IsaacCodeSnippet = lazy(() => import("./IsaacCodeSnippet"));
const classBasedLayouts = {
@@ -90,6 +91,9 @@ export const IsaacContent = withRouter((props: IsaacContentProps) => {
case "codeTabs":
selectedComponent = ;
break;
+ case "isaacEventsCarousel":
+ selectedComponent = ;
+ break;
default:
switch (layout) {
case "tabs":
diff --git a/src/app/components/content/IsaacEventsCarousel.tsx b/src/app/components/content/IsaacEventsCarousel.tsx
new file mode 100644
index 0000000000..6f443f6d5d
--- /dev/null
+++ b/src/app/components/content/IsaacEventsCarousel.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+import { Link } from "react-router-dom";
+import { EventsCarousel } from "../elements/EventsCarousel";
+
+export const IsaacEventsCarousel = () => {
+ return (
+
+
+
+
+ Browse all events
+
+
+
+ );
+};
diff --git a/src/scss/cs/isaac.scss b/src/scss/cs/isaac.scss
index a25e25b6c3..4f1fa06624 100644
--- a/src/scss/cs/isaac.scss
+++ b/src/scss/cs/isaac.scss
@@ -537,6 +537,14 @@ a.browse-events {
}
}
+.isaac-events-carousel {
+ padding-top: 1rem;
+
+ .center-container {
+ margin-top: 1rem;
+ }
+}
+
.center-container {
display: flex;
justify-content: center;
diff --git a/src/test/components/elements/content/IsaacEventsCarousel.test.tsx b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx
new file mode 100644
index 0000000000..7c7b1111d7
--- /dev/null
+++ b/src/test/components/elements/content/IsaacEventsCarousel.test.tsx
@@ -0,0 +1,28 @@
+import React from "react";
+import { screen } from "@testing-library/react";
+import { renderTestEnvironment } from "../../../utils";
+import { IsaacContent } from "../../../../app/components/content/IsaacContent";
+
+const IsaacEventsCarouselHarness = () => ;
+
+describe("IsaacEventsCarousel content type", () => {
+ const renderInsideIsaacContent = () =>
+ renderTestEnvironment({
+ role: "ANONYMOUS",
+ PageComponent: IsaacEventsCarouselHarness,
+ initialRouteEntries: ["/"],
+ });
+
+ it("renders the events carousel wrapper", () => {
+ renderInsideIsaacContent();
+ const wrapper = screen.getByTestId("isaac-events-carousel");
+ expect(wrapper).toBeInTheDocument();
+ });
+
+ it("renders a 'Browse all events' link pointing to /events", () => {
+ renderInsideIsaacContent();
+ const browseLink = screen.getByRole("link", { name: /browse all events/i });
+ expect(browseLink).toBeInTheDocument();
+ expect(browseLink).toHaveAttribute("href", "/events");
+ });
+});