please convert this following code for shadcn

"use client"; import { useEffect, useState } from "react"; import { useInitData, useLaunchParams } from "@telegram-apps/sdk-react"; import { connect } from "../utils/phantom"; import Image from "next/image"; import { WalletHomepage } from "@/components/wallet-homepage";

export default function Home() { const initData = useInitData(true); const launchParams = useLaunchParams(true); const [authStatus, setAuthStatus] = useState("");

useEffect(() => { // Check for auth status in launch params if (launchParams && launchParams.startParam) { if (launchParams.startParam.startsWith("auth_success_")) { setAuthStatus("success"); } else if (launchParams.startParam.startsWith("auth_failure_")) { setAuthStatus("failure"); } else if (launchParams.startParam.startsWith("auth_error_")) { setAuthStatus("error"); } } }, [launchParams]);

const handleAuthenticate = () => { let url = connect(); window.open(url, "_blank"); };

// return ( // WalletHomepage() // )

return ( <main className="flex min-h-screen flex-col items-center justify-center p-6 bg-gray-100"> <div className="bg-white rounded-lg shadow-xl p-8 max-w-md w-full"> <h1 className="text-3xl font-bold mb-6 text-center text-gray-800"> Telegram Phantom Auth </h1>

    {authStatus && (
      <div
        className={`mb-4 text-center ${
          authStatus === "success"
            ? "text-green-600"
            : authStatus === "failure"
            ? "text-red-600"
            : "text-yellow-600"
        }`}
      >
        {authStatus === "success" && (
          <p>Successfully authenticated with Phantom!</p>
        )}
        {authStatus === "failure" && (
          <p>Authentication failed. Please try again.</p>
        )}
        {authStatus === "error" && (
          <p>
            An error occurred during authentication. Please try again later.
          </p>
        )}
      </div>
    )}

    {initData && initData.user && (
      <div className="mb-6 text-center">
        <div className="mb-4 flex justify-center">
          <Image
            src={initData.user.photoUrl || "/default-avatar.png"}
            width={100}
            height={100}
            alt="User avatar"
            className="rounded-full border-4 border-blue-500"
          />
        </div>
        <p className="text-xl font-semibold text-gray-700 mb-2">
          Welcome, {initData.user.firstName}!
        </p>
        <p className="text-sm text-gray-600 mb-1">
          @{initData.user.username || "N/A"}
        </p>
        <p className="text-sm text-gray-600 mb-1">
          Telegram ID: {initData.user.id}
        </p>
        <p className="text-sm text-gray-600">
          {initData.user.isBot ? "Bot Account" : "User Account"}
        </p>
      </div>
    )}

    {authStatus !== "success" && (
      <button
        onClick={handleAuthenticate}
        className="w-full bg-blue-500 hover:bg-blue-600 text-white font-bold py-3 px-4 rounded-lg transition duration-300 ease-in-out transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50"
      >
        Authenticate with Phantom
      </button>
    )}
  </div>
</main>

); }