InsufficientCreditsModal.tsx

[SSEMUGABI JAMES]

I HAVE FAILED TO FIGURE OUT WHAT COULD BE THE ISSUE .When i try to deploy to versel i get an error .Below is my code and error
CODE
"use client";

import Image from "next/image";
import { useRouter } from "next/navigation";

import {
AlertDialog,
AlertDialogAction,
AlertDialogCancel,
AlertDialogContent,
AlertDialogDescription,
AlertDialogFooter,
AlertDialogHeader,
AlertDialogTitle,
} from "@/components/ui/alert-dialog";

export const InsufficientCreditsModal = () => {
const router = useRouter();

return (

Insufficient Credits

<AlertDialogCancel
className="border-0 p-0 hover:bg-transparent"
onClick={() => router.push("/profile")}
>

      <Image
        src="/assets/images/stacked-coins.png"
        alt="credit coins"
        width={462}
        height={122}
      />

      <AlertDialogTitle className="p-24-bold text-dark-600">
        Oops.... Looks like you&#39;ve run out of free credits!
      </AlertDialogTitle>

      <AlertDialogDescription className="p-16-regular py-3">
        No worries, though - you can keep enjoying our services by grabbing
        more credits.
      </AlertDialogDescription>
    </AlertDialogHeader>
    <AlertDialogFooter>
      <AlertDialogCancel
        className="button w-full bg-purple-100 text-dark-400"
        onClick={() => router.push("/profile")}
      >
        No, Cancel
      </AlertDialogCancel>
      <AlertDialogAction
        className="button w-full bg-purple-gradient  bg-cover"
        onClick={() => router.push("/credits")}
      >
        Yes, Proceed
      </AlertDialogAction>
    </AlertDialogFooter>
  </AlertDialogContent>
</AlertDialog>

);
};

Error
[10:18:58.724] Running build in Washington, D.C., USA (East) – iad1
[10:18:58.909] Cloning github.com/ssemugabijames/imaginary (Branch: master, Commit: 4dc14f2)
[10:18:59.707] Cloning completed: 794.569ms
[10:19:04.698] Restored build cache
[10:19:04.921] Running "vercel build"
[10:19:05.805] Vercel CLI 33.7.1
[10:19:06.610] Installing dependencies...
[10:19:10.355]
[10:19:10.355] added 33 packages in 3s
[10:19:10.355]
[10:19:10.355] 140 packages are looking for funding
[10:19:10.355] run npm fund for details
[10:19:10.372] Detected Next.js version: 14.1.0
[10:19:10.377] Detected package-lock.json generated by npm 7+
[10:19:10.377] Running "npm run build"
[10:19:12.744]
[10:19:12.744] > imaginify@0.1.0 build
[10:19:12.744] > next build
[10:19:12.744]
[10:19:13.425] ▲ Next.js 14.1.0
[10:19:13.426]
[10:19:13.501] Creating an optimized production build ...
[10:19:24.551] Failed to compile.
[10:19:24.551]
[10:19:24.552] ./components/shared/InsufficientCreditsModal.ts
[10:19:24.552] Error:
[10:19:24.552] �[31mx�[0m Expected '>', got 'defaultOpen'
[10:19:24.552] ,-[�[36;1;4m/vercel/path0/components/shared/InsufficientCreditsModal.ts�[0m:18:1]
[10:19:24.552] �[2m18�[0m | const router = useRouter();
[10:19:24.552] �[2m19�[0m |
[10:19:24.552] �[2m20�[0m | return (
[10:19:24.553] �[2m21�[0m |
[10:19:24.553] : �[31;1m ^^^^^^^^^^^�[0m
[10:19:24.553] �[2m22�[0m |
[10:19:24.553] �[2m23�[0m |
[10:19:24.553] �[2m24�[0m |

[10:19:24.553] `----
[10:19:24.553]
[10:19:24.553] Caused by:
[10:19:24.553] Syntax Error
[10:19:24.553]
[10:19:24.553] Import trace for requested module:
[10:19:24.553] ./components/shared/InsufficientCreditsModal.ts
[10:19:24.553] ./components/shared/TransformationForm.tsx
[10:19:24.553]
[10:19:24.562]
[10:19:24.562] > Build failed because of webpack errors
[10:19:24.579] Error: Command "npm run build" exited with 1
[10:19:24.845]