= ({
+const Accordion: React.FC = ({
className,
open,
children,
@@ -19,7 +19,7 @@ const Accordion: React.FC = ({
image,
light,
...rest
-}: Props) => {
+}) => {
return (
= ({ className, children, target }: Props) => {
+const BackButton: React.FC = ({ className, children, target }) => {
return (
diff --git a/src/components/ButtonLink.tsx b/src/components/ButtonLink.tsx
index 8d6c4849..342ae651 100644
--- a/src/components/ButtonLink.tsx
+++ b/src/components/ButtonLink.tsx
@@ -2,7 +2,7 @@ import React from "react";
import ArrowIcon from "@assets/arrow.svg?react";
import GitHubIcon from "@assets/GitHub.svg?react";
-interface Props {
+interface ButtonLinkProps {
className?: string;
target?: string;
caption?: string;
@@ -10,18 +10,19 @@ interface Props {
newTab?: boolean;
}
-const ButtonLink: React.FC = ({
+const ButtonLink: React.FC = ({
className,
target,
caption,
variant = "light",
newTab = false,
-}: Props) => {
+}) => {
const classes = {
light:
"bg-white z-10 text-tolo-green flex gap-2 justify-center items-center px-3 py-2 rounded-full font-semibold text-lg lg:mt-4 h-10 w-44",
dark: "bg-neutral-700 z-10 text-white flex gap-2.5 justify-center items-center px-6 rounded-full font-semibold lg:text-lg lg:leading-6 text-base leading-[22px] h-10 w-fit",
- green: "bg-tolo-green z-10 text-white flex gap-2.5 justify-center items-center px-6 rounded-full font-semibold lg:text-lg lg:leading-6 text-base leading-[22px] h-10 w-fit",
+ green:
+ "bg-tolo-green z-10 text-white flex gap-2.5 justify-center items-center px-6 rounded-full font-semibold lg:text-lg lg:leading-6 text-base leading-[22px] h-10 w-fit",
search:
"bg-black z-10 inline-flex items-center bg-opacity-20 opacity-90 rounded-full py-4 px-5 mt-8",
github:
diff --git a/src/components/CarCard.tsx b/src/components/CarCard.tsx
index 58510357..6df308ff 100644
--- a/src/components/CarCard.tsx
+++ b/src/components/CarCard.tsx
@@ -6,7 +6,17 @@ import HammerIcon from "@assets/icons/hammer.svg?react";
import ToolboxIcon from "@assets/icons/toolbox.svg?react";
import ScrewdriverIcon from "@assets/icons/screwdriver.svg?react";
-interface Props {
+
+const iconMapping = {
+ truck: TruckIcon,
+ cog: CogIcon,
+ hammer: HammerIcon,
+ toolbox: ToolboxIcon,
+ screwdriver: ScrewdriverIcon,
+ default: <>,
+};
+
+interface CarCardProps {
className?: string;
title: string;
subtitle: string;
@@ -14,10 +24,10 @@ interface Props {
date: string;
operator: string;
img: string;
- tagIcon?: "truck" | "hammer" | "cog" | "toolbox" | "screwdriver";
+ tagIcon?: keyof typeof iconMapping;
}
-const CarCard: React.FC = ({
+const CarCard: React.FC = ({
className,
img,
title,
@@ -25,19 +35,11 @@ const CarCard: React.FC = ({
tag,
date,
tagIcon,
-}: Props) => {
- const renderIcon = (icon) => {
- const iconMapping = {
- truck: TruckIcon,
- cog: CogIcon,
- hammer: HammerIcon,
- toolbox: ToolboxIcon,
- screwdriver: ScrewdriverIcon,
- default: null,
- };
-
- const IconComponent = iconMapping[icon || "default"];
-
+}) => {
+
+ const renderIcon = (icon: keyof typeof iconMapping) => {
+ const IconComponent = iconMapping[icon];
+ //@ts-expect-error
return = ({
+const Card: React.FC = ({
title,
className,
children,
@@ -19,7 +19,7 @@ const Card: React.FC = ({
target,
small,
actionCaption
-}: Props) => {
+}) => {
const bgMapping = [
"bg-illustration-1 bg-contain bg-[position:bottom_-40px_right] lg:bg-[position:left_-100px_bottom_-40px] bg-no-repeat",
"bg-illustration-2 bg-contain bg-[position:bottom_-70px_right] lg:bg-bottom bg-no-repeat",
diff --git a/src/components/CardContainer.tsx b/src/components/CardContainer.tsx
index 88b89e8e..2f720c77 100644
--- a/src/components/CardContainer.tsx
+++ b/src/components/CardContainer.tsx
@@ -1,11 +1,11 @@
import React from "react";
-interface Props {
+interface CardContainerProps {
className?: string;
children: React.ReactNode;
}
-const CardContainer: React.FC = ({ className, children }) => {
+const CardContainer: React.FC = ({ className, children }) => {
return (
= ({ className, text, title, bg }) => {
+const CommunityBanner: React.FC = ({ className, text, title, bg }) => {
const bgMapping = [
"lg:bg-community-banner-1-lg bg-community-banner-1-sm",
"lg:bg-community-banner-2-lg bg-community-banner-2-sm",
diff --git a/src/components/CommunityCard.tsx b/src/components/CommunityCard.tsx
index 10f44819..dca927b3 100644
--- a/src/components/CommunityCard.tsx
+++ b/src/components/CommunityCard.tsx
@@ -1,7 +1,7 @@
import React from "react";
import ArrowIcon from "@assets/arrow.svg?react";
-interface Props {
+interface CommunityCardProps {
title: string;
className?: string;
target?: string;
@@ -11,7 +11,7 @@ interface Props {
img: string;
}
-const CommunityCard: React.FC = ({
+const CommunityCard: React.FC = ({
title,
children,
className,
@@ -19,7 +19,7 @@ const CommunityCard: React.FC = ({
small,
actionCaption,
img,
-}: Props) => {
+}) => {
const cardContent = (
<>
{title && (
diff --git a/src/components/CommunityGridCard.tsx b/src/components/CommunityGridCard.tsx
index 2e1122fd..c8e05faf 100644
--- a/src/components/CommunityGridCard.tsx
+++ b/src/components/CommunityGridCard.tsx
@@ -1,7 +1,7 @@
import React from "react";
import { ConditionalWrapper } from "@components";
-interface Props {
+interface CommunityGridCardProps {
className?: string;
title?: string;
text?: string;
@@ -9,13 +9,13 @@ interface Props {
img?: string;
}
-const CommunityGridCard: React.FC = ({
+const CommunityGridCard: React.FC = ({
className,
title,
text,
target,
img,
-}: Props) => {
+}) => {
return (
= ({
+const CommunityHeader: React.FC = ({
className,
title,
text,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/ConditionalWrapper.tsx b/src/components/ConditionalWrapper.tsx
index 4761304c..2657eef2 100644
--- a/src/components/ConditionalWrapper.tsx
+++ b/src/components/ConditionalWrapper.tsx
@@ -1,12 +1,12 @@
import type { ReactElement, ReactNode } from "react";
-interface Props {
+interface ConditionalWrapperProps {
condition: boolean;
children: ReactElement | ReactNode;
wrapper: (c: ReactElement | ReactNode) => ReactElement | ReactNode;
}
-const ConditionalWrapper: React.FC = ({
+const ConditionalWrapper: React.FC = ({
condition,
wrapper,
children,
diff --git a/src/components/ContentSection.tsx b/src/components/ContentSection.tsx
index 8980b986..eaf6d2a2 100644
--- a/src/components/ContentSection.tsx
+++ b/src/components/ContentSection.tsx
@@ -1,6 +1,6 @@
import React from "react";
-interface Props {
+interface ContentSectionProps {
className?: string;
children: React.ReactNode;
id?: string;
@@ -13,7 +13,7 @@ const bgColorMapping = {
default: "bg-neutral-50",
};
-const ContentSection: React.FC = ({
+const ContentSection: React.FC = ({
className,
children,
id,
@@ -22,7 +22,7 @@ const ContentSection: React.FC = ({
return (
diff --git a/src/components/Course.tsx b/src/components/Course.tsx
index 468bd352..aad0c9d4 100644
--- a/src/components/Course.tsx
+++ b/src/components/Course.tsx
@@ -9,12 +9,12 @@ export interface ICourse {
items: { target: string; title: string }[] | null;
}
-interface Props {
+interface CourseProps {
className?: string;
course: ICourse;
}
-const Course: React.FC = ({ className, course }) => {
+const Course: React.FC = ({ className, course }) => {
const slugger = new GithubSlugger();
return (
= ({ className, menu, locale }: Props) => {
+const Footer: React.FC = ({ className, menu, locale }) => {
return (
= ({ className, menu, locale }: Props) => {
};
interface FooterLinkListItemProps {
- target: string;
- children?: React.ReactNode;
+ target?: string;
+ children: React.ReactNode;
}
const FooterLinkListItem: React.FC = ({
diff --git a/src/components/HeaderLogo.tsx b/src/components/HeaderLogo.tsx
index e0c529c9..7498c4eb 100644
--- a/src/components/HeaderLogo.tsx
+++ b/src/components/HeaderLogo.tsx
@@ -1,12 +1,12 @@
import React from "react";
import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
-interface Props {
+interface HeaderLogoProps {
className?: string;
target?: string;
}
-const HeaderLogo: React.FC = ({ target = "/", className }: Props) => {
+const HeaderLogo: React.FC = ({ target = "/", className }) => {
const Image = = ({
+const HeadlineUnderlined: React.FC = ({
children,
className,
variant = 1,
large,
light,
id,
-}: Props) => {
+}) => {
return (
= ({ className }) => {
+const HeroImage: React.FC
@@ -64,7 +61,7 @@ const Footer: React.FC = ({ className, menu, locale }: Props) => {
@@ -110,8 +100,8 @@ const Footer: React.FC = ({ className }) => {
+const HeroImage: React.FC = ({ className }) => {
return (
= ({ className, children }) => {
+const IllustrationBgContainer: React.FC = ({ className, children }) => {
return (
{children}
diff --git a/src/components/ImageGrid.tsx b/src/components/ImageGrid.tsx
index 1e121aad..88fcf6c4 100644
--- a/src/components/ImageGrid.tsx
+++ b/src/components/ImageGrid.tsx
@@ -1,5 +1,5 @@
import React from "react";
-interface Props {
+interface ImageGridProps {
className?: string;
images?: Array;
caption?: string;
@@ -13,12 +13,12 @@ const defaultImages = [
"https://picsum.photos/id/1042/1920/1080",
];
-const ImageGrid: React.FC = ({
+const ImageGrid: React.FC = ({
images = defaultImages,
className,
caption,
subCaption,
-}: Props) => {
+}) => {
return (
<>
diff --git a/src/components/ImpactListItem.tsx b/src/components/ImpactListItem.tsx
index 35e23397..64aa1fb6 100644
--- a/src/components/ImpactListItem.tsx
+++ b/src/components/ImpactListItem.tsx
@@ -6,7 +6,7 @@ import ParachuteIcon from "@assets/icons/parachute.svg?react";
import BookOpenIcon from "@assets/icons/book-open.svg?react";
import ChartNetworkIcon from "@assets/icons/chart-network.svg?react";
-interface Props {
+interface ImpactListItemProps {
className?: string;
title: string;
text: string;
@@ -19,25 +19,25 @@ interface Props {
| "chart_network";
}
-const ImpactListItem: React.FC = ({
+const iconMapping = {
+ bullseye: BullseyeIcon,
+ microchip: MicrochipIcon,
+ hand_fist: HandFistIcon,
+ parachute: ParachuteIcon,
+ book_open: BookOpenIcon,
+ chart_network: ChartNetworkIcon,
+ default: null,
+};
+
+const ImpactListItem: React.FC = ({
className,
title,
text,
tagIcon,
-}: Props) => {
- const renderIcon = (icon) => {
- const iconMapping = {
- bullseye: BullseyeIcon,
- microchip: MicrochipIcon,
- hand_fist: HandFistIcon,
- parachute: ParachuteIcon,
- book_open: BookOpenIcon,
- chart_network: ChartNetworkIcon,
- default: null,
- };
-
+}) => {
+ const renderIcon = (icon: keyof typeof iconMapping) => {
const IconComponent = iconMapping[icon || "default"];
-
+ // @ts-expect-error
return = ({
+const InfoItem: React.FC = ({
className,
icon,
title,
description,
-}: Props) => {
+}) => {
const renderIcon = (icon: Icons) => {
const iconMapping: Record = {
bullseye_arrow: BullseyeArrowIcon,
diff --git a/src/components/InterventionImageCarousel.tsx b/src/components/InterventionImageCarousel.tsx
index cce3c986..2e9da861 100644
--- a/src/components/InterventionImageCarousel.tsx
+++ b/src/components/InterventionImageCarousel.tsx
@@ -3,16 +3,18 @@ import useEmblaCarousel from "embla-carousel-react";
import ArrowIcon from "@assets/arrow.svg?react";
import DotIcon from "@assets/dot-icon.svg?react";
-interface Props {
+interface InterventionImageCarouselProps {
images: Array;
className?: string;
dark?: boolean;
+ indicators?: boolean;
}
-const InterventionImageCarousel: React.FC = ({
+const InterventionImageCarousel: React.FC = ({
images,
className,
dark,
+ indicators = true,
}) => {
const [emblaRef, emblaApi] = useEmblaCarousel();
const [selectedIndex, setSelectedIndex] = useState(0);
@@ -51,33 +53,37 @@ const InterventionImageCarousel: React.FC = ({
}, [emblaApi, setScrollSnaps, onSelect]);
return (
-
+
{Boolean(images.length) && (
- {images.map((image, index) => (
-
- 
-
- ))}
+ {images.map((image, index) => {
+ return (
+
+
+
+ );
+ })}
-
- {scrollSnaps.map((_, index) => (
- scrollTo(index)}
- />
- ))}
-
+ {indicators && (
+
+ {scrollSnaps.map((_, index) => (
+ scrollTo(index)}
+ />
+ ))}
+
+ )}
diff --git a/src/components/InterventionPreviewCard.tsx b/src/components/InterventionPreviewCard.tsx
index 00b8e0c4..1ce5f1f6 100644
--- a/src/components/InterventionPreviewCard.tsx
+++ b/src/components/InterventionPreviewCard.tsx
@@ -4,13 +4,13 @@ import LocationIcon from "@assets/location-dot.svg?react";
import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
import { Tag } from "@components";
-interface Props extends IInterventionFrontmatter {
+interface InterventionPreviewCardProps extends Partial {
href: string;
className?: string;
image: string;
}
-const InterventionPreviewCard: React.FC = ({
+const InterventionPreviewCard: React.FC = ({
href,
image,
className,
@@ -40,9 +40,9 @@ const InterventionPreviewCard: React.FC = ({
{date}
)}
- {Boolean(tags.length) && (
+ {Boolean(tags?.length) && (
- {tags.map((tag, index) => (
+ {tags?.map((tag, index) => (
;
+ date?: string;
className?: string;
+ car?: string;
+ location?: string;
}
-const InterventionSingleViewHeading: React.FC = ({
+const InterventionSingleViewHeading: React.FC = ({
className,
title,
subtitle,
@@ -16,22 +21,22 @@ const InterventionSingleViewHeading: React.FC = ({
date,
car,
location,
-}: Props) => {
+}) => {
return (
- {Boolean(tags.length) && (
+ {Boolean(tags?.length) && (
- {tags.map((tag, index) => (
+ {tags?.map((tag, index) => (
+
{title}
)}
diff --git a/src/components/InterventionsHeader.tsx b/src/components/InterventionsHeader.tsx
index a529cb92..f15bd7fb 100644
--- a/src/components/InterventionsHeader.tsx
+++ b/src/components/InterventionsHeader.tsx
@@ -1,17 +1,17 @@
import React from "react";
import { HeadlineUnderlined } from "@components";
-interface Props {
+interface InterventionsHeaderProps {
className?: string;
title?: string;
text?: string;
}
-const InterventionsHeader: React.FC = ({
+const InterventionsHeader: React.FC = ({
className,
title,
text,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/InterventionsListItem.tsx b/src/components/InterventionsListItem.tsx
index 4886de6a..0b5f92db 100644
--- a/src/components/InterventionsListItem.tsx
+++ b/src/components/InterventionsListItem.tsx
@@ -5,13 +5,13 @@ import DotIcon from "@assets/dot-icon.svg?react";
import { Tag } from "@components";
import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
-interface Props extends IInterventionFrontmatter {
+interface InterventionsListItemProps extends IInterventionFrontmatter {
className?: string;
image?: string;
href?: string;
}
-const InterventionsListItem: React.FC = ({
+const InterventionsListItem: React.FC = ({
className,
image,
title,
@@ -20,7 +20,7 @@ const InterventionsListItem: React.FC = ({
location,
href,
teaser,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/InterventionsMap.tsx b/src/components/InterventionsMap.tsx
index f9c6f16a..e7ab3121 100644
--- a/src/components/InterventionsMap.tsx
+++ b/src/components/InterventionsMap.tsx
@@ -39,8 +39,8 @@ const InterventionsMap = ({
interventions.map((intervention, index) => (
1024
) {
window.location.href =
- interventions[selectedPoi as number].url;
+ interventions[selectedPoi as number].url!;
} else {
setIsMarkerClicked(true);
setSelectedPoi(index);
diff --git a/src/components/InterventionsMapSection.astro b/src/components/InterventionsMapSection.astro
index f4d3f2f0..548a85c5 100644
--- a/src/components/InterventionsMapSection.astro
+++ b/src/components/InterventionsMapSection.astro
@@ -50,10 +50,10 @@ const trimmedAndSorted = trimAndSortInterventions(
= ({
+const LanguageSwitcher: React.FC = ({
className,
baseUrl = "/",
path,
locale,
-}: Props) => {
+}) => {
// Changing the language requires only to change the locale in the URL
// The rest (slug) will be handled by redirect logic
const changeLanguage = (newLanguage: string) => {
@@ -74,10 +74,10 @@ const LanguageSwitcherItem: React.FC = ({
-
+
{children}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 801e29eb..55a2b535 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,11 +1,18 @@
import React, { useState, useEffect } from "react";
import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
-import ArrowIcon from "@assets/arrow.svg?react";
+import ChevronIcon from "@assets/chevron.svg?react";
import type { IMenuItem } from "@interfaces/IMenu";
import { LanguageSwitcher } from "@components";
import useCurrentWidth from "@util/useCurrentWidth";
+import ArrowTopRightOnSquare from "@assets/icons/arrow-top-right-on-square.svg?react";
+import {
+ Popover,
+ PopoverButton,
+ PopoverGroup,
+ PopoverPanel,
+} from "@headlessui/react";
-interface Props {
+interface NavigationProps {
className?: string;
baseUrl?: string;
path?: string;
@@ -14,14 +21,14 @@ interface Props {
dark?: boolean;
}
-const Navigation: React.FC = ({
+const Navigation: React.FC = ({
menu,
baseUrl = "/",
path,
locale,
className,
dark,
-}: Props) => {
+}) => {
const [showOverlayMenu, setShowOverlayMenu] = useState(false);
const [scrollTop, setScrollTop] = useState(0);
@@ -38,6 +45,7 @@ const Navigation: React.FC = ({
}, [width]);
useEffect(() => {
+ //@ts-expect-error
const changeBackgroundColor = (e) => {
setHasWhiteBackground(e.target.scrollTop > scrollThreshold);
};
@@ -50,6 +58,7 @@ const Navigation: React.FC = ({
}, [scrollTop]);
useEffect(() => {
+ //@ts-expect-error
const handleScroll = (e) => {
setScrollTop(e.target.scrollTop);
};
@@ -83,7 +92,7 @@ const Navigation: React.FC = ({
scrollTop < scrollThreshold ? "h-20 lg:h-32" : "h-20"
} fixed flex items-center justify-center top-0 z-30 ${className || ""}`}
>
-
+
{baseUrl ? (
{Image}
@@ -91,25 +100,75 @@ const Navigation: React.FC = ({
) : (
Image
)}
-
-
+
{showOverlayMenu && (
= ({
- = ({
};
interface MenuListItemProps {
- target: string;
+ target?: string;
className?: string;
- children: React.ReactNode;
- onClick?: () => void;
+ children?: React.ReactNode;
+ title: string;
+ newTab?: boolean;
}
const MenuListItem: React.FC = ({
target,
- onClick,
className,
+ title,
children,
-}: MenuListItemProps) => (
-
-
-
- {children}
-
-);
+ newTab,
+}: MenuListItemProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+
+ children && setIsOpen((oldState) => !oldState)}
+ className="md:hover:text-neutral-800 flex gap-2 items-center cursor-pointer"
+ {...(newTab ? { target: "_blank" } : {})}
+ >
+
+ {title}
+ {" "}
+ {children && (
+ {children}
}
+
+ );
+};
interface OverlayMenuProps {
show: boolean;
- toggleMenu: () => void;
menu?: IMenuItem[];
}
-const OverlayMenu: React.FC = ({
- menu,
- show,
- toggleMenu,
-}) => {
+const OverlayMenu: React.FC = ({ menu, show }) => {
return (
= ({
- {menu?.map((item) => (
+ {menu?.map((menuItem) => (
- {item.title}
+ {menuItem.children?.map((subMenuItem) => {
+ return (
+
))}
diff --git a/src/components/NewsItem.tsx b/src/components/NewsItem.tsx
index 4ac5348f..914e8032 100644
--- a/src/components/NewsItem.tsx
+++ b/src/components/NewsItem.tsx
@@ -5,7 +5,7 @@ import { ConditionalWrapper } from "@components";
type ItemType = "cta" | "instagram" | "fullImage";
-interface Props {
+interface NewsItemProps {
href: string;
image?: string;
title?: string;
@@ -14,7 +14,7 @@ interface Props {
newTab?: boolean;
}
-const NewsItem: React.FC = ({
+const NewsItem: React.FC = ({
href,
image,
title,
diff --git a/src/components/NewsSlider.tsx b/src/components/NewsSlider.tsx
index b09e421f..811d6a28 100644
--- a/src/components/NewsSlider.tsx
+++ b/src/components/NewsSlider.tsx
@@ -8,14 +8,14 @@ import InstagramIcon from "@assets/instagram.svg?react";
import FacebookIcon from "@assets/facebook.svg?react";
import type { INewsItem } from "@interfaces/INews";
-interface Props {
+interface NewsSliderProps {
news: Array;
headline: string;
id?: string;
findAllCaption?: string;
}
-const NewsSlider: React.FC = ({
+const NewsSlider: React.FC = ({
news,
headline,
findAllCaption,
diff --git a/src/components/NewsSliderDataWrapper.astro b/src/components/NewsSliderDataWrapper.astro
index 57309aa5..98d53b80 100644
--- a/src/components/NewsSliderDataWrapper.astro
+++ b/src/components/NewsSliderDataWrapper.astro
@@ -1,6 +1,5 @@
---
import { NewsSliderComponent } from "@components";
-import { getNewsItems } from "@util/Airtable";
import CommonUtils from "@util/CommonUtils";
import LanguageUtils from "@util/LanguageUtils";
import { getCollection } from "astro:content";
@@ -9,8 +8,7 @@ const { headline, id, findAllCaption, ...rest } = Astro.props;
const baseUrl = CommonUtils.getBaseUrl(false);
const localeFromUrl = LanguageUtils.getLocaleFromUrl(Astro.url, baseUrl);
-const news = await getNewsItems(30, baseUrl, localeFromUrl);
-const stickyNews = (
+const localNews = (
await getCollection("news", ({ id }) => {
return id.startsWith(localeFromUrl);
})
@@ -20,11 +18,11 @@ const stickyNews = (
id: item.id,
target: baseUrl + "/" + localeFromUrl + "/" + item.data.target,
}))
- .sort((a, b) => (a?.order || 0) - (b?.order || 0));
+ .sort((a, b) => (b?.order || 0) - (a?.order || 0));
---
= ({ children, className }: Props) => {
+const SideBySide: React.FC = ({ children, className }) => {
return (
;
baseUrl?: string;
@@ -15,7 +15,7 @@ const buildTocList = (input: Array) => {
.map((depth, i) => [depth, i + 1])
);
const output = [...input];
- for (let o of output) o.depth = map.get(o.depth);
+ for (let o of output) o.depth = map.get(o.depth) || 0;
return output;
};
@@ -28,14 +28,15 @@ const paddingMapping = {
6: "pl-20",
};
-const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
+const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
const headlinesWithoutDepthGaps = buildTocList(headlines);
return (
= ({ className, children }) => {
+const IllustrationBgContainer: React.FC = ({ className, children }) => {
return (
{children}
diff --git a/src/components/ImageGrid.tsx b/src/components/ImageGrid.tsx
index 1e121aad..88fcf6c4 100644
--- a/src/components/ImageGrid.tsx
+++ b/src/components/ImageGrid.tsx
@@ -1,5 +1,5 @@
import React from "react";
-interface Props {
+interface ImageGridProps {
className?: string;
images?: Array;
caption?: string;
@@ -13,12 +13,12 @@ const defaultImages = [
"https://picsum.photos/id/1042/1920/1080",
];
-const ImageGrid: React.FC = ({
+const ImageGrid: React.FC = ({
images = defaultImages,
className,
caption,
subCaption,
-}: Props) => {
+}) => {
return (
<>
diff --git a/src/components/ImpactListItem.tsx b/src/components/ImpactListItem.tsx
index 35e23397..64aa1fb6 100644
--- a/src/components/ImpactListItem.tsx
+++ b/src/components/ImpactListItem.tsx
@@ -6,7 +6,7 @@ import ParachuteIcon from "@assets/icons/parachute.svg?react";
import BookOpenIcon from "@assets/icons/book-open.svg?react";
import ChartNetworkIcon from "@assets/icons/chart-network.svg?react";
-interface Props {
+interface ImpactListItemProps {
className?: string;
title: string;
text: string;
@@ -19,25 +19,25 @@ interface Props {
| "chart_network";
}
-const ImpactListItem: React.FC = ({
+const iconMapping = {
+ bullseye: BullseyeIcon,
+ microchip: MicrochipIcon,
+ hand_fist: HandFistIcon,
+ parachute: ParachuteIcon,
+ book_open: BookOpenIcon,
+ chart_network: ChartNetworkIcon,
+ default: null,
+};
+
+const ImpactListItem: React.FC = ({
className,
title,
text,
tagIcon,
-}: Props) => {
- const renderIcon = (icon) => {
- const iconMapping = {
- bullseye: BullseyeIcon,
- microchip: MicrochipIcon,
- hand_fist: HandFistIcon,
- parachute: ParachuteIcon,
- book_open: BookOpenIcon,
- chart_network: ChartNetworkIcon,
- default: null,
- };
-
+}) => {
+ const renderIcon = (icon: keyof typeof iconMapping) => {
const IconComponent = iconMapping[icon || "default"];
-
+ // @ts-expect-error
return = ({
+const InfoItem: React.FC = ({
className,
icon,
title,
description,
-}: Props) => {
+}) => {
const renderIcon = (icon: Icons) => {
const iconMapping: Record = {
bullseye_arrow: BullseyeArrowIcon,
diff --git a/src/components/InterventionImageCarousel.tsx b/src/components/InterventionImageCarousel.tsx
index cce3c986..2e9da861 100644
--- a/src/components/InterventionImageCarousel.tsx
+++ b/src/components/InterventionImageCarousel.tsx
@@ -3,16 +3,18 @@ import useEmblaCarousel from "embla-carousel-react";
import ArrowIcon from "@assets/arrow.svg?react";
import DotIcon from "@assets/dot-icon.svg?react";
-interface Props {
+interface InterventionImageCarouselProps {
images: Array;
className?: string;
dark?: boolean;
+ indicators?: boolean;
}
-const InterventionImageCarousel: React.FC = ({
+const InterventionImageCarousel: React.FC = ({
images,
className,
dark,
+ indicators = true,
}) => {
const [emblaRef, emblaApi] = useEmblaCarousel();
const [selectedIndex, setSelectedIndex] = useState(0);
@@ -51,33 +53,37 @@ const InterventionImageCarousel: React.FC = ({
}, [emblaApi, setScrollSnaps, onSelect]);
return (
-
+
{Boolean(images.length) && (
- {images.map((image, index) => (
-
-
-
- ))}
+ {images.map((image, index) => {
+ return (
+
+
+
+ );
+ })}
- ;
+ date?: string;
className?: string;
+ car?: string;
+ location?: string;
}
-const InterventionSingleViewHeading: React.FC = ({
+const InterventionSingleViewHeading: React.FC = ({
className,
title,
subtitle,
@@ -16,22 +21,22 @@ const InterventionSingleViewHeading: React.FC = ({
date,
car,
location,
-}: Props) => {
+}) => {
return (
- {scrollSnaps.map((_, index) => (
- scrollTo(index)}
- />
- ))}
-
+ {indicators && (
+
+ {scrollSnaps.map((_, index) => (
+ scrollTo(index)}
+ />
+ ))}
+
+ )}
diff --git a/src/components/InterventionPreviewCard.tsx b/src/components/InterventionPreviewCard.tsx
index 00b8e0c4..1ce5f1f6 100644
--- a/src/components/InterventionPreviewCard.tsx
+++ b/src/components/InterventionPreviewCard.tsx
@@ -4,13 +4,13 @@ import LocationIcon from "@assets/location-dot.svg?react";
import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
import { Tag } from "@components";
-interface Props extends IInterventionFrontmatter {
+interface InterventionPreviewCardProps extends Partial {
href: string;
className?: string;
image: string;
}
-const InterventionPreviewCard: React.FC = ({
+const InterventionPreviewCard: React.FC = ({
href,
image,
className,
@@ -40,9 +40,9 @@ const InterventionPreviewCard: React.FC = ({
{date}
)}
- {Boolean(tags.length) && (
+ {Boolean(tags?.length) && (
- {tags.map((tag, index) => (
+ {tags?.map((tag, index) => (
diff --git a/src/components/InterventionSingleViewHeading.tsx b/src/components/InterventionSingleViewHeading.tsx
index 91ea37ef..dc9b9556 100644
--- a/src/components/InterventionSingleViewHeading.tsx
+++ b/src/components/InterventionSingleViewHeading.tsx
@@ -1,14 +1,19 @@
import React from "react";
import LocationIcon from "@assets/location-dot.svg?react";
import DotIcon from "@assets/dot-icon.svg?react";
-import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
import { Tag } from "@components";
-interface Props extends IInterventionFrontmatter {
+interface InterventionSingleViewHeadingProps {
+ title?: string;
+ subtitle?: string;
+ tags?: Array
- {Boolean(tags.length) && (
+ {Boolean(tags?.length) && (
+
- {tags.map((tag, index) => (
+ {tags?.map((tag, index) => (
)}
{title && (
-
+
{title}
)}
diff --git a/src/components/InterventionsHeader.tsx b/src/components/InterventionsHeader.tsx
index a529cb92..f15bd7fb 100644
--- a/src/components/InterventionsHeader.tsx
+++ b/src/components/InterventionsHeader.tsx
@@ -1,17 +1,17 @@
import React from "react";
import { HeadlineUnderlined } from "@components";
-interface Props {
+interface InterventionsHeaderProps {
className?: string;
title?: string;
text?: string;
}
-const InterventionsHeader: React.FC = ({
+const InterventionsHeader: React.FC = ({
className,
title,
text,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/InterventionsListItem.tsx b/src/components/InterventionsListItem.tsx
index 4886de6a..0b5f92db 100644
--- a/src/components/InterventionsListItem.tsx
+++ b/src/components/InterventionsListItem.tsx
@@ -5,13 +5,13 @@ import DotIcon from "@assets/dot-icon.svg?react";
import { Tag } from "@components";
import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
-interface Props extends IInterventionFrontmatter {
+interface InterventionsListItemProps extends IInterventionFrontmatter {
className?: string;
image?: string;
href?: string;
}
-const InterventionsListItem: React.FC = ({
+const InterventionsListItem: React.FC = ({
className,
image,
title,
@@ -20,7 +20,7 @@ const InterventionsListItem: React.FC = ({
location,
href,
teaser,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/InterventionsMap.tsx b/src/components/InterventionsMap.tsx
index f9c6f16a..e7ab3121 100644
--- a/src/components/InterventionsMap.tsx
+++ b/src/components/InterventionsMap.tsx
@@ -39,8 +39,8 @@ const InterventionsMap = ({
interventions.map((intervention, index) => (
1024
) {
window.location.href =
- interventions[selectedPoi as number].url;
+ interventions[selectedPoi as number].url!;
} else {
setIsMarkerClicked(true);
setSelectedPoi(index);
diff --git a/src/components/InterventionsMapSection.astro b/src/components/InterventionsMapSection.astro
index f4d3f2f0..548a85c5 100644
--- a/src/components/InterventionsMapSection.astro
+++ b/src/components/InterventionsMapSection.astro
@@ -50,10 +50,10 @@ const trimmedAndSorted = trimAndSortInterventions(
= ({
+const LanguageSwitcher: React.FC = ({
className,
baseUrl = "/",
path,
locale,
-}: Props) => {
+}) => {
// Changing the language requires only to change the locale in the URL
// The rest (slug) will be handled by redirect logic
const changeLanguage = (newLanguage: string) => {
@@ -74,10 +74,10 @@ const LanguageSwitcherItem: React.FC = ({
-
+
{children}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 801e29eb..55a2b535 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,11 +1,18 @@
import React, { useState, useEffect } from "react";
import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
-import ArrowIcon from "@assets/arrow.svg?react";
+import ChevronIcon from "@assets/chevron.svg?react";
import type { IMenuItem } from "@interfaces/IMenu";
import { LanguageSwitcher } from "@components";
import useCurrentWidth from "@util/useCurrentWidth";
+import ArrowTopRightOnSquare from "@assets/icons/arrow-top-right-on-square.svg?react";
+import {
+ Popover,
+ PopoverButton,
+ PopoverGroup,
+ PopoverPanel,
+} from "@headlessui/react";
-interface Props {
+interface NavigationProps {
className?: string;
baseUrl?: string;
path?: string;
@@ -14,14 +21,14 @@ interface Props {
dark?: boolean;
}
-const Navigation: React.FC = ({
+const Navigation: React.FC = ({
menu,
baseUrl = "/",
path,
locale,
className,
dark,
-}: Props) => {
+}) => {
const [showOverlayMenu, setShowOverlayMenu] = useState(false);
const [scrollTop, setScrollTop] = useState(0);
@@ -38,6 +45,7 @@ const Navigation: React.FC = ({
}, [width]);
useEffect(() => {
+ //@ts-expect-error
const changeBackgroundColor = (e) => {
setHasWhiteBackground(e.target.scrollTop > scrollThreshold);
};
@@ -50,6 +58,7 @@ const Navigation: React.FC = ({
}, [scrollTop]);
useEffect(() => {
+ //@ts-expect-error
const handleScroll = (e) => {
setScrollTop(e.target.scrollTop);
};
@@ -83,7 +92,7 @@ const Navigation: React.FC = ({
scrollTop < scrollThreshold ? "h-20 lg:h-32" : "h-20"
} fixed flex items-center justify-center top-0 z-30 ${className || ""}`}
>
-
+
{baseUrl ? (
{Image}
@@ -91,25 +100,75 @@ const Navigation: React.FC = ({
) : (
Image
)}
-
-
+
{showOverlayMenu && (
= ({
- = ({
};
interface MenuListItemProps {
- target: string;
+ target?: string;
className?: string;
- children: React.ReactNode;
- onClick?: () => void;
+ children?: React.ReactNode;
+ title: string;
+ newTab?: boolean;
}
const MenuListItem: React.FC = ({
target,
- onClick,
className,
+ title,
children,
-}: MenuListItemProps) => (
-
-
-
- {children}
-
-);
+ newTab,
+}: MenuListItemProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+
+ children && setIsOpen((oldState) => !oldState)}
+ className="md:hover:text-neutral-800 flex gap-2 items-center cursor-pointer"
+ {...(newTab ? { target: "_blank" } : {})}
+ >
+
+ {title}
+ {" "}
+ {children && (
+ {children}
}
+
+ );
+};
interface OverlayMenuProps {
show: boolean;
- toggleMenu: () => void;
menu?: IMenuItem[];
}
-const OverlayMenu: React.FC = ({
- menu,
- show,
- toggleMenu,
-}) => {
+const OverlayMenu: React.FC = ({ menu, show }) => {
return (
= ({
- {menu?.map((item) => (
+ {menu?.map((menuItem) => (
- {item.title}
+ {menuItem.children?.map((subMenuItem) => {
+ return (
+
))}
diff --git a/src/components/NewsItem.tsx b/src/components/NewsItem.tsx
index 4ac5348f..914e8032 100644
--- a/src/components/NewsItem.tsx
+++ b/src/components/NewsItem.tsx
@@ -5,7 +5,7 @@ import { ConditionalWrapper } from "@components";
type ItemType = "cta" | "instagram" | "fullImage";
-interface Props {
+interface NewsItemProps {
href: string;
image?: string;
title?: string;
@@ -14,7 +14,7 @@ interface Props {
newTab?: boolean;
}
-const NewsItem: React.FC = ({
+const NewsItem: React.FC = ({
href,
image,
title,
diff --git a/src/components/NewsSlider.tsx b/src/components/NewsSlider.tsx
index b09e421f..811d6a28 100644
--- a/src/components/NewsSlider.tsx
+++ b/src/components/NewsSlider.tsx
@@ -8,14 +8,14 @@ import InstagramIcon from "@assets/instagram.svg?react";
import FacebookIcon from "@assets/facebook.svg?react";
import type { INewsItem } from "@interfaces/INews";
-interface Props {
+interface NewsSliderProps {
news: Array;
headline: string;
id?: string;
findAllCaption?: string;
}
-const NewsSlider: React.FC = ({
+const NewsSlider: React.FC = ({
news,
headline,
findAllCaption,
diff --git a/src/components/NewsSliderDataWrapper.astro b/src/components/NewsSliderDataWrapper.astro
index 57309aa5..98d53b80 100644
--- a/src/components/NewsSliderDataWrapper.astro
+++ b/src/components/NewsSliderDataWrapper.astro
@@ -1,6 +1,5 @@
---
import { NewsSliderComponent } from "@components";
-import { getNewsItems } from "@util/Airtable";
import CommonUtils from "@util/CommonUtils";
import LanguageUtils from "@util/LanguageUtils";
import { getCollection } from "astro:content";
@@ -9,8 +8,7 @@ const { headline, id, findAllCaption, ...rest } = Astro.props;
const baseUrl = CommonUtils.getBaseUrl(false);
const localeFromUrl = LanguageUtils.getLocaleFromUrl(Astro.url, baseUrl);
-const news = await getNewsItems(30, baseUrl, localeFromUrl);
-const stickyNews = (
+const localNews = (
await getCollection("news", ({ id }) => {
return id.startsWith(localeFromUrl);
})
@@ -20,11 +18,11 @@ const stickyNews = (
id: item.id,
target: baseUrl + "/" + localeFromUrl + "/" + item.data.target,
}))
- .sort((a, b) => (a?.order || 0) - (b?.order || 0));
+ .sort((a, b) => (b?.order || 0) - (a?.order || 0));
---
= ({ children, className }: Props) => {
+const SideBySide: React.FC = ({ children, className }) => {
return (
;
baseUrl?: string;
@@ -15,7 +15,7 @@ const buildTocList = (input: Array) => {
.map((depth, i) => [depth, i + 1])
);
const output = [...input];
- for (let o of output) o.depth = map.get(o.depth);
+ for (let o of output) o.depth = map.get(o.depth) || 0;
return output;
};
@@ -28,14 +28,15 @@ const paddingMapping = {
6: "pl-20",
};
-const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
+const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
const headlinesWithoutDepthGaps = buildTocList(headlines);
return (
diff --git a/src/components/InterventionsListItem.tsx b/src/components/InterventionsListItem.tsx
index 4886de6a..0b5f92db 100644
--- a/src/components/InterventionsListItem.tsx
+++ b/src/components/InterventionsListItem.tsx
@@ -5,13 +5,13 @@ import DotIcon from "@assets/dot-icon.svg?react";
import { Tag } from "@components";
import type { IInterventionFrontmatter } from "@interfaces/IIntervention";
-interface Props extends IInterventionFrontmatter {
+interface InterventionsListItemProps extends IInterventionFrontmatter {
className?: string;
image?: string;
href?: string;
}
-const InterventionsListItem: React.FC = ({
+const InterventionsListItem: React.FC = ({
className,
image,
title,
@@ -20,7 +20,7 @@ const InterventionsListItem: React.FC = ({
location,
href,
teaser,
-}: Props) => {
+}) => {
return (
diff --git a/src/components/InterventionsMap.tsx b/src/components/InterventionsMap.tsx
index f9c6f16a..e7ab3121 100644
--- a/src/components/InterventionsMap.tsx
+++ b/src/components/InterventionsMap.tsx
@@ -39,8 +39,8 @@ const InterventionsMap = ({
interventions.map((intervention, index) => (
1024
) {
window.location.href =
- interventions[selectedPoi as number].url;
+ interventions[selectedPoi as number].url!;
} else {
setIsMarkerClicked(true);
setSelectedPoi(index);
diff --git a/src/components/InterventionsMapSection.astro b/src/components/InterventionsMapSection.astro
index f4d3f2f0..548a85c5 100644
--- a/src/components/InterventionsMapSection.astro
+++ b/src/components/InterventionsMapSection.astro
@@ -50,10 +50,10 @@ const trimmedAndSorted = trimAndSortInterventions(
= ({
+const LanguageSwitcher: React.FC = ({
className,
baseUrl = "/",
path,
locale,
-}: Props) => {
+}) => {
// Changing the language requires only to change the locale in the URL
// The rest (slug) will be handled by redirect logic
const changeLanguage = (newLanguage: string) => {
@@ -74,10 +74,10 @@ const LanguageSwitcherItem: React.FC = ({
-
+ = ({
+const Navigation: React.FC = ({
menu,
baseUrl = "/",
path,
locale,
className,
dark,
-}: Props) => {
+}) => {
const [showOverlayMenu, setShowOverlayMenu] = useState(false);
const [scrollTop, setScrollTop] = useState(0);
@@ -38,6 +45,7 @@ const Navigation: React.FC = ({
}, [width]);
useEffect(() => {
+ //@ts-expect-error
const changeBackgroundColor = (e) => {
setHasWhiteBackground(e.target.scrollTop > scrollThreshold);
};
@@ -50,6 +58,7 @@ const Navigation: React.FC = ({
}, [scrollTop]);
useEffect(() => {
+ //@ts-expect-error
const handleScroll = (e) => {
setScrollTop(e.target.scrollTop);
};
@@ -83,7 +92,7 @@ const Navigation: React.FC = ({
scrollTop < scrollThreshold ? "h-20 lg:h-32" : "h-20"
} fixed flex items-center justify-center top-0 z-30 ${className || ""}`}
>
-
{children}
diff --git a/src/components/Navigation.tsx b/src/components/Navigation.tsx
index 801e29eb..55a2b535 100644
--- a/src/components/Navigation.tsx
+++ b/src/components/Navigation.tsx
@@ -1,11 +1,18 @@
import React, { useState, useEffect } from "react";
import TolocarLogoSvg from "@assets/tolocar_logo.svg?react";
-import ArrowIcon from "@assets/arrow.svg?react";
+import ChevronIcon from "@assets/chevron.svg?react";
import type { IMenuItem } from "@interfaces/IMenu";
import { LanguageSwitcher } from "@components";
import useCurrentWidth from "@util/useCurrentWidth";
+import ArrowTopRightOnSquare from "@assets/icons/arrow-top-right-on-square.svg?react";
+import {
+ Popover,
+ PopoverButton,
+ PopoverGroup,
+ PopoverPanel,
+} from "@headlessui/react";
-interface Props {
+interface NavigationProps {
className?: string;
baseUrl?: string;
path?: string;
@@ -14,14 +21,14 @@ interface Props {
dark?: boolean;
}
-const Navigation: React.FC
+
{baseUrl ? (
{Image}
@@ -91,25 +100,75 @@ const Navigation: React.FC = ({
) : (
Image
)}
-
-
+
{showOverlayMenu && (
= ({
- {
@@ -194,41 +249,52 @@ const HamburgerButton: React.FC = ({
};
interface MenuListItemProps {
- target: string;
+ target?: string;
className?: string;
- children: React.ReactNode;
- onClick?: () => void;
+ children?: React.ReactNode;
+ title: string;
+ newTab?: boolean;
}
const MenuListItem: React.FC = ({
target,
- onClick,
className,
+ title,
children,
-}: MenuListItemProps) => (
-
-
-
-);
+ newTab,
+}: MenuListItemProps) => {
+ const [isOpen, setIsOpen] = useState(false);
+ return (
+
+ children && setIsOpen((oldState) => !oldState)}
+ className="md:hover:text-neutral-800 flex gap-2 items-center cursor-pointer"
+ {...(newTab ? { target: "_blank" } : {})}
+ >
+
+ );
+};
interface OverlayMenuProps {
show: boolean;
- toggleMenu: () => void;
menu?: IMenuItem[];
}
-const OverlayMenu: React.FC = ({
- menu,
- show,
- toggleMenu,
-}) => {
+const OverlayMenu: React.FC = ({ menu, show }) => {
return (
- {children}
-
-
-
+ {title}
+
{" "}
+ {children && (
+ - {children}
= ({
= ({
+const NewsItem: React.FC = ({
href,
image,
title,
diff --git a/src/components/NewsSlider.tsx b/src/components/NewsSlider.tsx
index b09e421f..811d6a28 100644
--- a/src/components/NewsSlider.tsx
+++ b/src/components/NewsSlider.tsx
@@ -8,14 +8,14 @@ import InstagramIcon from "@assets/instagram.svg?react";
import FacebookIcon from "@assets/facebook.svg?react";
import type { INewsItem } from "@interfaces/INews";
-interface Props {
+interface NewsSliderProps {
news: Array;
headline: string;
id?: string;
findAllCaption?: string;
}
-const NewsSlider: React.FC = ({
+const NewsSlider: React.FC = ({
news,
headline,
findAllCaption,
diff --git a/src/components/NewsSliderDataWrapper.astro b/src/components/NewsSliderDataWrapper.astro
index 57309aa5..98d53b80 100644
--- a/src/components/NewsSliderDataWrapper.astro
+++ b/src/components/NewsSliderDataWrapper.astro
@@ -1,6 +1,5 @@
---
import { NewsSliderComponent } from "@components";
-import { getNewsItems } from "@util/Airtable";
import CommonUtils from "@util/CommonUtils";
import LanguageUtils from "@util/LanguageUtils";
import { getCollection } from "astro:content";
@@ -9,8 +8,7 @@ const { headline, id, findAllCaption, ...rest } = Astro.props;
const baseUrl = CommonUtils.getBaseUrl(false);
const localeFromUrl = LanguageUtils.getLocaleFromUrl(Astro.url, baseUrl);
-const news = await getNewsItems(30, baseUrl, localeFromUrl);
-const stickyNews = (
+const localNews = (
await getCollection("news", ({ id }) => {
return id.startsWith(localeFromUrl);
})
@@ -20,11 +18,11 @@ const stickyNews = (
id: item.id,
target: baseUrl + "/" + localeFromUrl + "/" + item.data.target,
}))
- .sort((a, b) => (a?.order || 0) - (b?.order || 0));
+ .sort((a, b) => (b?.order || 0) - (a?.order || 0));
---
= ({ children, className }: Props) => {
+const SideBySide: React.FC = ({ children, className }) => {
return (
-
- {menu?.map((item) => (
+ {menu?.map((menuItem) => (
;
baseUrl?: string;
@@ -15,7 +15,7 @@ const buildTocList = (input: Array) => {
.map((depth, i) => [depth, i + 1])
);
const output = [...input];
- for (let o of output) o.depth = map.get(o.depth);
+ for (let o of output) o.depth = map.get(o.depth) || 0;
return output;
};
@@ -28,14 +28,15 @@ const paddingMapping = {
6: "pl-20",
};
-const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
+const TableOfContents: React.FC = ({ title, headlines, baseUrl }) => {
const headlinesWithoutDepthGaps = buildTocList(headlines);
return (