fix: Error Invalid Tailwind CSS classnames order

Author: ln-dev7

components/algolia/algolia-search-code.tsx

@@ -19,7 +19,7 @@ export default function AlgoliaSearchCode() {
     <InstantSearch indexName="codes" searchClient={client}>
       <SearchBox
         placeholder="Search publics codes..."
-        submitIconComponent={() => <Search className="w-4 h-4" />}
+        submitIconComponent={() => <Search className="h-4 w-4" />}
         resetIconComponent={() => <Trash2 />}
         loadingIconComponent={() => (
           <div className="w-full px-6 py-4">
@@ -43,7 +43,7 @@ export default function AlgoliaSearchCode() {
 function Hit({ hit }) {
   return (
     <Link href={`/code-preview/${hit.objectID}`}>
-      <div className="w-full mb-4 p-4 rounded-lg border hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500 overflow-hidden">
+      <div className="mb-4 w-full overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500">
         <div className="flex flex-col items-start">
           <h3 className="mb-2 text-lg font-semibold leading-none tracking-tight text-slate-700 dark:text-slate-300 ">
             {hit.idAuthor}

components/algolia/algolia-search-link.tsx

@@ -32,7 +32,7 @@ export default function AlgoliaSearchLink() {
     <InstantSearch indexName="links" searchClient={client}>
       <SearchBox
         placeholder="Search links..."
-        submitIconComponent={() => <Search className="w-4 h-4" />}
+        submitIconComponent={() => <Search className="h-4 w-4" />}
         resetIconComponent={() => <Trash2 />}
         loadingIconComponent={() => (
           <div className="w-full px-6 py-4">
@@ -61,7 +61,7 @@ export default function AlgoliaSearchLink() {
 function Hit({ hit }) {
   return (
     <Link href={`${hit.link}`} target="_blank">
-      <div className="w-full mb-4 p-4 rounded-lg border hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500 overflow-hidden flex items-start flex-col gap-2">
+      <div className="mb-4 flex w-full flex-col items-start gap-2 overflow-hidden rounded-lg border p-4 hover:border-sky-500 dark:border-slate-300 dark:hover:border-sky-500">
         <div>
           <Highlight
             attribute="description"
@@ -83,7 +83,7 @@ function Hit({ hit }) {
         )}
         <Link
           href={`${hit.link}`}
-          className="line-clamp-1 text-xs text-sky-500 font-medium"
+          className="line-clamp-1 text-xs font-medium text-sky-500"
           target="_blank"
         >
           {hit.link}

components/avatar-user.tsx

@@ -32,7 +32,7 @@ export const useGitHubLogout = () => {
     try {
       await signOut(auth)
     } catch (error) {
-      console.error(error.message)
+      return
     }
   }
 
@@ -112,8 +112,8 @@ export function AvatarUser() {
         </div>
         {user && (
           <>
-            <Separator className="mt-8 mb-4" />
-            <p className="text-sm text-slate-500 dark:text-slate-400 mb-1">
+            <Separator className="mb-4 mt-8" />
+            <p className="mb-1 text-sm text-slate-500 dark:text-slate-400">
               Follow Sharuco on{" "}
             </p>
             <Link

components/cards/card-code-admin.tsx

@@ -357,7 +357,7 @@ export default function CardCodeAdmin({
                   <div className="mb-4 flex w-full flex-col items-start gap-1.5">
                     <Label htmlFor="language">Edit language</Label>
                     <select
-                      className="flex h-10 w-full rounded-md border border-slate-300 bg-white py-2 px-3 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                      className="flex h-10 w-full rounded-md border border-slate-300 bg-white px-3 py-2 text-sm placeholder:text-slate-400 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:border-slate-700 dark:bg-slate-900 dark:text-slate-50 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                       name="language"
                       id="language"
                       {...register("language")}
@@ -439,7 +439,7 @@ export default function CardCodeAdmin({
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <button
                   className={cn(
-                    "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                    "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                   )}
                   disabled={isLoading}
                   onClick={!isLoading ? handleSubmit(onSubmit) : undefined}
@@ -469,7 +469,7 @@ export default function CardCodeAdmin({
                 <AlertDialogCancel>Cancel</AlertDialogCancel>
                 <button
                   className={cn(
-                    "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                    "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                   )}
                   disabled={isLoadingDelete}
                   onClick={!isLoadingDelete ? handleDeleteDocument : undefined}
@@ -485,7 +485,7 @@ export default function CardCodeAdmin({
         </div>
       </div>
       <div className="overflow-hidden rounded-lg bg-slate-900 dark:bg-black">
-        <div className="flex items-center justify-between bg-[#343541] py-1 px-4">
+        <div className="flex items-center justify-between bg-[#343541] px-4 py-1">
           <span className="text-xs font-medium text-white">
             {language.toLowerCase()}
           </span>
@@ -511,7 +511,7 @@ export default function CardCodeAdmin({
                   <AlertDialogCancel>Close</AlertDialogCancel>
                   <button
                     className={cn(
-                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                     )}
                     onClick={downloadImage}
                   >
@@ -571,7 +571,7 @@ export default function CardCodeAdmin({
                     sharuco.lndev.me
                   </h3>
                   <div className="max-w-[1280px] overflow-hidden rounded-lg bg-slate-900 dark:bg-black">
-                    <div className="flex items-center justify-between bg-[#343541] py-1 px-4">
+                    <div className="flex items-center justify-between bg-[#343541] px-4 py-1">
                       <div className="flex items-center gap-2">
                         <span
                           className={`

components/cards/card-code.tsx

@@ -162,7 +162,7 @@ export default function CardCode({
   return (
     <div key={id} className="mb-0 flex flex-col gap-2">
       <div className="overflow-hidden rounded-lg bg-slate-900 dark:bg-black">
-        <div className="flex items-center justify-between bg-[#343541] py-1 px-4">
+        <div className="flex items-center justify-between bg-[#343541] px-4 py-1">
           <span className="text-xs font-medium text-white">
             {language.toLowerCase()}
           </span>
@@ -188,7 +188,7 @@ export default function CardCode({
                   <AlertDialogCancel>Close</AlertDialogCancel>
                   <button
                     className={cn(
-                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                     )}
                     onClick={downloadImage}
                   >
@@ -248,7 +248,7 @@ export default function CardCode({
                     sharuco.lndev.me
                   </h3>
                   <div className="max-w-[1280px] overflow-hidden rounded-lg bg-slate-900 dark:bg-black">
-                    <div className="flex items-center justify-between bg-[#343541] py-1 px-4">
+                    <div className="flex items-center justify-between bg-[#343541] px-4 py-1">
                       <div className="flex items-center gap-2">
                         <span
                           className={`
@@ -299,7 +299,7 @@ export default function CardCode({
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <a
                     className={cn(
-                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                     )}
                     href={`mailto:[email protected]?subject=REPORTING%20A%20CODE%20ON%20SHARUCO&body=Hello,%20%0D%0A%0D%0AI%20want%20to%20report%20this%20code%20https://sharuco.lndev.me/code-preview/${id}%20that%20I%20saw%20on%20Sharuco.%0D%0AThank%20you`}
                   >
@@ -520,7 +520,7 @@ export default function CardCode({
                   <AlertDialogCancel>Cancel</AlertDialogCancel>
                   <button
                     className={cn(
-                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 py-2 px-4 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
+                      "inline-flex h-10 items-center justify-center rounded-md bg-slate-900 px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-slate-700 focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-slate-100 dark:text-slate-900 dark:hover:bg-slate-200 dark:focus:ring-slate-400 dark:focus:ring-offset-slate-900"
                     )}
                     disabled={isPending}
                     onClick={login}