Port to TypeScript

src/components/languageSwitcher.module.scss.d.ts

@@ -0,0 +1,3 @@
+export const languageModal: string;
+export const languageModalInner: string;
+export const modalCloseLink: string;

src/components/languageSwitcher.tsx

@@ -3,7 +3,7 @@ import { Link, Trans, useI18next } from "gatsby-plugin-react-i18next";
 
 import * as styles from "./languageSwitcher.module.scss";
 
-export default function LanguageSwitcher() {
+const LanguageSwitcher = () => {
     const { languages, originalPath } = useI18next();
 
     return (
@@ -33,3 +33,5 @@ export default function LanguageSwitcher() {
         </div>
     );
 }
+
+export default LanguageSwitcher

src/components/navigation.module.scss.d.ts

@@ -0,0 +1,11 @@
+export const active: string;
+export const close: string;
+export const flexSpacer: string;
+export const hamburger: string;
+export const homeBar: string;
+export const homeBarTransparent: string;
+export const inner: string;
+export const logo: string;
+export const offscreenNav: string;
+export const topBar: string;
+export const topBarInner: string;

src/components/navigation.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-undef */
 import React, { useEffect, useState } from "react";
-import PropTypes from "prop-types";
 import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
 import { graphql, StaticQuery } from "gatsby";
 
@@ -9,7 +8,11 @@ import { Fade as Hamburger } from "hamburger-react";
 import OffScreenNav from "./offscreenNav";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-const Navigation = ({ isHome }) => {
+type NavigationProps = {
+    isHome?: boolean
+}
+
+const Navigation = ({ isHome }: NavigationProps) => {
     let [atTop, setAtTop] = useState(false);
     const [offscreenNavActive, setOffscreenNavActive] = useState(false);
     const { t } = useTranslation();
@@ -117,8 +120,4 @@ const Navigation = ({ isHome }) => {
     );
 };
 
-Navigation.propTypes = {
-    isHome: PropTypes.bool.isRequired,
-};
-
 export default Navigation;

src/components/offscreenNav.tsx

@@ -1,6 +1,5 @@
 /* eslint-disable no-undef */
 import React from "react";
-import PropTypes from "prop-types";
 import { Trans, Link, useTranslation } from "gatsby-plugin-react-i18next";
 import { createPortal } from "react-dom";
 
@@ -8,7 +7,12 @@ import * as styles from "./navigation.module.scss";
 import { X } from "lucide-react";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-const OffScreenNav = ({ active, close }) => {
+type OffScreenNavProps = {
+    active: boolean,
+    close: () => void
+}
+
+const OffScreenNav = ({ active, close }: OffScreenNavProps) => {
     const { t } = useTranslation();
     const { modules } = useSiteMetadata();
 
@@ -56,9 +60,4 @@ const OffScreenNav = ({ active, close }) => {
     );
 };
 
-OffScreenNav.propTypes = {
-    close: PropTypes.func.isRequired,
-    active: PropTypes.bool.isRequired,
-};
-
 export default OffScreenNav;

src/components/seo.tsx

@@ -1,12 +1,19 @@
 import React from "react";
-import PropTypes from "prop-types";
 import { Helmet } from "gatsby-plugin-react-i18next";
 import { useStaticQuery, graphql } from "gatsby";
 import { useLocation } from "@reach/router";
 import { useTranslation } from "gatsby-plugin-react-i18next";
 import useSiteMetadata from "../helpers/useSiteMetadata";
 
-function SEO({ description, meta, title, speakable, image, children }) {
+type SEOProps = {
+    description?: string,
+    meta?: any[],
+    title: string,
+    speakable?: any,
+    image?: string
+}
+
+function SEO({ description, meta, title, speakable, image, children }: React.PropsWithChildren<SEOProps>) {
     const { t } = useTranslation();
     const { site } = useStaticQuery(
         graphql`
@@ -140,13 +147,4 @@ SEO.defaultProps = {
     description: ``,
 };
 
-SEO.propTypes = {
-    description: PropTypes.string,
-    meta: PropTypes.arrayOf(PropTypes.object),
-    title: PropTypes.string.isRequired,
-    speakable: PropTypes.any,
-    image: PropTypes.string,
-    children: PropTypes.any,
-};
-
 export default SEO;