Fix type errors

Author: John Goodliff

src/components/alert.tsx

@@ -69,7 +69,7 @@ export function Alert(props: { statusMsg: StatusMsg }) {
 					{...animationProps}
 				>
 					<div>
-						<Icon icon={alertTypes[type].icon} tw="mr-2 fa-lg" />
+						<Icon icon={alertTypes[type].icon} className="mr-2 fa-lg" />
 						<span>{props.statusMsg.getMsg}</span>
 					</div>
 				</motion.div>

src/components/buttons/icon.tsx

@@ -14,7 +14,7 @@ export function IconButton(props: {
 			type="button"
 			onClick={props.onClick}
 		>
-			<Icon icon={props.icon} tw="fa-lg" />
+			<Icon icon={props.icon} className="fa-lg" />
 		</button>
 	);
 }

src/components/buttons/primary.tsx

@@ -3,7 +3,7 @@ import { Icon } from '../icon.tsx';
 
 type Props = {
 	icon: IconDefinition;
-	fake: boolean;
+	fake?: boolean;
 	onClick?: () => void;
 	children: string;
 };

src/components/dropzones/large.tsx

@@ -16,7 +16,7 @@ export function LargeDropzone(props: {
 			onFilesAdded={props.onFilesAdded}
 		>
 			<div className="z-20 flex-col flex-1 gap-8 justify-center p-8 m-8 text-center rounded-lg border-2 border-dashed bg-base-100 hover:bg-base-200">
-				<Icon icon={faFileCirclePlus} tw="fa-3x" />
+				<Icon icon={faFileCirclePlus} className="fa-3x" />
 				<p className="flex-grow-0">
 					Drag and drop PDF files here, or click to select files
 				</p>

src/components/dropzones/wrapper.tsx

@@ -2,7 +2,7 @@ import type { ChangeEvent, ReactNode } from 'react';
 import { ignoreDefault } from '../../common/utilities';
 
 type Props = {
-	className: string;
+	className?: string;
 	children: ReactNode;
 	onFilesAdded: (files: FileList) => void;
 };

src/components/icon.tsx

@@ -1,9 +1,14 @@
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import type { IconDefinition } from '@fortawesome/free-solid-svg-icons';
 
+type Props = {
+	className?: string;
+	icon: IconDefinition;
+};
+
 /**
  * A basic icon component
  */
-export function Icon(props: { tw?: string; icon: IconDefinition }) {
-	return <FontAwesomeIcon icon={props.icon} className={props.tw} />;
+export function Icon({ className = '', icon }: Props) {
+	return <FontAwesomeIcon icon={icon} className={className} />;
 }

src/components/layout/header.tsx

@@ -8,7 +8,7 @@ import {
 } from '../../common/utilities.ts';
 
 type Props = {
-	className: string;
+	className?: string;
 	title: string;
 	children: ReactNode;
 };

src/components/layout/page-layout.tsx

@@ -11,7 +11,7 @@ import {
 } from '../../common/utilities.ts';
 
 type Props = {
-	className: string;
+	className?: string;
 	metadata: MetadataInterface;
 	children: ReactNode;
 };

src/components/layout/section.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 
 type Props = {
-	className: string;
+	className?: string;
 	visible: boolean;
 	children: ReactNode;
 };

src/components/links/icon-button.tsx

@@ -3,21 +3,23 @@ import type { ReactNode } from 'react';
 import { Icon } from '../icon.tsx';
 import { LinkWrapper } from './wrapper.tsx';
 
-/**
- * An icon button link
- */
-export function IconButtonLink(props: {
+type Props = {
 	to: string;
 	icon: IconDefinition;
 	isInternal?: boolean;
 	rel?: string;
 	children: ReactNode;
-}) {
+};
+
+/**
+ * An icon button link
+ */
+export function IconButtonLink({ to, icon, isInternal, rel, children }: Props) {
 	return (
-		<LinkWrapper to={props.to} isInternal={props.isInternal} rel={props.rel}>
+		<LinkWrapper to={to} isInternal={isInternal} rel={rel}>
 			<div className="flex-nowrap flex-none gap-2 p-0 btn-ghost text-secondary sm:p-4">
-				<Icon icon={props.icon} />
-				{props.children}
+				<Icon icon={icon} />
+				{children}
 			</div>
 		</LinkWrapper>
 	);