mirror of
https://github.com/i701/sarlink-portal.git
synced 2025-07-10 11:06:30 +00:00
All checks were successful
Build and Push Docker Images / Build and Push Docker Images (push) Successful in 5m31s
56 lines
1.8 KiB
TypeScript
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>
|
|
);
|
|
} |