Files
cal.diy/packages/ui/v2/core/layouts/AppsLayout.tsx
T
f1b92c49fc App Store Search (#5704)
Co-authored-by: Alex van Andel <me@alexvanandel.com>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
Co-authored-by: Peer Richelsen <peer@cal.com>
2022-11-30 20:51:44 +00:00

36 lines
1.1 KiB
TypeScript

import React, { ComponentProps } from "react";
import Shell from "../Shell";
import type { HorizontalTabItemProps } from "../navigation/tabs/HorizontalTabItem";
import HorizontalTabs from "../navigation/tabs/HorizontalTabs";
const tabs: HorizontalTabItemProps[] = [
{
name: "app_store",
href: "/apps",
},
{
name: "installed_apps",
href: "/apps/installed",
},
];
type AppsLayoutProps = {
children: React.ReactNode;
actions?: (className?: string) => JSX.Element;
} & Omit<ComponentProps<typeof Shell>, "actions">;
export default function AppsLayout({ children, actions, ...rest }: AppsLayoutProps) {
return (
<Shell {...rest} actions={actions?.("hidden sm:block")}>
<div className="flex flex-col xl:flex-row">
<div className="block lg:hidden">
<HorizontalTabs tabs={tabs} actions={actions?.("ml-6 mr-4 mt-3 block sm:hidden")} />
</div>
<main className="w-full">{children}</main>
</div>
</Shell>
);
}
export const getLayout = (page: React.ReactElement) => <AppsLayout>{page}</AppsLayout>;