change event card to display free/paid events where imagecard is used

biome.jsonc

@@ -33,7 +33,8 @@
   },
   "formatter": {
     "indentStyle": "space",
-    "lineWidth": 120
+    "lineWidth": 120,
+    "lineEnding": "lf"
   },
   "javascript": {
     "formatter": {

frontend/src/Components/ImageCard/ImageCard.module.scss

@@ -78,7 +78,7 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
 }
 
 .date_label {
-  font-weight: 400;
+  font-weight: 700;
   color: $grey-4;
 }
 
@@ -127,6 +127,10 @@ $card-box-shadow-hover: 0 3px 8px 0 rgba(0, 0, 0, 0.4);
   visibility: hidden;
 }
 
+.ticket_type{
+  font-size: 0.7rem;
+}
+
 // Styling to container and children when it is hovered.
 .container:hover {
   .edit_button {

frontend/src/Components/ImageCard/ImageCard.tsx

@@ -1,6 +1,8 @@
 import classNames from 'classnames';
+import { t } from 'i18next';
 import type { ReactNode } from 'react';
 import { Skeleton } from '~/Components';
+import { KEY } from '~/i18n/constants';
 import type { Children } from '~/types';
 import { backgroundImageFromUrl } from '~/utils';
 import { Link } from '../Link';
@@ -19,6 +21,7 @@ type ImageCardProps = {
   compact?: boolean;
   isSkeleton?: boolean;
   children?: Children;
+  ticket_type?: string;
 };
 
 export function ImageCard({
@@ -32,6 +35,7 @@ export function ImageCard({
   compact,
   isSkeleton,
   children,
+  ticket_type,
 }: ImageCardProps) {
   const containerStyle = classNames(styles.container, compact && styles.compact, className);
   const cardStyle = classNames(styles.card);
@@ -45,6 +49,17 @@ export function ImageCard({
     );
   }
 
+  let displayTicketType = '';
+  if (ticket_type === 'billig' || ticket_type === 'custom') {
+    displayTicketType = t(KEY.common_ticket_type_billig);
+  }
+  if (ticket_type === 'free' || ticket_type === 'registration') {
+    displayTicketType = t(KEY.common_ticket_type_free);
+  }
+  if (ticket_type === 'included') {
+    displayTicketType = t(KEY.common_ticket_type_included);
+  }
+
   return (
     <div className={containerStyle}>
       <Link url={url} className={classNames(cardStyle, styles.image)} style={backgroundImageFromUrl(imageUrl)}>
@@ -59,6 +74,7 @@ export function ImageCard({
               <div className={styles.date_label}>
                 {date && <TimeDisplay timestamp={date} displayType="event-datetime" />}
               </div>
+              <div className={styles.ticket_type}>{displayTicketType}</div>
             </div>
 
             <div className={bottomDescriptionStyle}>{description}</div>

frontend/src/Pages/EventsPage/components/EventsList/EventsList.tsx

@@ -77,6 +77,7 @@ export function EventsList({ events }: EventsListProps) {
             description={dbT(event, 'description_short') ?? ''}
             compact={true}
             url={reverse({ pattern: ROUTES.frontend.event, urlParams: { id: event.id } })}
+            ticket_type={event.ticket_type}
           />
         </div>
       );

frontend/src/Pages/HomePage/components/EventCarousel/EventCarousel.tsx

@@ -55,6 +55,7 @@ export function EventCarousel({ element, skeletonCount = 0 }: EventCarouselProps
             imageUrl={BACKEND_DOMAIN + event.image_url}
             description={event_short_dsc}
             url={url}
+            ticket_type={event.ticket_type}
           >
             <div className={styles.button_bar}>
               {canChangeEvent && (