fix style

crustio · Dec 17, 2024 · c0a6d99 · c0a6d99
1 parent ead42ac
commit c0a6d99
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 17 deletions.
diff --git a/src/components/ALoading.tsx b/src/components/ALoading.tsx
@@ -8,7 +8,7 @@ export function Loading(p: { size?: string } & HTMLAttributes<HTMLDivElement>) {
     <div
       {...other}
       className={classNames(
-        "text-black w-full h-full flex items-center justify-center",
+        "text-black w-full h-full flex items-center justify-center sticky left-0",
         className
       )}
     >

diff --git a/src/components/ATable.tsx b/src/components/ATable.tsx
@@ -2,13 +2,15 @@ import { FC, useEffect } from "react";
 import { data } from "../pages/files";
 import { copyTextToClipboard, formatBytes, timestampToDateTime, truncateMiddle } from "../utils/utils";
 import { Loading } from "./ALoading";
+import classNames from "classnames";
 type ATableProps = {
-    header: { name: string }[]
+    header: { name: string, className?: string }[]
     data?: data[]
     loading?: boolean
+    className?: string
 }
 
-const ATable: FC<ATableProps> = ({ header = [], data = [], loading }) => {
+const ATable: FC<ATableProps> = ({ header = [], data = [], loading, className }) => {
 
     const fileHost = (item: data) => {
         const cru_host = 'https://gw.crust-gateway.xyz/ipfs'
@@ -33,10 +35,10 @@ const ATable: FC<ATableProps> = ({ header = [], data = [], loading }) => {
 
     return <>
 
-        <table className=" mb-[5px]">
+        <table className={classNames(" mb-[5px]", className)}>
             <tr className=" bg-[#FAFAFA] rounded-lg h-[50px] w-[200px] border-b-[#FFFFFF]  ">
                 {header.map((item, i) => {
-                    return <th key={`table_${i}`} className={`${data.length && !loading && ' w-full'} th`}>{item.name}</th>
+                    return <th key={`table_${i}`} className={classNames(`${data.length && !loading && ' w-full'} th`, item.className)}>{item.name}</th>
                 })}
             </tr>
             {!loading && data.length > 0 && data.map((item, i) => {
@@ -75,7 +77,7 @@ const ATable: FC<ATableProps> = ({ header = [], data = [], loading }) => {
             })}
 
         </table>
-        {loading && <Loading />}
+        {loading && <Loading className="mt-[100px]" />}
 
     </>;
 };

diff --git a/src/components/Pagination.tsx b/src/components/Pagination.tsx
@@ -79,7 +79,7 @@ export const Pagination = (p: Props) => {
   return (
     <div
       className={classnames(
-        "flex text-[0.8125rem] text-center leading-8 font-semibold ",
+        "flex text-[0.8125rem] text-center leading-8 font-semibold justify-center",
         className
       )}
     >

diff --git a/src/pages/files.tsx b/src/pages/files.tsx
@@ -47,7 +47,7 @@ const Files = () => {
 
     const getCurrentUserInfo = async () => {
         setLoading(true);
-        const url = `https://tonbags-api.crust.network/users?address=${add.address}&page=${pgNum}&pageSize=10`;
+        const url = `https://tonbags-api.crust.network/users?address=${add.address}&page=${pgNum}&pageSize=8`;
         if (!add?.address) return;
         fetch(url, {
             headers: { 'Content-Type': 'application/json' }
@@ -74,7 +74,7 @@ const Files = () => {
     }, [add?.address, pgNum]);
 
     return (
-        <div className="h-full min-h-[670px] w-full text-black text-left flex flex-col ">
+        <div className="h-full min-h-[584px] w-full text-black text-left flex flex-col ">
             {
                 <>
                     <span className=" text-xl">My Files</span>
@@ -95,15 +95,16 @@ const Files = () => {
 
                     <div className="mt-5  w-full flex-1  overflow-auto pb-2.5">
                         <ATable
+                            className='w-[57.8125rem]'
                             loading={loading}
                             header={[
-                                { name: 'Name' },
-                                { name: 'Identifier' },
-                                { name: 'Mode' },
-                                { name: 'Size' },
-                                { name: 'Upload Date' },
-                                { name: 'From' },
-                                { name: 'Action' }
+                                { name: 'Name', className: 'min-w-[211px]' },
+                                { name: 'Identifier', className: 'min-w-[161px]' },
+                                { name: 'Mode', className: 'min-w-[61px]' },
+                                { name: 'Size', className: 'min-w-[111px]' },
+                                { name: 'Upload Date', className: 'min-w-[161px]' },
+                                { name: 'From', className: 'min-w-[111px]' },
+                                { name: 'Action', className: 'min-w-[111px]' }
                             ]}
                             data={userData?.data}
                         />
@@ -119,7 +120,7 @@ const Files = () => {
                     }}
                     total={userData?.pagination?.totalRecords || 0}
                     pgSize={Number(userData?.pagination.pageSize) || 1}
-                    pgNum={Number(userData?.pagination.page) || 10}
+                    pgNum={Number(userData?.pagination.page) || 8}
                 />
             </div>
         </div>