REFACTOR for consistent syntax

frontend/src/components/Dropdown.tsx

@@ -47,12 +47,12 @@ const Dropdown = ({ label, children, className }: DropdownProps) => {
             ref={ref}>
             <button
                 onClick={toggleDropdown}
-                className="inline-flex justify-between w-full rounded-xl px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50"
+                className={"inline-flex justify-between w-full rounded-xl px-4 py-2 bg-white text-sm font-medium text-gray-600 hover:bg-gray-50"}
             >
                 {label}
             </button>
             {isOpen && (
-                <ul className="absolute w-48 origin-top-right rounded-md bg-white shadow-lg font-medium">
+                <ul className={"absolute w-48 origin-top-right rounded-md bg-white shadow-lg font-medium"}>
                     {children}
                 </ul>
             )}

frontend/src/components/Selector.tsx

@@ -12,7 +12,7 @@ const Selector = ({children, label}: props) => {
                 className={"w-full"}>
                 { label }
             </label>
-            <div className="w-px h-6 bg-gray-400 mx-3" />
+            <div className={"w-px h-6 bg-gray-400 mx-3"} />
             {children}
         </div>
     )

frontend/src/components/Topbar.tsx

@@ -31,7 +31,9 @@ const Topbar = ({sidebarToggled, setSidebarToggled, user, className}: props) =>
                     />
 
                     <Dropdown label={user.name}>
-                        <DropdownItem item="Logout" onClick={() => globalThis.location.href = logoutUrl} className={"text-red-500 font-medium"} />
+                        <DropdownItem item="Logout"
+                                      onClick={() => globalThis.location.href = logoutUrl}
+                                      className={"text-red-500 font-medium"} />
                     </Dropdown>
                 </div>
             ) :

frontend/src/layouts/MainLayout.tsx

@@ -29,7 +29,7 @@ const MainLayout = () => {
                 user={user}
                 className={`row-span-2 transition-all duration-300 overflow-hidden whitespace-nowrap ${sidebarToggled ? "-translate-x-full" : "translate-x-0"}`}/>
             <Topbar
-                className="transition-all duration-300"
+                className={"transition-all duration-300"}
                 sidebarToggled={sidebarToggled}
                 setSidebarToggled={setSidebarToggled}
                 user={user}/>

frontend/src/pages/ClipEdit.tsx

@@ -129,7 +129,7 @@ const ClipEdit = () => {
                     />
 
                     {error && (
-                        <div className="text-red-600 text-center mt-2">
+                        <div className={"text-red-600 text-center mt-2"}>
                             {error}
                         </div>
                     )}

frontend/src/pages/Home.tsx

@@ -1,39 +1,39 @@
 const Home = () => {
     return (
-        <div className="max-h-screen flex flex-col justify-center items-center px-6 py-12 text-gray-900">
+        <div className={"max-h-screen flex flex-col justify-center items-center px-6 py-12 text-gray-900"}>
             {/* Logo */}
             <img
                 src="/logo.png"
                 alt="VoD System Logo"
-                className="h-44 mb-8 object-contain"
+                className={"h-44 mb-8 object-contain"}
             />
 
             {/* Description Container */}
-            <div className="max-w-xl text-center">
+            <div className={"max-w-xl text-center"}>
-                <h2 className="text-3xl font-semibold mb-6 text-gray-700">
+                <h2 className={"text-3xl font-semibold mb-6 text-gray-700"}>
                     What is the VoD System?
                 </h2>
-                <p className="text-lg leading-relaxed text-gray-600 mb-6">
+                <p className={"text-lg leading-relaxed text-gray-600 mb-6"}>
                     The VoD System is a powerful clip management platform designed to streamline how you
                     handle your video content. Whether you're a content creator, streamer, or educator,
                     VoD System lets you:
                 </p>
 
-                <ul className="list-disc list-inside text-gray-600 mb-8 space-y-2">
+                <ul className={"list-disc list-inside text-gray-600 mb-8 space-y-2"}>
                     <li>Upload clips effortlessly and securely.</li>
                     <li>Edit and trim videos with intuitive controls.</li>
                     <li>Compress files to specific file sizes.</li>
                     <li>Organize your clips for quick access and sharing.</li>
                 </ul>
 
-                <p className="text-lg leading-relaxed text-gray-600">
+                <p className={"text-lg leading-relaxed text-gray-600"}>
                     Designed with simplicity and efficiency in mind, VoD System adapts to your workflow,
                     making video clip management faster and more enjoyable than ever.
                 </p>
             </div>
 
             {/* File Support Note */}
-            <div className="bg-gray-100 border border-gray-300 rounded-md p-4 text-sm text-gray-500 max-w-md mx-auto">
+            <div className={"bg-gray-100 border border-gray-300 rounded-md p-4 text-sm text-gray-500 max-w-md mx-auto"}>
                 <strong>Note:</strong> Currently, only <code>.mp4</code> files are supported for upload and processing.
                 Support for additional video formats will be added in future updates.
             </div>