Kenzo/Gallus_Pub
2
1
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Event Cards Update und alle links sind Orange, einheitlich auf der ganzen Seite

Browse Source
This commit is contained in:
Selina Erci
2025-07-23 14:56:34 +02:00
parent f356b37c9e
commit f0afa677a0
9 changed files with 171 additions and 132 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/EventsGrid.astro
View File

@ -3,26 +3,28 @@
import HoverCard from "./HoverCard.astro";
interface Event {
image: string;
title: string;
date: Date;
description: string;
image: string;
title: string;
date: string;
description: string;
}
const { events = [], id }: { events?: Event[], id?: string } = Astro.props as { events?: Event[], id?: string };
import '../../styles/components/EventsGrid.css';
const { events = [], id }: { events?: Event[]; id?: string } = Astro.props as {
events?: Event[];
id?: string;
};
import "../../styles/components/EventsGrid.css";
---
<h2 class="section-title">Events</h2>
<section id={id} class="events-gird container">
{events.map((event: Event) => (
<HoverCard
title={event.title}
date={event.date}
description={event.description}
image={event.image}
/>
))}
{
events.map((event: Event) => (
<HoverCard
title={event.title}
date={event.date}
description={event.description}
image={event.image}
/>
))
}
</section>

11
src/components/HoverCard.astro
View File

@ -1,7 +1,7 @@
---
// src/components/HoverCard.astro
import "../../styles/components/HoverCard.css"
const { title, description, image = "", date} = Astro.props;
import "../../styles/components/HoverCard.css";
const { title, description, image = "", date } = Astro.props;
---
<article class="hover-card">
@ -9,13 +9,10 @@ const { title, description, image = "", date} = Astro.props;
<img class="card-image" src={image} alt={title} />
</div>
<h3 class="card-title">{title}</h3>
<h3 class="card-title" set:html={title} />
<h4 class="card_date">{date}</h4>
<div class="hover-text">
<div>
<p>{description}</p>
</div>
<p set:html={description} />
</div>
</article>