106 lines
3.8 KiB
TypeScript
106 lines
3.8 KiB
TypeScript
import Footer from '@/components/footer/FooterAdmin';
|
|
import Navbar from '@/components/navbar/NavbarAdmin';
|
|
import { routes } from '@/components/routes';
|
|
import Sidebar from '@/components/sidebar/Sidebar';
|
|
import { Database } from '@/types_db';
|
|
import { getActiveRoute } from '@/utils/navigation';
|
|
import { Box, useDisclosure } from '@chakra-ui/react';
|
|
import { User } from '@supabase/supabase-js';
|
|
import { usePathname } from 'next/navigation';
|
|
import {
|
|
PlanContext,
|
|
OpenContext,
|
|
ProductsContext,
|
|
SubscriptionContext,
|
|
UserContext,
|
|
UserDetailsContext,
|
|
ApiKeyContext
|
|
} from '@/contexts/layout';
|
|
import React from 'react';
|
|
|
|
type Subscription = Database['public']['Tables']['subscriptions']['Row'];
|
|
type Product = Database['public']['Tables']['products']['Row'];
|
|
type Price = Database['public']['Tables']['prices']['Row'];
|
|
interface ProductWithPrices extends Product {
|
|
prices: Price[];
|
|
}
|
|
interface PriceWithProduct extends Price {
|
|
products: Product | null;
|
|
}
|
|
interface SubscriptionWithProduct extends Subscription {
|
|
prices: PriceWithProduct | null;
|
|
}
|
|
interface Props {
|
|
children: React.ReactNode;
|
|
title: string;
|
|
description: string;
|
|
user: User | null | undefined;
|
|
products: ProductWithPrices[];
|
|
subscription: SubscriptionWithProduct | null;
|
|
userDetails: { [x: string]: any } | null;
|
|
}
|
|
|
|
const DashboardLayout: React.FC<Props> = (props: Props) => {
|
|
const pathname = usePathname();
|
|
const [open, setOpen] = React.useState(false);
|
|
const [plan, setPlan] = React.useState({
|
|
product: 'prod_QfhYC6AAtI5IKW',
|
|
price: 'price_1PoM9GDWNoHJSR0zmwpicH8y'
|
|
});
|
|
const [apiKey, setApiKey] = React.useState('default');
|
|
const { isOpen, onOpen, onClose } = useDisclosure();
|
|
|
|
return (
|
|
<UserContext.Provider value={props.user}>
|
|
<UserDetailsContext.Provider value={props.user}>
|
|
<OpenContext.Provider value={{ open, setOpen }}>
|
|
<PlanContext.Provider value={{ plan, setPlan }}>
|
|
<ProductsContext.Provider value={props.products}>
|
|
<SubscriptionContext.Provider value={props.subscription}>
|
|
<ApiKeyContext.Provider value={{ apiKey, setApiKey }}>
|
|
<Box>
|
|
<Sidebar routes={routes} />
|
|
<Box
|
|
pt={{ base: '70px', md: '80px' }}
|
|
float="right"
|
|
minHeight="100vh"
|
|
height="100%"
|
|
overflow="auto"
|
|
position="relative"
|
|
maxHeight="100%"
|
|
w={{ base: '100%', xl: 'calc( 100% - 290px )' }}
|
|
maxWidth={{ base: '100%', xl: 'calc( 100% - 290px )' }}
|
|
transition="all 0.33s cubic-bezier(0.685, 0.0473, 0.346, 1)"
|
|
transitionDuration=".2s, .2s, .35s"
|
|
transitionProperty="top, bottom, width"
|
|
transitionTimingFunction="linear, linear, ease"
|
|
>
|
|
<Navbar
|
|
onOpen={onOpen}
|
|
logoText={'Horizon UI Boilerplate'}
|
|
userDetails={props.userDetails}
|
|
brandText={getActiveRoute(routes, pathname)}
|
|
/>
|
|
<Box
|
|
mx="auto"
|
|
p={{ base: '20px', md: '30px' }}
|
|
pe="20px"
|
|
minH="100vh"
|
|
>
|
|
{props.children}
|
|
</Box>
|
|
<Footer />
|
|
</Box>
|
|
</Box>
|
|
</ApiKeyContext.Provider>
|
|
</SubscriptionContext.Provider>
|
|
</ProductsContext.Provider>
|
|
</PlanContext.Provider>
|
|
</OpenContext.Provider>
|
|
</UserDetailsContext.Provider>
|
|
</UserContext.Provider>
|
|
);
|
|
};
|
|
|
|
export default DashboardLayout;
|