diff --git a/base.scss b/base.scss index dfdbda983..0888596fa 100644 --- a/base.scss +++ b/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"; diff --git a/src/stories/Blocks/event-list/EventList.stories.tsx b/src/stories/Blocks/event-list/EventList.stories.tsx new file mode 100644 index 000000000..01a9dc75c --- /dev/null +++ b/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; + +const Template: ComponentStory = () => ; + +export const Default = Template.bind({}); diff --git a/src/stories/Blocks/event-list/EventList.tsx b/src/stories/Blocks/event-list/EventList.tsx new file mode 100644 index 000000000..e047c8dd7 --- /dev/null +++ b/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 ( +
    + {eventListData.map((event, index) => ( + + ))} +
+ ); +}; + +export default EventList; diff --git a/src/stories/Blocks/event-list/EventListData.ts b/src/stories/Blocks/event-list/EventListData.ts new file mode 100644 index 000000000..67683bfdc --- /dev/null +++ b/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; diff --git a/src/stories/Blocks/event-list/event-list.scss b/src/stories/Blocks/event-list/event-list.scss new file mode 100644 index 000000000..484b7048b --- /dev/null +++ b/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; +}