create a types folder

src/App.tsx

@@ -2,11 +2,12 @@ import { ThemeProvider } from "@emotion/react";
 import Box from "@mui/material/Box";
 import { ChangeEvent, useRef, useState } from "react";
 
+import { Theme } from "@mui/material";
 import Canvas from "./components/Canvas";
 import Controls from "./components/Controls";
 import Layout from "./components/Layout";
 import { theme } from "./theme";
-import { Theme } from "@mui/material";
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "./types/appState";
 
 export const layoutStyles = (theme: Theme) => ({
   display: "flex",
@@ -19,25 +20,6 @@ export const layoutStyles = (theme: Theme) => ({
   },
 });
 
-export interface CanvasDimensions {
-  width: number;
-  height: number;
-}
-
-export interface TileDimensions {
-  originalWidth: number;
-  originalHeight: number;
-  width: number;
-  height: number;
-}
-
-export interface ImageAttributes {
-  url: string | null;
-  fileName: string | null;
-  image: HTMLImageElement | null;
-}
-
-
 const App: React.FC = () => {
   const canvasRef = useRef<HTMLCanvasElement>(null);
   const [canvasState, setCanvasState] = useState<CanvasDimensions>({

src/components/Canvas.tsx

@@ -2,7 +2,7 @@ import { Theme } from "@mui/material";
 import Box from "@mui/material/Box";
 import { CSSProperties, useEffect } from "react";
 
-import { CanvasDimensions, ImageAttributes, TileDimensions } from "../App";
+import { CanvasProps } from "../types/canvas";
 
 const canvasContainerStyles = (theme: Theme) => ({
   display: "flex",
@@ -22,13 +22,6 @@ const canvasStyles: CSSProperties = {
   border: "1px solid grey",
 }
 
-interface CanvasProps {
-  canvasState: CanvasDimensions;
-  tileState: TileDimensions;
-  imageState: ImageAttributes;
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-}
-
 const Canvas: React.FC<CanvasProps> = ({ canvasRef, tileState, imageState, canvasState }) => {
   useEffect(() => {
     const canvas = canvasRef.current;

src/components/Controls.tsx

@@ -2,9 +2,9 @@ import CloudUploadIcon from "@mui/icons-material/CloudUpload";
 import ReplayIcon from "@mui/icons-material/Replay";
 import { Box, Button, IconButton, InputAdornment, TextField } from "@mui/material";
 import { Theme } from "@mui/material/styles";
-import { ChangeEvent } from "react";
 
-import { CanvasDimensions, ImageAttributes, TileDimensions } from "../App";
+import { CanvasDimensions } from "../types/appState";
+import { ControlsProps } from "../types/controls";
 import ImageInput from "./ImageInput";
 
 const controlsContainerStyles = (theme: Theme) => ({
@@ -51,16 +51,6 @@ const mainControlsContainer = {
   margin: (theme: Theme) => theme.spacing(6, 0)
 }
 
-interface ControlsProps {
-  canvasRef: React.RefObject<HTMLCanvasElement>;
-  canvasState: CanvasDimensions;
-  setCanvasState: React.Dispatch<React.SetStateAction<CanvasDimensions>>;
-  tileState: TileDimensions;
-  setTileState: React.Dispatch<React.SetStateAction<TileDimensions>>;
-  imageState: ImageAttributes;
-  handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
-}
-
 const Controls: React.FC<ControlsProps> = ({
   canvasRef,
   canvasState,

src/components/Layout.tsx

@@ -1,6 +1,7 @@
 import { Box, Theme } from "@mui/material";
 import React from "react";
 
+import { LayoutProps } from "../types/layout";
 import Footer from "./Footer";
 import Header from "./Header";
 
@@ -13,11 +14,6 @@ const layoutContainerStyles = (theme: Theme) => ({
   boxSizing: "border-box",
 })
 
-// Define the props for the Layout component
-interface LayoutProps {
-  children?: React.ReactNode;
-}
-
 const Layout: React.FC<LayoutProps> = ({ children }) => {
   return (
     <Box

src/types/appState.ts

@@ -0,0 +1,17 @@
+export interface CanvasDimensions {
+    width: number;
+    height: number;
+}
+
+export interface TileDimensions {
+    originalWidth: number;
+    originalHeight: number;
+    width: number;
+    height: number;
+}
+
+export interface ImageAttributes {
+    url: string | null;
+    fileName: string | null;
+    image: HTMLImageElement | null;
+}

src/types/canvas.ts

@@ -0,0 +1,8 @@
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "../types/appState";
+
+export interface CanvasProps {
+    canvasState: CanvasDimensions;
+    tileState: TileDimensions;
+    imageState: ImageAttributes;
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+}

src/types/controls.ts

@@ -0,0 +1,13 @@
+import { ChangeEvent } from "react";
+
+import { CanvasDimensions, ImageAttributes, TileDimensions } from "../types/appState";
+
+export interface ControlsProps {
+    canvasRef: React.RefObject<HTMLCanvasElement>;
+    canvasState: CanvasDimensions;
+    setCanvasState: React.Dispatch<React.SetStateAction<CanvasDimensions>>;
+    tileState: TileDimensions;
+    setTileState: React.Dispatch<React.SetStateAction<TileDimensions>>;
+    imageState: ImageAttributes;
+    handleFileChange: (event: ChangeEvent<HTMLInputElement>) => void;
+}

src/types/layout.ts

@@ -0,0 +1,3 @@
+export interface LayoutProps {
+    children?: React.ReactNode;
+}