Added EventList as a block, in order to display multiple events.

I placed this as a block, since i reckon we should have a block for the event-list-page.

I'm not sure if i should call it event-list-page now, or something else, or if it should be kept in /library. Please comment on this.

base.scss

@@ -116,6 +116,7 @@
 @import "./src/stories/Blocks/advanced-search/advanced-search";
 @import "./src/stories/Blocks/article/article";
 @import "./src/stories/Blocks/event-page/event-page";
+@import "./src/stories/Blocks/event-list/event-list";
 
 @import "./src/styles/scss/shared";
 @import "./src/styles/scss/internal";

src/stories/Blocks/event-list/EventList.stories.tsx

@@ -0,0 +1,11 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+import EventList from "./EventList";
+
+export default {
+  title: "Blocks / Event List",
+  component: EventList,
+} as ComponentMeta<typeof EventList>;
+
+const Template: ComponentStory<typeof EventList> = () => <EventList />;
+
+export const Default = Template.bind({});

src/stories/Blocks/event-list/EventList.tsx

@@ -0,0 +1,24 @@
+import { EventListItem } from "../../Library/event-list-item/EventListItem";
+import eventListData from "./EventListData";
+
+const EventList = () => {
+  return (
+    <ul className="event-list">
+      {eventListData.map((event, index) => (
+        <EventListItem
+          key={index}
+          image={event.image}
+          title={event.title}
+          description={event.description}
+          date={event.date}
+          time={event.time}
+          location={event.location}
+          price={event.price}
+          href={event.href}
+        />
+      ))}
+    </ul>
+  );
+};
+
+export default EventList;

src/stories/Blocks/event-list/EventListData.ts

@@ -0,0 +1,50 @@
+import { EventListItemProps } from "../../Library/event-list-item/EventListItem";
+
+const eventListData: EventListItemProps[] = [
+  {
+    image:
+      "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Kunst og kultur i middelalderen",
+    description: "En dybdegående analyse af kunst og kultur i middelalderen.",
+    date: "10 Mar 2023",
+    time: "15:00 - 17:00",
+    location: "Kulturhuset",
+    price: 50,
+    href: "/",
+  },
+  {
+    image:
+      "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Moderne litteratur workshop",
+    description: "Workshop om moderne litteratur og dens indflydelse.",
+    date: "18 Apr 2023",
+    time: "18:00 - 20:00",
+    location: "Litteraturhuset",
+    price: 70,
+    href: "/",
+  },
+  {
+    image:
+      "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Historien om jazz",
+    description: "Oplev jazzens rejse gennem tiderne.",
+    date: "05 May 2023",
+    time: "20:00 - 22:00",
+    location: "Jazzklubben",
+    price: 90,
+    href: "/",
+  },
+  {
+    image:
+      "https://plus.unsplash.com/premium_photo-1696886122527-e4303b76aa8f?q=80&w=5156&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D",
+    title: "Filosofi i det 21. århundrede",
+    description: "En samtale om moderne filosofiske strømninger.",
+    date: "23 Jun 2023",
+    time: "14:00 - 16:00",
+    location: "Filosofisk Forum",
+    price: 60,
+    href: "/",
+  },
+];
+
+export default eventListData;

src/stories/Blocks/event-list/event-list.scss

@@ -0,0 +1,5 @@
+.event-list {
+  max-width: $layout__max-width;
+  margin: 0 auto;
+  padding: 0 $s-md;
+}