export default function Page(){
  return (
    <form
      className='grid   gap-2'
      action={async (data: FormData) => {
        "use server";
        console.log("submitting form");
        await new Promise((resolve) => setTimeout(resolve, 200));
        redirect(
          `/server-component/form?username=${data.get("username")?.toString()}`
        );
      }}
    >
      <label className='flex items-center'>
        <div className='px-2 w-[100px]'>用户名：</div>
        <input type='text' name='username' className='input' />
      </label>
      <label className='flex items-center'>
        <div className='px-2 w-[100px]'>密码：</div>
        <input type='password' name='password' className='input' />
      </label>
      {username && username.length > 0 && <div>提交数据：{username}</div>}
      <button data-loading='false' className='btn' type='submit'>
        提交
      </button>
    </form>
  );
};