Update file ui

This commit is contained in:
Lee 2022-11-15 03:33:33 +00:00
parent fdbc772c38
commit 006ee69039
No known key found for this signature in database
GPG Key ID: 6EA25896ECCB3121

@ -10,6 +10,7 @@ export default function File(props) {
const { isValidFile, fileData } = props; const { isValidFile, fileData } = props;
const file = JSON.parse(fileData); const file = JSON.parse(fileData);
let { let {
uploader,
fileId, fileId,
originalFileName, originalFileName,
uploadDate, uploadDate,
@ -23,15 +24,17 @@ export default function File(props) {
let toShow; let toShow;
if (!isValidFile) { if (!isValidFile) {
toShow = ( return (
<> <div className="h-screen flex items-center justify-center">
<div className="flex flex-col text-center items-center justify-center">
<h1 className="text-red-500 text-3xl mb-5">Invalid File</h1> <h1 className="text-red-500 text-3xl mb-5">Invalid File</h1>
<Link href="/"> <Link href="/">
<Button auto className="bg-blue-600"> <Button auto className="bg-blue-600">
Go Home Go Home
</Button> </Button>
</Link> </Link>
</> </div>
</div>
); );
} }
if (isValidFile) { if (isValidFile) {
@ -54,17 +57,16 @@ export default function File(props) {
return ( return (
<div className="h-screen flex items-center justify-center"> <div className="h-screen flex items-center justify-center">
<div className="flex flex-col text-center items-center justify-center"> <div className="flex flex-col items-center justify-center">
{isValidFile ? (
<div className="mb-4">
<h1 className="font-bold text-lg"> <h1 className="font-bold text-lg">
{originalFileName} ({fileId}.{ext}) {originalFileName} ({fileId}.{ext})
</h1> </h1>
<h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3> <h3>{moment(uploadDate).format("MMMM Do YYYY, h:mm:ss a")}</h3>
<h3>{formatBytes(size)}</h3> <h3>
</div> Uploader: <span className="font-bold">{uploader.username}</span> -{" "}
) : null} {formatBytes(size)}
<div className="md:w-4/6 md:h-4/6 sm:w-fit sm:h-fit">{toShow}</div> </h3>
<div className="md:w-4/6 md:h-4/6 sm:w-fit sm:h-fit mt-3">{toShow}</div>
<Button <Button
auto auto
className="bg-blue-600 mt-5" className="bg-blue-600 mt-5"