app components: don't add 'undefined' class

cmnord · Jul 12, 2023 · 516233c · 516233c · vercel · Jul 12, 2023
1 parent 73036e5
commit 516233c
Show file tree

Hide file tree

Showing 6 changed files with 6 additions and 6 deletions.
diff --git a/app/components/code.tsx b/app/components/code.tsx
@@ -6,7 +6,7 @@ export default function Code({
   children: React.ReactNode;
 }) {
   return (
-    <code className={className + " rounded-md bg-slate-200 px-1 py-2"}>
+    <code className={(className ?? "") + " rounded-md bg-slate-200 px-1 py-2"}>
       {children}
     </code>
   );

diff --git a/app/components/copy-link-button.tsx b/app/components/copy-link-button.tsx
@@ -22,7 +22,7 @@ export default function CopyLinkButton({
       <button
         type="button"
         className={
-          className +
+          (className ?? "") +
           ` inline-flex items-center rounded-md p-1 text-slate-700
           hover:bg-slate-200 focus:outline-none focus:ring-2 focus:ring-blue-500
           focus:ring-offset-2`

diff --git a/app/components/input.tsx b/app/components/input.tsx
@@ -10,7 +10,7 @@ export default function Input({ fwdRef, className, ...rest }: Props) {
       {...rest}
       ref={fwdRef}
       className={
-        className +
+        (className ?? "") +
         ` block w-full rounded-lg border border-slate-300 bg-slate-50 p-2
         text-sm text-slate-900 placeholder:text-sm focus:border-blue-500
         focus:ring-blue-500`

diff --git a/app/components/link.tsx b/app/components/link.tsx
@@ -29,7 +29,7 @@ export default function Link({
   return (
     <RemixLink
       className={
-        className +
+        (className ?? "") +
         ` text-blue-600 underline transition-colors visited:text-purple-700
         hover:text-blue-500`
       }

diff --git a/app/components/main.tsx b/app/components/main.tsx
@@ -8,7 +8,7 @@ export default function Main({
   return (
     <main
       className={
-        className +
+        (className ?? "") +
         " mx-auto max-w-screen-md px-4 pb-16 pt-8 text-slate-700 md:pt-16"
       }
     >

diff --git a/app/components/upload.tsx b/app/components/upload.tsx
@@ -71,7 +71,7 @@ function UploadBox({
       </button>
       <Link to="/help">
         <p id="upload_help" className="mt-1 text-sm">
-          File format help
+          Upload help
         </p>
       </Link>
     </div>