make separate component for section footer to show links below section content on mobile

This commit is contained in:
elise
2024-08-11 11:14:54 +02:00
parent bb2c12f9f6
commit d8ae1ff905
9 changed files with 68 additions and 4 deletions

View File

@ -2,16 +2,18 @@ import { EventFragment } from "@/gql/graphql";
import { EventItem } from "./EventItem";
import styles from "./featuredEvents.module.scss";
import { SectionHeader } from "../general/SectionHeader";
import { SectionFooter } from "../general/SectionFooter";
export const FeaturedEvents = ({ events }: { events: EventFragment[] }) => {
return (
<section>
<section className={styles.featuredEvents}>
<SectionHeader heading="Arrangementer" link="/arrangementer" linkText="Se alle arrangementer" />
<ul className={styles.eventList}>
{events.slice(0, 3).map((event) => (
<EventItem key={event.id} event={event} mode="list" />
))}
</ul>
<SectionFooter link="/arrangementer" linkText="Se alle arrangementer" />
</section>
);
};