chore: oxc

app/(ui)/donate/admin/client.tsx

@@ -98,7 +98,7 @@ const columns: ColumnDef<typeof donations.$inferSelect>[] = [
           className={cn(
             "flex gap-1",
             row.row.original.uid ||
-              "opacity-0 group-hover:opacity-100 transition-opacity",
+              "opacity-0 transition-opacity group-hover:opacity-100",
           )}
         >
           <SimpleTooltip text="Re-send Popup">
@@ -149,8 +149,8 @@ export function DonateAdminPage({
   }, [router]);
 
   return (
-    <div className="mx-auto w-full max-w-[max(1280px,90%)] flex flex-col">
-      <span className="flex items-center text-3xl font-semibold gap-1 pt-1 pb-2">
+    <div className="mx-auto flex w-full max-w-[max(1280px,90%)] flex-col">
+      <span className="flex items-center gap-1 pt-1 pb-2 text-3xl font-semibold">
         <BitcoinIcon size={32} />
         Donate List
       </span>
@@ -158,7 +158,7 @@ export function DonateAdminPage({
         columns={columns}
         emptyDescription="No donation came in yet."
         data={data}
-        className="w-full max-h-[calc(100vh-93px)] overflow-y-auto backdrop-blur-sm bg-black/25"
+        className="max-h-[calc(100vh-93px)] w-full overflow-y-auto bg-black/25 backdrop-blur-sm"
       ></DataTable>
     </div>
   );

app/(ui)/donate/page.tsx

@@ -248,14 +248,14 @@ export default async function () {
 
   //#region TSX
   return (
-    <div className="flex items-center justify-center min-h-svh">
-      <div className="p-5 bg-card border rounded-md w-full max-w-md">
+    <div className="flex min-h-svh items-center justify-center">
+      <div className="w-full max-w-md rounded-md border bg-card p-5">
         <FormProvider id="tip" inDialog={false} onSubmit={submit}>
-          <div className="flex flex-col items-center sm:flex-row sm:items-end gap-2">
+          <div className="flex flex-col items-center gap-2 sm:flex-row sm:items-end">
             <FormInput name="image" className="w-fit">
               <Cropper />
             </FormInput>
-            <div className="grid gap-4 [&>label]:-mb-2 grow w-full">
+            <div className="grid w-full grow gap-4 [&>label]:-mb-2">
               <FormInput name="name" label="ชื่อ" subLabel="ไม่จำเป็น">
                 <Input placeholder="Anonymous" />
               </FormInput>
@@ -274,7 +274,7 @@ export default async function () {
           {!artifactConfig.locked && (
             <>
               <FormInput name="artifact">
-                <FormWrapper className="flex gap-2 items-center">
+                <FormWrapper className="flex items-center gap-2">
                   <Checkbox />
                   ลัดคิวเสือกไอดีชาวบ้าน
                 </FormWrapper>
@@ -292,11 +292,11 @@ export default async function () {
             tabs={[
               {
                 label: (
-                  <span className="flex gap-1 items-center">
+                  <span className="flex items-center gap-1">
                     <Image
                       src={TruemoneyIcon}
                       alt="Truemoney"
-                      className="w-12 h-6 object-cover"
+                      className="h-6 w-12 object-cover"
                     />
                     TrueMoney
                   </span>
@@ -305,7 +305,7 @@ export default async function () {
               },
               {
                 label: (
-                  <span className="flex gap-1 items-center">
+                  <span className="flex items-center gap-1">
                     <QrCodeIcon className="size-6" />
                     PromptPay
                   </span>
@@ -320,14 +320,14 @@ export default async function () {
               </FormInput>
             </FormChoice>
             <FormChoice value="pp">
-              <div className="flex gap-2 w-full pb-2">
+              <div className="flex w-full gap-2 pb-2">
                 <Image
                   src={PromptpayImage}
                   alt="Promptpay QR Code"
-                  className="rounded max-w-32 shrink-0"
+                  className="max-w-32 shrink-0 rounded"
                 />
-                <div className="flex flex-col shrink-0 relative">
-                  <span className="font-bold text-sm">บัญชีรับโดเนท</span>
+                <div className="relative flex shrink-0 flex-col">
+                  <span className="text-sm font-bold">บัญชีรับโดเนท</span>
                   <span className="text-sm text-muted-foreground">
                     ผู้รับ: นาย พัชรพล พลพันธุ์
                   </span>

app/(ui)/donate/top/page.tsx

@@ -26,9 +26,9 @@ export default function Page() {
 
 function PageSkeleton() {
   return (
-    <div className="min-h-svh flex flex-col justify-center">
-      <div className="max-w-4xl w-full mx-auto flex flex-col gap-4 p-4">
-        <div className="flex justify-center items-end gap-4 mt-6">
+    <div className="flex min-h-svh flex-col justify-center">
+      <div className="mx-auto flex w-full max-w-4xl flex-col gap-4 p-4">
+        <div className="mt-6 flex items-end justify-center gap-4">
           <Skeleton className="h-36 w-36 rounded-xl" />
           <Skeleton className="h-48 w-36 rounded-xl" />
           <Skeleton className="h-32 w-36 rounded-xl" />
@@ -73,8 +73,8 @@ async function Content() {
     );
 
   return (
-    <div className="min-h-svh flex flex-col justify-center">
-      <div className="max-w-4xl mx-auto flex flex-col gap-4 p-4">
+    <div className="flex min-h-svh flex-col justify-center">
+      <div className="mx-auto flex max-w-4xl flex-col gap-4 p-4">
         <Podium data={podium} />
         <TopDonateTable data={list} />
       </div>

app/(ui)/donate/top/podium.tsx

@@ -36,7 +36,7 @@ export function Podium({ data }: { data: TopDonateRow[] }) {
   const order = [data[1], data[0], data[2]].filter(Boolean);
 
   return (
-    <div className="flex justify-center items-end gap-4 mt-6">
+    <div className="mt-6 flex items-end justify-center gap-4">
       {order.map((donor, index) => {
         const rank = index === 0 ? 1 : index === 1 ? 0 : 2;
         const s = styles[rank];
@@ -52,14 +52,14 @@ export function Podium({ data }: { data: TopDonateRow[] }) {
               )}
             </div>
             <Card
-              className={`${s.border} ${s.bg} ${s.height} w-36 flex flex-col items-center justify-end pb-0 backdrop-blur-md`}
+              className={`${s.border} ${s.bg} ${s.height} flex w-36 flex-col items-center justify-end pb-0 backdrop-blur-md`}
             >
               <CardContent className="flex flex-col items-center gap-2 p-4">
                 <Avatar className="size-10">
                   <AvatarImage src={donor.image} />
                   <AvatarFallback>{initial}</AvatarFallback>
                 </Avatar>
-                <span className="font-semibold text-sm truncate w-full text-center">
+                <span className="w-full truncate text-center text-sm font-semibold">
                   {donor.name}
                 </span>
                 <span className={`text-lg font-bold ${s.text}`}>

app/(ui)/donate/top/table.tsx

@@ -37,7 +37,7 @@ export function TopDonateTable({ data }: { data: TopDonateRow[] }) {
       columns={columns}
       data={data}
       emptyDescription="No donations yet."
-      className="w-full h-full max-h-[calc(100svh-264px)] overflow-y-auto backdrop-blur-md"
+      className="h-full max-h-[calc(100svh-264px)] w-full overflow-y-auto backdrop-blur-md"
     />
   );
 }