make donation component

app/main-form.tsx

@@ -22,6 +22,7 @@ import { ReducerMany, ReturnProps } from "@/lib/reducer";
 import { toByte } from "@/lib/size";
 import { toast } from "sonner";
 import UploadedList from "@/components/UploadedList";
+import Donation from "@/components/Donation";
 
 const schema = z.object({
   unit: z.enum(["kb", "mb"]),
@@ -114,6 +115,7 @@ export default function MainForm() {
   };
   return (
     <div className="xl:translate-y-32 grid xl:justify-center gap-1">
+      <Donation />
       <Form {...form}>
         <form onSubmit={form.handleSubmit(onSubmit)} onReset={onReset}>
           <Card className="xl:w-96">

components/Donation.tsx

@@ -0,0 +1,49 @@
+"use client";
+
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Button } from "./ui/button";
+import Image from "next/image";
+import { toast } from "sonner";
+
+export default function Donation() {
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button type="button" variant={"outline"} className="w-fit">
+          บริจาคค่าข้าว
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="md:w-fit xl:w-fit">
+        <DialogHeader>
+          <DialogTitle>QR Prompt Pay</DialogTitle>
+          <DialogDescription className="text-ellipsis">
+            รองรับทุกธนาคารและ E-Wallet (รวมถึง True Wallet)
+          </DialogDescription>
+        </DialogHeader>
+        <div className="w-fit">
+          <Image src={"/qr-prompt-pay.png"} width={400} height={400} alt="" />
+        </div>
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button
+              type="button"
+              variant={"outline"}
+              onClick={() => toast.success("ขอบพระคุณครับ 🙏")}
+            >
+              กินข้าวให้อร่อยนะ
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}

next.config.mjs

@@ -1,4 +1,8 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = { output: "export", compress: true };
+const nextConfig = {
+  output: "export",
+  compress: true,
+  images: { unoptimized: true },
+};
 
-export default nextConfig;
+export default nextConfig;