From 97a0eb91fc5a4dbf4248db8426ea88efd9ac021e Mon Sep 17 00:00:00 2001
From: spencerwooo <spencer.woo@outlook.com>
Date: Sat, 4 Sep 2021 15:15:09 +0100
Subject: [PATCH] format according to headwind sequence

---
 components/Auth.tsx                     | 10 +++---
 components/Breadcrumb.tsx               |  8 ++---
 components/DownloadBtn.tsx              |  6 ++--
 components/FileListing.tsx              | 48 ++++++++++++-------------
 components/FourOhFour.tsx               |  8 ++---
 components/Loading.tsx                  |  4 +--
 components/Navbar.tsx                   | 26 +++++++-------
 components/previews/AudioPreview.tsx    | 10 +++---
 components/previews/CodePreview.tsx     |  6 ++--
 components/previews/MarkdownPreview.tsx |  2 +-
 components/previews/OfficePreview.tsx   |  8 ++---
 components/previews/PDFPreview.tsx      | 14 ++++----
 components/previews/TextPreview.tsx     |  8 ++---
 components/previews/VideoPreview.tsx    | 14 ++++----
 pages/[...path].tsx                     |  6 ++--
 pages/index.tsx                         |  6 ++--
 utils/getPreviewType.ts                 |  2 +-
 17 files changed, 91 insertions(+), 95 deletions(-)

diff --git a/components/Auth.tsx b/components/Auth.tsx
index aacb6dc..515612e 100644
--- a/components/Auth.tsx
+++ b/components/Auth.tsx
@@ -14,11 +14,11 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
   const [token, setToken] = useLocalStorage(authTokenPath, '')
 
   return (
-    <div className="flex flex-col space-y-4 max-w-sm mx-auto md:my-10">
-      <div className="mx-auto w-3/4 md:w-5/6">
+    <div className="md:my-10 flex flex-col max-w-sm mx-auto space-y-4">
+      <div className="md:w-5/6 w-3/4 mx-auto">
         <Image src={'/images/no-looking.png'} alt="authenticate" width={912} height={912} />
       </div>
-      <div className="dark:text-gray-100 text-gray-900 text-lg font-bold">Enter Password</div>
+      <div className="dark:text-gray-100 text-lg font-bold text-gray-900">Enter Password</div>
 
       <p className="text-sm text-gray-500">
         This route (the folder itself and the files inside) is password protected. If you know the password, please
@@ -26,7 +26,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
       </p>
 
       <input
-        className="font-mono p-2 bg-blue-50 dark:bg-gray-600 dark:text-white rounded focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none"
+        className="bg-blue-50 dark:bg-gray-600 dark:text-white focus:ring focus:ring-blue-300 dark:focus:ring-blue-700 focus:outline-none p-2 font-mono rounded"
         autoFocus
         type="text"
         placeholder="************"
@@ -41,7 +41,7 @@ const Auth: FunctionComponent<{ redirect: string }> = ({ redirect }) => {
         }}
       />
       <button
-        className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600"
+        className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-blue-500 rounded"
         onClick={() => {
           router.reload()
         }}
diff --git a/components/Breadcrumb.tsx b/components/Breadcrumb.tsx
index 1935991..fd467b4 100644
--- a/components/Breadcrumb.tsx
+++ b/components/Breadcrumb.tsx
@@ -8,14 +8,14 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
     const { path } = query
     if (Array.isArray(path)) {
       return (
-        <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar">
-          <div className="p-1 hover:opacity-80 transition-all duration-75 flex-shrink-0">
+        <div className="dark:text-gray-300 no-scrollbar flex pb-4 overflow-x-scroll text-sm text-gray-600">
+          <div className="hover:opacity-80 flex-shrink-0 p-1 transition-all duration-75">
             <Link href="/">🚩 Home</Link>
           </div>
           {path.map((q: string, i: number) => (
             <div key={i} className="flex items-center flex-shrink-0">
               <div>/</div>
-              <div className="p-1 hover:opacity-80 transition-all duration-75">
+              <div className="hover:opacity-80 p-1 transition-all duration-75">
                 <Link
                   href={`/${path
                     .slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
   }
 
   return (
-    <div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:opacity-80 transition-all duration-75">
+    <div className="dark:text-gray-300 hover:opacity-80 pb-4 text-sm text-gray-600 transition-all duration-75">
       <div className="p-1">
         <Link href="/">🚩 Home</Link>
       </div>
diff --git a/components/DownloadBtn.tsx b/components/DownloadBtn.tsx
index 1a675c4..66798a7 100644
--- a/components/DownloadBtn.tsx
+++ b/components/DownloadBtn.tsx
@@ -11,7 +11,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
   const clipboard = useClipboard()
 
   return (
-    <div className="flex flex-wrap space-x-2 justify-center">
+    <div className="flex flex-wrap justify-center space-x-2">
       <Toaster
         toastOptions={{
           style: {
@@ -21,7 +21,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
         }}
       />
       <a
-        className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
+        className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
         href={downloadUrl}
         target="_blank"
         rel="noopener noreferrer"
@@ -30,7 +30,7 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
         <span>Download</span>
       </a>
       <button
-        className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
+        className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
         onClick={() => {
           clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
           toast.success('Copied direct link to clipboard.')
diff --git a/components/FileListing.tsx b/components/FileListing.tsx
index c59731e..724f048 100644
--- a/components/FileListing.tsx
+++ b/components/FileListing.tsx
@@ -66,10 +66,10 @@ const FileListItem: FunctionComponent<{
   const renderEmoji = emojiIcon && !emojiIcon.index
 
   return (
-    <div className="p-3 grid grid-cols-11 items-center space-x-2 cursor-pointer">
-      <div className="flex space-x-2 items-center col-span-11 md:col-span-7 truncate">
+    <div className="grid items-center grid-cols-11 p-3 space-x-2 cursor-pointer">
+      <div className="md:col-span-7 flex items-center col-span-11 space-x-2 truncate">
         {/* <div>{c.file ? c.file.mimeType : 'folder'}</div> */}
-        <div className="w-5 text-center flex-shrink-0">
+        <div className="flex-shrink-0 w-5 text-center">
           {renderEmoji ? (
             <span>{emojiIcon ? emojiIcon[0] : '📁'}</span>
           ) : (
@@ -80,7 +80,7 @@ const FileListItem: FunctionComponent<{
           {renderEmoji ? c.name.replace(emojiIcon ? emojiIcon[0] : '', '').trim() : c.name}
         </div>
       </div>
-      <div className="hidden md:block text-sm font-mono col-span-3 text-gray-700 dark:text-gray-500 flex-shrink-0">
+      <div className="md:block dark:text-gray-500 flex-shrink-0 hidden col-span-3 font-mono text-sm text-gray-700">
         {new Date(c.lastModifiedDateTime).toLocaleString('en-US', {
           year: 'numeric',
           month: '2-digit',
@@ -90,7 +90,7 @@ const FileListItem: FunctionComponent<{
           hour12: false,
         })}
       </div>
-      <div className="hidden md:block text-sm font-mono col-span-1 truncate text-gray-700 dark:text-gray-500 flex-shrink-0">
+      <div className="md:block dark:text-gray-500 flex-shrink-0 hidden col-span-1 font-mono text-sm text-gray-700 truncate">
         {humanFileSize(c.size)}
       </div>
     </div>
@@ -110,14 +110,14 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
 
   if (error) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         {error.message.includes('401') ? <Auth redirect={path} /> : <FourOhFour errorMsg={error.message} />}
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <Loading loadingText="Loading ..." />
       </div>
     )
@@ -164,12 +164,12 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
     })
 
     return (
-      <div className="bg-white dark:bg-gray-900 dark:text-gray-100 shadow rounded">
-        <div className="p-3 grid grid-cols-12 items-center space-x-2 border-b border-gray-200 dark:border-gray-700">
-          <div className="col-span-12 md:col-span-7 font-bold">Name</div>
-          <div className="hidden md:block font-bold col-span-3">Last Modified</div>
-          <div className="hidden md:block font-bold">Size</div>
-          <div className="hidden md:block font-bold">Actions</div>
+      <div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded shadow">
+        <div className="dark:border-gray-700 grid items-center grid-cols-12 p-3 space-x-2 border-b border-gray-200">
+          <div className="md:col-span-7 col-span-12 font-bold">Name</div>
+          <div className="md:block hidden col-span-3 font-bold">Last Modified</div>
+          <div className="md:block hidden font-bold">Size</div>
+          <div className="md:block hidden font-bold">Actions</div>
         </div>
 
         <Toaster
@@ -219,7 +219,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         )}
 
         {children.map((c: any) => (
-          <div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-850" key={c.id}>
+          <div className="hover:bg-gray-100 dark:hover:bg-gray-850 grid grid-cols-12" key={c.id}>
             <div
               className="col-span-11"
               onClick={e => {
@@ -236,10 +236,10 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
               <FileListItem fileContent={c} />
             </div>
             {c.folder ? (
-              <div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
+              <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
                 <span
                   title="Copy folder permalink"
-                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
                   onClick={() => {
                     clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
                     toast.success('Copied folder permalink.')
@@ -249,10 +249,10 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 </span>
               </div>
             ) : (
-              <div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
+              <div className="md:flex dark:text-gray-400 hidden p-1 text-gray-700">
                 <span
                   title="Copy raw file permalink"
-                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
                   onClick={() => {
                     clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
                     toast.success('Copied raw file permalink.')
@@ -262,7 +262,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
                 </span>
                 <a
                   title="Download file"
-                  className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
+                  className="hover:bg-gray-300 dark:hover:bg-gray-600 p-2 rounded cursor-pointer"
                   href={c['@microsoft.graph.downloadUrl']}
                 >
                   <FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
@@ -273,7 +273,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
         ))}
 
         {renderReadme && (
-          <div className="border-t dark:border-gray-700">
+          <div className="dark:border-gray-700 border-t">
             <MarkdownPreview file={readmeFile} path={path} standalone={false} />
           </div>
         )}
@@ -290,7 +290,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
       switch (extensions[fileExtension]) {
         case preview.image:
           return (
-            <div className="shadow bg-white rounded p-3 w-full">
+            <div className="w-full p-3 bg-white rounded shadow">
               {/* eslint-disable-next-line @next/next/no-img-element */}
               <img className="mx-auto" src={downloadUrl} alt={fileName} />
             </div>
@@ -318,13 +318,13 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
           return <OfficePreview file={resp} />
 
         default:
-          return <div className="bg-white dark:bg-gray-900 shadow rounded">{fileName}</div>
+          return <div className="dark:bg-gray-900 bg-white rounded shadow">{fileName}</div>
       }
     }
 
     return (
       <>
-        <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+        <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
           <FourOhFour
             errorMsg={`Preview for file ${resp.name} is not available, download directly with the button below.`}
           />
@@ -337,7 +337,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
   }
 
   return (
-    <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+    <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
       <FourOhFour errorMsg={`Cannot preview ${resp.name}.`} />
     </div>
   )
diff --git a/components/FourOhFour.tsx b/components/FourOhFour.tsx
index 980c3a8..a687682 100644
--- a/components/FourOhFour.tsx
+++ b/components/FourOhFour.tsx
@@ -3,13 +3,13 @@ import { FunctionComponent } from 'react'
 
 const FourOhFour: FunctionComponent<{ errorMsg: string }> = ({ errorMsg }) => {
   return (
-    <div className="text-center my-20">
-      <div className="mx-auto w-1/2 md:w-1/3">
+    <div className="my-20 text-center">
+      <div className="md:w-1/3 w-1/2 mx-auto">
         <Image src={'/images/empty.png'} alt="404" width={912} height={912} />
       </div>
-      <div className="text-gray-500 mt-5">
+      <div className="mt-5 text-gray-500">
         Error: {errorMsg}.{' '}
-        <kbd className="border bg-gray-200 font-mono text-sm px-2 py-1 rounded border-opacity-20">F12</kbd> for more
+        <kbd className="border-opacity-20 px-2 py-1 font-mono text-sm bg-gray-200 border rounded">F12</kbd> for more
         details.
       </div>
     </div>
diff --git a/components/Loading.tsx b/components/Loading.tsx
index 087ab78..d88010a 100644
--- a/components/Loading.tsx
+++ b/components/Loading.tsx
@@ -2,9 +2,9 @@ import { FunctionComponent } from 'react'
 
 const Loading: FunctionComponent<{ loadingText: string }> = ({ loadingText }) => {
   return (
-    <div className="flex items-center justify-center rounded py-32 space-x-1 dark:text-white">
+    <div className="dark:text-white flex items-center justify-center py-32 space-x-1 rounded">
       <svg
-        className="animate-spin -ml-1 mr-3 h-5 w-5"
+        className="animate-spin w-5 h-5 mr-3 -ml-1"
         xmlns="http://www.w3.org/2000/svg"
         fill="none"
         viewBox="0 0 24 24"
diff --git a/components/Navbar.tsx b/components/Navbar.tsx
index b31ad69..56a59c2 100644
--- a/components/Navbar.tsx
+++ b/components/Navbar.tsx
@@ -42,13 +42,13 @@ const Navbar = () => {
 
   return (
     <div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
-      <div className="max-w-4xl w-full mx-auto flex items-center justify-between">
+      <div className="flex items-center justify-between w-full max-w-4xl mx-auto">
         <Toaster />
 
         <Link href="/">
-          <a className="flex items-center space-x-2 font-bold text-xl p-2 dark:text-white hover:opacity-80">
+          <a className="dark:text-white hover:opacity-80 flex items-center p-2 space-x-2 text-xl font-bold">
             <Image src={siteConfig.icon} alt="icon" width="32" height="32" />
-            <span className="hidden sm:block">{siteConfig.title}</span>
+            <span className="sm:block hidden">{siteConfig.title}</span>
           </a>
         </Link>
 
@@ -59,7 +59,7 @@ const Navbar = () => {
               href={c.link}
               target="_blank"
               rel="noopener noreferrer"
-              className="p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+              className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 p-2 rounded"
             >
               {c.platform === 'email' ? (
                 <FontAwesomeIcon icon={['far', 'envelope']} size="lg" />
@@ -71,7 +71,7 @@ const Navbar = () => {
 
           {tokenPresent && (
             <button
-              className="flex space-x-2 items-center p-2 rounded hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700"
+              className="hover:bg-gray-200 dark:text-white dark:hover:bg-gray-700 flex items-center p-2 space-x-2 rounded"
               onClick={() => setIsOpen(true)}
             >
               <span>Logout</span>
@@ -93,7 +93,7 @@ const Navbar = () => {
               leaveFrom="opacity-100"
               leaveTo="opacity-0"
             >
-              <Dialog.Overlay className="fixed inset-0 bg-gray-50 dark:bg-gray-800" />
+              <Dialog.Overlay className="bg-gray-50 dark:bg-gray-800 fixed inset-0" />
             </Transition.Child>
 
             {/* This element is to trick the browser into centering the modal contents. */}
@@ -109,8 +109,8 @@ const Navbar = () => {
               leaveFrom="opacity-100 scale-100"
               leaveTo="opacity-0 scale-95"
             >
-              <div className="inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white dark:bg-gray-900 shadow-lg rounded">
-                <Dialog.Title className="text-lg font-bold text-gray-900 dark:text-gray-100">
+              <div className="dark:bg-gray-900 inline-block w-full max-w-md p-6 my-8 overflow-hidden text-left align-middle transition-all transform bg-white rounded shadow-lg">
+                <Dialog.Title className="dark:text-gray-100 text-lg font-bold text-gray-900">
                   Clear all tokens?
                 </Dialog.Title>
                 <div className="mt-2">
@@ -120,24 +120,24 @@ const Navbar = () => {
                   </p>
                 </div>
 
-                <div className="mt-4 font-mono text-sm dark:text-gray-100 max-h-32 overflow-y-scroll">
+                <div className="dark:text-gray-100 max-h-32 mt-4 overflow-y-scroll font-mono text-sm">
                   {siteConfig.protectedRoutes.map((r, i) => (
-                    <div key={i} className="flex space-x-1 items-center">
+                    <div key={i} className="flex items-center space-x-1">
                       <FontAwesomeIcon icon="key" />
                       <span className="truncate">{r}</span>
                     </div>
                   ))}
                 </div>
 
-                <div className="mt-8 flex justify-end items-center">
+                <div className="flex items-center justify-end mt-8">
                   <button
-                    className="inline-flex space-x-2 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mr-3"
+                    className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 inline-flex items-center justify-center px-4 py-2 mr-3 space-x-2 text-white bg-blue-500 rounded"
                     onClick={() => setIsOpen(false)}
                   >
                     Cancel
                   </button>
                   <button
-                    className="inline-flex space-x-2 items-center justify-center bg-red-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600"
+                    className="focus:outline-none focus:ring focus:ring-red-300 hover:bg-red-600 inline-flex items-center justify-center px-4 py-2 space-x-2 text-white bg-red-500 rounded"
                     onClick={() => clearTokens()}
                   >
                     <FontAwesomeIcon icon={['far', 'trash-alt']} />
diff --git a/components/previews/AudioPreview.tsx b/components/previews/AudioPreview.tsx
index 0dfe048..8ed7d11 100644
--- a/components/previews/AudioPreview.tsx
+++ b/components/previews/AudioPreview.tsx
@@ -16,13 +16,13 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="bg-white dark:bg-gray-900 dark:text-white rounded shadow p-3 w-full">
-        <div className="flex flex-col space-y-4 md:flex-row md:space-x-4">
-          <div className="flex items-center justify-center bg-gray-100 dark:bg-gray-700 rounded w-full h-72 md:w-40 md:h-36 transition-all duration-75">
+      <div className="dark:bg-gray-900 dark:text-white w-full p-3 bg-white rounded shadow">
+        <div className="md:flex-row md:space-x-4 flex flex-col space-y-4">
+          <div className="dark:bg-gray-700 h-72 md:w-40 md:h-36 flex items-center justify-center w-full transition-all duration-75 bg-gray-100 rounded">
             {playerStatus === PlayerState.Loading ? (
               <div>
                 <svg
-                  className="animate-spin h-5 w-5"
+                  className="animate-spin w-5 h-5"
                   xmlns="http://www.w3.org/2000/svg"
                   fill="none"
                   viewBox="0 0 24 24"
@@ -45,7 +45,7 @@ export const AudioPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           </div>
           <div className="flex flex-col w-full space-y-2">
             <div>{file.name}</div>
-            <div className="text-gray-500 text-sm pb-4">
+            <div className="pb-4 text-sm text-gray-500">
               Last modified:{' '}
               {new Date(file.lastModifiedDateTime).toLocaleString(undefined, {
                 dateStyle: 'short',
diff --git a/components/previews/CodePreview.tsx b/components/previews/CodePreview.tsx
index dea7756..2085338 100644
--- a/components/previews/CodePreview.tsx
+++ b/components/previews/CodePreview.tsx
@@ -18,14 +18,14 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   if (error) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -33,7 +33,7 @@ const CodePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="markdown-body shadow bg-gray-900 rounded p-3">
+      <div className="markdown-body p-3 bg-gray-900 rounded shadow">
         <pre className={`language-${getExtension(file.name)}`}>
           <code>{data}</code>
         </pre>
diff --git a/components/previews/MarkdownPreview.tsx b/components/previews/MarkdownPreview.tsx
index 7fbc44d..b887ac6 100644
--- a/components/previews/MarkdownPreview.tsx
+++ b/components/previews/MarkdownPreview.tsx
@@ -23,7 +23,7 @@ const MarkdownPreview: FunctionComponent<{ file: any; path: string; standalone?:
   // The parent folder of the markdown file, which is also the relative image folder
   const parentPath = path.substring(0, path.lastIndexOf('/'))
   // Check if the image is relative path instead of a absolute url
-  const isUrlAbsolute = url => url.indexOf('://') > 0 || url.indexOf('//') === 0
+  const isUrlAbsolute = (url: string | string[]) => url.indexOf('://') > 0 || url.indexOf('//') === 0
   // Custom renderer to render images with relative path
   const relativeImagePathRenderer = {
     img: ({
diff --git a/components/previews/OfficePreview.tsx b/components/previews/OfficePreview.tsx
index a8031c8..f00becd 100644
--- a/components/previews/OfficePreview.tsx
+++ b/components/previews/OfficePreview.tsx
@@ -13,12 +13,8 @@ const OfficePreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="shadow overflow-scroll" ref={docContainer} style={{ maxHeight: '90vh' }}>
-        <Preview
-          url={file['@microsoft.graph.downloadUrl']}
-          width={docContainerWidth.toString()}
-          height="800"
-        />
+      <div className="overflow-scroll shadow" ref={docContainer} style={{ maxHeight: '90vh' }}>
+        <Preview url={file['@microsoft.graph.downloadUrl']} width={docContainerWidth.toString()} height="800" />
       </div>
       <div className="mt-4">
         <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
diff --git a/components/previews/PDFPreview.tsx b/components/previews/PDFPreview.tsx
index bdb5142..9a0f50f 100644
--- a/components/previews/PDFPreview.tsx
+++ b/components/previews/PDFPreview.tsx
@@ -26,12 +26,12 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   return (
     <>
       <div
-        className="flex flex-col bg-white dark:bg-gray-900 rounded shadow md:p-3 w-full overflow-scroll no-scrollbar"
+        className="dark:bg-gray-900 md:p-3 no-scrollbar flex flex-col w-full overflow-scroll bg-white rounded shadow"
         style={{ maxHeight: '90vh' }}
       >
-        <div className="w-full flex-1 overflow-scroll no-scrollbar" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
+        <div className="no-scrollbar flex-1 w-full overflow-scroll" ref={pdfContainter} style={{ maxHeight: '80vh' }}>
           <Document
-            className="bg-gray-100 dark:bg-gray-800"
+            className="dark:bg-gray-800 bg-gray-100"
             file={file['@microsoft.graph.downloadUrl']}
             onLoadSuccess={onDocumentLoadSuccess}
             loading={<Loading loadingText={loadingText} />}
@@ -46,9 +46,9 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           </Document>
         </div>
 
-        <div className="flex flex-wrap space-x-2 my-4 md:mb-0 w-full items-center justify-center dark:text-white">
+        <div className="md:mb-0 dark:text-white flex flex-wrap items-center justify-center w-full my-4 space-x-2">
           <button
-            className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+            className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
             onClick={() => {
               pageNumber > 1 && setPageNumber(pageNumber - 1)
             }}
@@ -60,7 +60,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
             Page{' '}
             <input
               value={pageNumber}
-              className="w-10 mr-1 text-center p-1 bg-red-50 dark:bg-gray-600 rounded focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none"
+              className="bg-red-50 dark:bg-gray-600 focus:ring focus:ring-red-300 dark:focus:ring-red-700 focus:outline-none w-10 p-1 mr-1 text-center rounded"
               style={{
                 maxWidth: 50,
               }}
@@ -74,7 +74,7 @@ const PDFPreview: FunctionComponent<{ file: any }> = ({ file }) => {
             /<span className="ml-1 text-center">{totalPages}</span>
           </div>
           <button
-            className="px-4 py-2 bg-red-500 text-white rounded cursor-pointer focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 transition-all duration-75 disabled:opacity-50"
+            className="focus:ring focus:ring-red-300 focus:outline-none hover:bg-red-600 disabled:opacity-50 px-4 py-2 text-white transition-all duration-75 bg-red-500 rounded cursor-pointer"
             onClick={() => {
               pageNumber < totalPages && setPageNumber(pageNumber + 1)
             }}
diff --git a/components/previews/TextPreview.tsx b/components/previews/TextPreview.tsx
index bc9ef86..cb53854 100644
--- a/components/previews/TextPreview.tsx
+++ b/components/previews/TextPreview.tsx
@@ -9,14 +9,14 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
   const { data, error } = useStaleSWR(file['@microsoft.graph.downloadUrl'])
   if (error) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <FourOhFour errorMsg={error.message} />
       </div>
     )
   }
   if (!data) {
     return (
-      <div className="shadow bg-white dark:bg-gray-900 rounded p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <Loading loadingText="Loading file content..." />
       </div>
     )
@@ -24,8 +24,8 @@ const TextPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="shadow bg-white dark:bg-gray-900 dark:text-gray-100 rounded p-3">
-        <pre className="p-0 md:p-3 overflow-scroll">{data}</pre>
+      <div className="dark:bg-gray-900 dark:text-gray-100 p-3 bg-white rounded shadow">
+        <pre className="md:p-3 p-0 overflow-scroll">{data}</pre>
       </div>
       <div className="mt-4">
         <DownloadBtn downloadUrl={file['@microsoft.graph.downloadUrl']} />
diff --git a/components/previews/VideoPreview.tsx b/components/previews/VideoPreview.tsx
index d10b443..23140e7 100644
--- a/components/previews/VideoPreview.tsx
+++ b/components/previews/VideoPreview.tsx
@@ -14,7 +14,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
 
   return (
     <>
-      <div className="bg-white dark:bg-gray-900 rounded shadow p-3">
+      <div className="dark:bg-gray-900 p-3 bg-white rounded shadow">
         <div className="relative" style={{ paddingTop: '56.25%' }}>
           <ReactPlayer
             className="absolute top-0 left-0 w-full h-full"
@@ -27,7 +27,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         </div>
       </div>
 
-      <div className="flex flex-wrap space-x-2 justify-center mt-4">
+      <div className="flex flex-wrap justify-center mt-4 space-x-2">
         <Toaster
           toastOptions={{
             style: {
@@ -37,7 +37,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           }}
         />
         <a
-          className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
+          className="w-36 focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 flex items-center justify-center flex-shrink-0 px-4 py-2 mb-2 space-x-4 text-white bg-blue-500 rounded"
           href={file['@microsoft.graph.downloadUrl']}
           target="_blank"
           rel="noopener noreferrer"
@@ -47,7 +47,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         </a>
 
         <button
-          className="flex-shrink-0 w-48 flex space-x-4 items-center justify-center bg-yellow-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 mb-2"
+          className="focus:outline-none focus:ring focus:ring-yellow-300 hover:bg-yellow-600 flex items-center justify-center flex-shrink-0 w-48 px-4 py-2 mb-2 space-x-4 text-white bg-yellow-500 rounded"
           onClick={() => {
             clipboard.copy(`${getBaseUrl()}/api?path=${asPath}&raw=true`)
             toast.success('Copied direct link to clipboard.')
@@ -58,7 +58,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
         </button>
 
         <a
-          className="flex space-x-2 items-center justify-center bg-gray-700 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 mb-2"
+          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-gray-600 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-gray-700 rounded"
           href={`iina://weblink?url=${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"
@@ -67,7 +67,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           <span>IINA</span>
         </a>
         <a
-          className="flex space-x-2 items-center justify-center bg-yellow-600 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 mb-2"
+          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-500 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-600 rounded"
           href={`vlc://${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"
@@ -76,7 +76,7 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
           <span>VLC</span>
         </a>
         <a
-          className="flex space-x-2 items-center justify-center bg-yellow-400 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 mb-2"
+          className="focus:outline-none focus:ring focus:ring-blue-300 hover:bg-yellow-300 flex items-center justify-center px-4 py-2 mb-2 space-x-2 text-white bg-yellow-400 rounded"
           href={`potplayer://${file['@microsoft.graph.downloadUrl']}`}
           target="_blank"
           rel="noopener noreferrer"
diff --git a/pages/[...path].tsx b/pages/[...path].tsx
index 3358a54..0976252 100644
--- a/pages/[...path].tsx
+++ b/pages/[...path].tsx
@@ -11,14 +11,14 @@ export default function Folders() {
   const { query } = useRouter()
 
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
+    <div className="dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen bg-white">
       <Head>
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800">
+      <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
         <Navbar />
-        <div className="mx-auto w-full max-w-4xl p-4">
+        <div className="w-full max-w-4xl p-4 mx-auto">
           <Breadcrumb query={query} />
           <FileListing query={query} />
         </div>
diff --git a/pages/index.tsx b/pages/index.tsx
index 640549f..85eba46 100644
--- a/pages/index.tsx
+++ b/pages/index.tsx
@@ -8,14 +8,14 @@ import Breadcrumb from '../components/Breadcrumb'
 
 export default function Home() {
   return (
-    <div className="flex flex-col items-center justify-center min-h-screen bg-white dark:bg-gray-900">
+    <div className="dark:bg-gray-900 flex flex-col items-center justify-center min-h-screen bg-white">
       <Head>
         <title>{siteConfig.title}</title>
       </Head>
 
-      <main className="flex flex-col w-full flex-1 bg-gray-50 dark:bg-gray-800">
+      <main className="bg-gray-50 dark:bg-gray-800 flex flex-col flex-1 w-full">
         <Navbar />
-        <div className="mx-auto w-full max-w-4xl p-4">
+        <div className="w-full max-w-4xl p-4 mx-auto">
           <Breadcrumb />
           <FileListing />
         </div>
diff --git a/utils/getPreviewType.ts b/utils/getPreviewType.ts
index 74d3e3c..b3db269 100644
--- a/utils/getPreviewType.ts
+++ b/utils/getPreviewType.ts
@@ -51,7 +51,7 @@ const extensions = {
   webm: preview.video,
   m3u8: preview.video,
   mkv: preview.video,
-  avi: preview.video,  // won't work!
+  avi: preview.video, // won't work!
 
   mp3: preview.audio,
   m4a: preview.audio,