Files
sarlink-portal/components/account-information.tsx
i701 fa12cd74d7
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m31s
refactor: use single seperate AccountInfomation component and integrate it into DevicesToPay and TopupToPay components 🔨
2025-07-08 21:09:17 +05:00

56 lines
1.8 KiB
TypeScript

"use client"
import { Clipboard, ClipboardCheck } from "lucide-react";
import { useState } from "react";
import { toast } from "sonner";
import { Button } from "./ui/button";
export function AccountInfomation({
accountNo,
accName,
}: {
accountNo: string;
accName: string;
}) {
const [accNo, setAccNo] = useState(false);
return (
<div className="justify-center items-center border my-4 flex flex-col gap-2 p-2 rounded-md">
<h6 className="title-bg uppercase p-2 border rounded w-full font-semibold">
Account Information
</h6>
<div className="border justify-center flex flex-col items-center bg-white/10 w-full p-2 rounded">
<div className="text-sm font-semibold">Account Name</div>
<span>{accName}</span>
</div>
<div className="border flex justify-between items-center gap-2 w-full p-2 rounded">
<div className="flex flex-col items-center justify-center w-full">
<p className="text-sm font-semibold">Account No</p>
<span>{accountNo}</span>
<Button
onClick={() => {
setTimeout(() => {
setAccNo(true);
navigator.clipboard.writeText(accountNo);
}, 2000);
toast.success("Account number copied!");
setAccNo((prev) => !prev);
}}
className="mt-2 w-full"
variant={"secondary"}
>
{accNo ? (
<div className="flex items-center gap-2">
<span>Copy Account Number</span>
<Clipboard />
</div>
) : (
<div className="flex items-center gap-2">
<span>Copy Account Number</span>
<ClipboardCheck color="green" />
</div>
)}
</Button>
</div>
</div>
</div>
);
}