55 lines
2.1 KiB
TypeScript
55 lines
2.1 KiB
TypeScript
import { useState } from "react";
|
|
import BackButton from "~/components/back-button";
|
|
import PageContainer from "~/components/page-container";
|
|
import { Separator } from "~/components/ui/separator";
|
|
import FirstSection from "./components/first-section";
|
|
import SecondSection from "./components/second-section";
|
|
|
|
export default function DetailTarikSaldoPage() {
|
|
const [phase, setPhase] = useState(1);
|
|
function handleChangePhase() {
|
|
setPhase((prev) => (prev === 1 ? 2 : 1));
|
|
}
|
|
return (
|
|
<PageContainer>
|
|
<div className="space-y-8">
|
|
<div className="flex items-center gap-3">
|
|
<BackButton to="/app/dompet/" />
|
|
<h2 className="~text-base/2xl font-bold tracking-tight">Penarikan Saldo</h2>
|
|
</div>
|
|
<div className="space-y-3 overflow-hidden rounded-md bg-white p-5 shadow-md">
|
|
<div className="flex">
|
|
<button
|
|
type="button"
|
|
className="group flex cursor-pointer flex-col gap-2"
|
|
onClick={handleChangePhase}
|
|
>
|
|
<span
|
|
className={`px-5 font-medium ${phase === 1 ? "text-primary" : "text-gray-600 group-hover:text-primary"}`}
|
|
>
|
|
Tarik Saldo
|
|
</span>
|
|
<Separator className={`${phase === 1 ? "h-[2px] bg-primary" : "hidden"}`} />
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="group flex cursor-pointer flex-col gap-2"
|
|
onClick={handleChangePhase}
|
|
>
|
|
<span
|
|
className={`px-5 font-medium ${phase === 2 ? "text-primary" : "text-gray-600 group-hover:text-primary"}`}
|
|
>
|
|
Riwayat transfer Penarikan
|
|
</span>
|
|
<Separator className={`${phase === 2 ? "h-[2px] bg-primary" : "hidden"}`} />
|
|
</button>
|
|
</div>
|
|
<div className="flex flex-col gap-6 xl:flex-row">
|
|
<div className="h-fit flex-1">{phase === 1 ? <FirstSection /> : <SecondSection />}</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PageContainer>
|
|
);
|
|
}
|