Typescript conversion.

src/components/common/HamburgerButton.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react';
 import MobileMenu from './MobileMenu';
 import Icons from 'components/icons';
 
-export function HamburgerButton({ menuItems }) {
+export function HamburgerButton({ menuItems }: { menuItems: any[] }) {
   const [active, setActive] = useState(false);
 
   const handleClick = () => setActive(state => !state);

src/components/common/HoverTooltip.tsx

@@ -1,8 +1,8 @@
-import { useEffect, useState } from 'react';
+import { ReactNode, useEffect, useState } from 'react';
 import { Tooltip } from 'react-basics';
 import styles from './HoverTooltip.module.css';
 
-export function HoverTooltip({ children }) {
+export function HoverTooltip({ children }: { children: ReactNode }) {
   const [position, setPosition] = useState({ x: -1000, y: -1000 });
 
   useEffect(() => {

src/components/common/LinkButton.tsx

@@ -6,7 +6,7 @@ import { ReactNode } from 'react';
 
 export interface LinkButtonProps {
   href: string;
-  className: string;
+  className?: string;
   variant?: string;
   scroll?: boolean;
   children?: ReactNode;

src/components/common/MobileMenu.tsx

@@ -4,12 +4,19 @@ import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import styles from './MobileMenu.module.css';
 
-export function MobileMenu({ items = [], onClose }) {
+export function MobileMenu({
+  items = [],
+  onClose,
+}: {
+  items: any[];
+  className?: string;
+  onClose: () => void;
+}) {
   const pathname = usePathname();
 
-  const Items = ({ items, className }) => (
+  const Items = ({ items, className }: { items: any[]; className?: string }) => (
     <div className={classNames(styles.items, className)}>
-      {items.map(({ label, url, children }) => {
+      {items.map(({ label, url, children }: { label: string; url: string; children: any[] }) => {
         const selected = pathname.startsWith(url);
 
         return (

src/components/common/Pager.tsx

@@ -3,7 +3,15 @@ import { Button, Icon, Icons } from 'react-basics';
 import useMessages from 'components/hooks/useMessages';
 import styles from './Pager.module.css';
 
-export function Pager({ page, pageSize, count, onPageChange, className }) {
+export interface PagerProps {
+  page: number;
+  pageSize: number;
+  count: number;
+  onPageChange: (nextPage: number) => void;
+  className?: string;
+}
+
+export function Pager({ page, pageSize, count, onPageChange, className }: PagerProps) {
   const { formatMessage, labels } = useMessages();
   const maxPage = pageSize && count ? Math.ceil(count / pageSize) : 0;
   const lastPage = page === maxPage;
@@ -13,7 +21,7 @@ export function Pager({ page, pageSize, count, onPageChange, className }) {
     return null;
   }
 
-  const handlePageChange = value => {
+  const handlePageChange = (value: number) => {
     const nextPage = page + value;
     if (nextPage > 0 && nextPage <= maxPage) {
       onPageChange(nextPage);