change ladning page

vwh · Jul 24, 2024 · e029dca · e029dca
1 parent 8329e2f
commit e029dca
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 29 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -67,28 +67,26 @@ function App() {
 
   return (
     <>
-      <div className="flex flex-col gap-3">
-        {!db && <Logo />}
-        <UploadFile />
-        {isLoading ? (
-          <Loading>Loading SQLite file</Loading>
-        ) : isFetching ? (
-          <Loading>Fetching SQLite file</Loading>
-        ) : null}
-        {fetchError && !db && <ErrorMessage>{fetchError}</ErrorMessage>}
-        {!isLoading &&
-          db &&
-          (tables.length > 0 ? (
-            <DBTable />
-          ) : (
-            <ErrorMessage>Your database is empty, no tables found</ErrorMessage>
-          ))}
-        <Dialog
-          showDialog={showDialog}
-          setShowDialog={setShowDialog}
-          fn={handleRetryWithProxy}
-        />
-      </div>
+      {!db && <Logo />}
+      <UploadFile />
+      {isLoading ? (
+        <Loading>Loading SQLite file</Loading>
+      ) : isFetching ? (
+        <Loading>Fetching SQLite file</Loading>
+      ) : null}
+      {fetchError && !db && <ErrorMessage>{fetchError}</ErrorMessage>}
+      {!isLoading &&
+        db &&
+        (tables.length > 0 ? (
+          <DBTable />
+        ) : (
+          <ErrorMessage>Your database is empty, no tables found</ErrorMessage>
+        ))}
+      <Dialog
+        showDialog={showDialog}
+        setShowDialog={setShowDialog}
+        fn={handleRetryWithProxy}
+      />
       {!db && <Footer />}
     </>
   );

diff --git a/src/components/dropzone.tsx b/src/components/dropzone.tsx
@@ -48,10 +48,10 @@ export default function UploadFile() {
   });
 
   const renderDropzoneContent = (hasDatabase: boolean) => (
-    <div className="flex items-center gap-2 justify-center">
+    <div className="flex items-center gap-2 justify-center h-full">
       <div
         {...getRootProps()}
-        className={`grow h-[85px] border p-6 rounded cursor-pointer text-center flex flex-col items-center justify-center ${
+        className={`grow h-full border p-6 rounded cursor-pointer text-center flex flex-col items-center justify-center ${
           hasDatabase ? "" : "py-32"
         }`}
       >
@@ -87,7 +87,7 @@ export default function UploadFile() {
   );
 
   return (
-    <section>
+    <section className={db ? "" : "h-full"}>
       {renderDropzoneContent(Boolean(db))}
       <div>
         {/* {file && <FileData file={file} />} */}

diff --git a/src/components/footer.tsx b/src/components/footer.tsx
@@ -4,7 +4,7 @@ import { Github } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="flex items-center justify-between my-1 p-4 border rounded mt-3">
+    <footer className="flex items-center justify-between p-4 border rounded">
       <div>
         <p className="hidden sm:block text-xs">
           No file will be uploaded to server. using JavaScript, sql.js

diff --git a/src/components/table.tsx b/src/components/table.tsx
@@ -139,7 +139,7 @@ export function DBTable() {
   }
 
   return (
-    <div className="flex flex-col gap-3 mb-2">
+    <>
       <section className="flex flex-col gap-2 p-3 border rounded pb-2">
         <TableSelect />
         <div className="flex gap-1">
@@ -192,6 +192,6 @@ export function DBTable() {
           rowCount={rowCount}
         />
       )}
-    </div>
+    </>
   );
 }
diff --git a/src/main.tsx b/src/main.tsx
@@ -7,7 +7,7 @@ import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <main className="container mx-auto p-4">
+    <main className="container mx-auto p-4 h-screen flex flex-col gap-3">
       <App />
     </main>
   </React.StrictMode>,