yoginth.com
Hey is a decentralized and permissionless social media app built with Lens Protocol 馃尶
1import type { ReactNode } from "react";
2import { memo } from "react";
3import MetaTags from "@/components/Common/MetaTags";
4import SignupButton from "@/components/Shared/Navbar/SignupButton";
5import cn from "@/helpers/cn";
6import { useAccountStore } from "@/store/persisted/useAccountStore";
7import LoginButton from "./LoginButton";
8import Search from "./Search";
9import Sidebar from "./Sidebar";
10
11interface AuthButtonsProps {
12 className?: string;
13}
14
15const AuthButtons = ({ className }: AuthButtonsProps) => {
16 const { currentAccount } = useAccountStore();
17
18 if (currentAccount) {
19 return null;
20 }
21
22 return (
23 <div className={cn("flex items-center gap-x-2", className)}>
24 <SignupButton className="w-full" />
25 <LoginButton className="w-full" />
26 </div>
27 );
28};
29
30interface PageLayoutProps {
31 title?: string;
32 description?: string;
33 children: ReactNode;
34 sidebar?: ReactNode;
35 hideSearch?: boolean;
36 zeroTopMargin?: boolean;
37}
38
39const PageLayout = ({
40 title,
41 children,
42 description,
43 sidebar = <Sidebar />,
44 hideSearch = false,
45 zeroTopMargin = false
46}: PageLayoutProps) => {
47 return (
48 <>
49 <MetaTags description={description} title={title} />
50 <div
51 className={cn("mt-5 mb-16 flex-1 space-y-5 md:mb-5", {
52 "mt-0 md:mt-5": zeroTopMargin
53 })}
54 >
55 <AuthButtons
56 className={cn(
57 { "mt-5": zeroTopMargin },
58 "w-full md:w-[22.5rem]",
59 "ml-auto px-5 md:px-0 lg:hidden"
60 )}
61 />
62 {children}
63 </div>
64 <aside className="no-scrollbar sticky top-5 mt-5 hidden max-h-screen w-[22.5rem] shrink-0 flex-col gap-y-5 overflow-y-auto lg:flex">
65 <AuthButtons />
66 {!hideSearch && <Search />}
67 {sidebar}
68 </aside>
69 </>
70 );
71};
72
73export default memo(PageLayout);