1export default async function BankDetailsPage() {2 return (3 <Suspense>4 <FormLayout5 heading="Bank Details"6 description="Add/Update the details of the bank"7 sidemenu={[8 { title: "General", query: "general" },9 { title: "Operations", query: "operations" },10 ]}11 >12 <BankForm />13 </FormLayout>14 </Suspense>15 );16}1718export function FormLayout({19 children,20 heading,21 description,22 sidemenu = [],23}: FormLayoutProps) {24 return (25 <div className="space-y-6 p-10 pb-16">26 <div className="space-y-0.5">27 <h2 className="text-2xl font-bold tracking-tight">{heading}</h2>28 <p className="text-muted-foreground">{description}</p>29 </div>30 <Separator className="my-6" />31 <div className="flex flex-col space-y-8 lg:flex-row lg:space-x-12 lg:space-y-0">32 <aside className="-mx-4 lg:w-1/5">33 <Suspense>34 <FormSideMenu sidemenu={sidemenu} />35 </Suspense>36 </aside>37 <div className="flex-1 lg:max-w-2xl">{children}</div>38 </div>39 </div>40 );41}42434445export default function FormSideMenu({46 className,47 sidemenu,48 ...props49}: FormSideMenuProps) {50 const pathname = usePathname();51 const searchParams = useSearchParams();5253 const query = searchParams.get("tab");5455 return (56 <nav57 className={cn(58 "flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1",59 className60 )}61 {...props}62 >63 {sidemenu.map((item) => (64 <Link65 key={item.query}66 href={pathname + "?tab=" + item.query}67 className={cn(68 buttonVariants({ variant: "ghost" }),69 query === item.query70 ? "bg-muted hover:bg-muted"71 : "hover:bg-transparent hover:underline",72 "justify-start"73 )}74 >75 {item.title}76 </Link>77 ))}78 </nav>79 );80}81
