Typescript refactor.

src/components/layout/Grid.js

@@ -1,18 +0,0 @@
-import classNames from 'classnames';
-import { mapChildren } from 'react-basics';
-import styles from './Grid.module.css';
-
-export function Grid({ className, ...otherProps }) {
-  return <div {...otherProps} className={classNames(styles.grid, className)} />;
-}
-
-export function GridRow(props) {
-  const { columns = 'two', className, children, ...otherProps } = props;
-  return (
-    <div {...otherProps} className={classNames(styles.row, className)}>
-      {mapChildren(children, child => {
-        return <div className={classNames(styles.col, { [styles[columns]]: true })}>{child}</div>;
-      })}
-    </div>
-  );
-}

src/components/layout/Grid.tsx

@@ -0,0 +1,34 @@
+import { CSSProperties } from 'react';
+import classNames from 'classnames';
+import { mapChildren } from 'react-basics';
+import styles from './Grid.module.css';
+
+export interface GridProps {
+  className?: string;
+  style?: CSSProperties;
+  children?: any;
+}
+
+export function Grid({ className, style, children }: GridProps) {
+  return (
+    <div className={classNames(styles.grid, className)} style={style}>
+      {children}
+    </div>
+  );
+}
+
+export function GridRow(props: {
+  [x: string]: any;
+  columns?: 'one' | 'two' | 'three' | 'one-two' | 'two-one';
+  className?: string;
+  children?: any;
+}) {
+  const { columns = 'two', className, children, ...otherProps } = props;
+  return (
+    <div {...otherProps} className={classNames(styles.row, className)}>
+      {mapChildren(children, child => {
+        return <div className={classNames(styles.col, { [styles[columns]]: true })}>{child}</div>;
+      })}
+    </div>
+  );
+}

src/components/layout/NavGroup.tsx

@@ -6,13 +6,21 @@ import Link from 'next/link';
 import Icons from 'components/icons';
 import styles from './NavGroup.module.css';
 
+export interface NavGroupProps {
+  title: string;
+  items: any[];
+  defaultExpanded?: boolean;
+  allowExpand?: boolean;
+  minimized?: boolean;
+}
+
 export function NavGroup({
   title,
   items,
   defaultExpanded = true,
   allowExpand = true,
   minimized = false,
-}) {
+}: NavGroupProps) {
   const pathname = usePathname();
   const [expanded, setExpanded] = useState(defaultExpanded);
 

src/components/layout/SideNav.tsx

@@ -4,6 +4,15 @@ import { usePathname } from 'next/navigation';
 import Link from 'next/link';
 import styles from './SideNav.module.css';
 
+export interface SideNavProps {
+  selectedKey: string;
+  items: any[];
+  shallow?: boolean;
+  scroll?: boolean;
+  className?: boolean;
+  onSelect?: () => void;
+}
+
 export function SideNav({
   selectedKey,
   items,
@@ -11,7 +20,7 @@ export function SideNav({
   scroll = false,
   className,
   onSelect = () => {},
-}) {
+}: SideNavProps) {
   const pathname = usePathname();
   return (
     <Menu