From abba7df270741ee208d08f947c08201e3536241e Mon Sep 17 00:00:00 2001
From: Theo Browne <me@t3.gg>
Date: Sun, 10 Nov 2024 22:10:51 -0800
Subject: [PATCH] more cleanup and refactoring

---
 src/app/(tools)/rounded-border/rounded-tool.tsx | 15 ++++++---------
 src/app/(tools)/square-image/square-tool.tsx    |  4 ++--
 src/app/(tools)/svg-to-png/svg-tool.tsx         |  4 ++--
 src/components/shared/file-dropzone.tsx         |  6 +++---
 src/components/shared/upload-box.tsx            |  8 +++-----
 5 files changed, 16 insertions(+), 21 deletions(-)

diff --git a/src/app/(tools)/rounded-border/rounded-tool.tsx b/src/app/(tools)/rounded-border/rounded-tool.tsx
index 2dc4b80..a5dbf34 100644
--- a/src/app/(tools)/rounded-border/rounded-tool.tsx
+++ b/src/app/(tools)/rounded-border/rounded-tool.tsx
@@ -1,8 +1,7 @@
 "use client";
 import { usePlausible } from "next-plausible";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import { useLocalStorage } from "@/hooks/use-local-storage";
-import React from "react";
 import { UploadBox } from "@/components/shared/upload-box";
 import { OptionSelector } from "@/components/shared/option-selector";
 import { BorderRadiusSelector } from "@/components/border-radius-selector";
@@ -82,14 +81,14 @@ interface ImageRendererProps {
   background: BackgroundOption;
 }
 
-const ImageRenderer: React.FC<ImageRendererProps> = ({
+const ImageRenderer = ({
   imageContent,
   radius,
   background,
-}) => {
-  const containerRef = React.useRef<HTMLDivElement>(null);
+}: ImageRendererProps) => {
+  const containerRef = useRef<HTMLDivElement>(null);
 
-  React.useEffect(() => {
+  useEffect(() => {
     if (containerRef.current) {
       const imgElement = containerRef.current.querySelector("img");
       if (imgElement) {
@@ -125,9 +124,7 @@ function SaveAsPngButton({
   background: BackgroundOption;
   imageMetadata: { width: number; height: number; name: string };
 }) {
-  const [canvasRef, setCanvasRef] = React.useState<HTMLCanvasElement | null>(
-    null,
-  );
+  const [canvasRef, setCanvasRef] = useState<HTMLCanvasElement | null>(null);
   const { convertToPng, canvasProps } = useImageConverter({
     canvas: canvasRef,
     imageContent,
diff --git a/src/app/(tools)/square-image/square-tool.tsx b/src/app/(tools)/square-image/square-tool.tsx
index d5a43a3..8264309 100644
--- a/src/app/(tools)/square-image/square-tool.tsx
+++ b/src/app/(tools)/square-image/square-tool.tsx
@@ -137,7 +137,7 @@ function SquareToolCore(props: { fileUploaderProps: FileUploaderResult }) {
   );
 }
 
-export const SquareTool: React.FC = () => {
+export function SquareTool() {
   const fileUploaderProps = useFileUploader();
 
   return (
@@ -149,4 +149,4 @@ export const SquareTool: React.FC = () => {
       <SquareToolCore fileUploaderProps={fileUploaderProps} />
     </FileDropzone>
   );
-};
+}
diff --git a/src/app/(tools)/svg-to-png/svg-tool.tsx b/src/app/(tools)/svg-to-png/svg-tool.tsx
index a60d659..137d778 100644
--- a/src/app/(tools)/svg-to-png/svg-tool.tsx
+++ b/src/app/(tools)/svg-to-png/svg-tool.tsx
@@ -79,7 +79,7 @@ interface SVGRendererProps {
   svgContent: string;
 }
 
-const SVGRenderer: React.FC<SVGRendererProps> = ({ svgContent }) => {
+function SVGRenderer({ svgContent }: SVGRendererProps) {
   const containerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -94,7 +94,7 @@ const SVGRenderer: React.FC<SVGRendererProps> = ({ svgContent }) => {
   }, [svgContent]);
 
   return <div ref={containerRef} />;
-};
+}
 
 function SaveAsPngButton({
   svgContent,
diff --git a/src/components/shared/file-dropzone.tsx b/src/components/shared/file-dropzone.tsx
index 021c17f..fc0ad70 100644
--- a/src/components/shared/file-dropzone.tsx
+++ b/src/components/shared/file-dropzone.tsx
@@ -7,12 +7,12 @@ interface FileDropzoneProps {
   setCurrentFile: (file: File) => void;
 }
 
-export const FileDropzone: React.FC<FileDropzoneProps> = ({
+export function FileDropzone({
   children,
   acceptedFileTypes,
   dropText,
   setCurrentFile,
-}) => {
+}: FileDropzoneProps) {
   const [isDragging, setIsDragging] = useState(false);
   const dragCounter = useRef(0);
 
@@ -93,4 +93,4 @@ export const FileDropzone: React.FC<FileDropzoneProps> = ({
       {children}
     </div>
   );
-};
+}
diff --git a/src/components/shared/upload-box.tsx b/src/components/shared/upload-box.tsx
index 32f7c90..4972a4a 100644
--- a/src/components/shared/upload-box.tsx
+++ b/src/components/shared/upload-box.tsx
@@ -1,5 +1,3 @@
-"use client";
-
 import React from "react";
 
 interface UploadBoxProps {
@@ -10,13 +8,13 @@ interface UploadBoxProps {
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-export const UploadBox: React.FC<UploadBoxProps> = ({
+export function UploadBox({
   title,
   subtitle,
   description,
   accept,
   onChange,
-}) => {
+}: UploadBoxProps) {
   return (
     <div className="flex flex-col items-center justify-center gap-4 p-4">
       <div className="flex flex-col items-center gap-2">
@@ -55,4 +53,4 @@ export const UploadBox: React.FC<UploadBoxProps> = ({
       </div>
     </div>
   );
-};
+}