applications/drive/src/app/components/SharedPage/Layout/SharedPageLayout.tsx

   1 import React from 'react';
   2
   3 import { c } from 'ttag';
   4
   5 import { ButtonLike } from '@proton/atoms';
   6 import { Header, MainLogo, UnAuthenticated, UnAuthenticatedAppsDropdown, useConfig } from '@proton/components';
   7 import Footer from '@proton/components/components/footer/Footer';
   8 import { getAppHref, getAppName } from '@proton/shared/lib/apps/helper';
   9 import { APPS, DRIVE_SHORT_APP_NAME } from '@proton/shared/lib/constants';
  10 import { DRIVE_PRICING_PAGE } from '@proton/shared/lib/drive/urls';
  11 import clsx from '@proton/utils/clsx';
  12
  13 import { usePublicSessionUser } from '../../../store';
  14 import { UserInfo } from './UserInfo';
  15
  16 import './Layout.scss';
  17
  18 interface Props {
  19     FooterComponent?: React.ReactNode;
  20     children: React.ReactNode;
  21     className?: string;
  22     partialView?: boolean;
  23 }
  24
  25 export default function SharedPageLayout({ FooterComponent, children, className, partialView }: Props) {
  26     const { APP_NAME } = useConfig();
  27
  28     const { user, localID } = usePublicSessionUser();
  29
  30     const containerClassname = clsx([
  31         'shared-page-layout-bg flex flex-nowrap flex-column h-full overflow-auto relative',
  32         className,
  33     ]);
  34
  35     return (
  36         <UnAuthenticated>
  37             <div className={containerClassname}>
  38                 {!partialView && (
  39                     <Header className="header--wrap shadow-norm *:min-size-auto items-center h-auto">
  40                         <h1 className="sr-only">{getAppName(APP_NAME)}</h1>
  41                         <div className="logo-container p-0 md:p-4 flex justify-space-between items-center flex-nowrap w-auto">
  42                             <MainLogo to="/" reloadDocument />
  43                             <div className="hidden md:block">
  44                                 <UnAuthenticatedAppsDropdown reloadDocument />
  45                             </div>
  46                         </div>
  47
  48                         <div className="flex justify-end flex-nowrap items-center flex-1 self-center my-auto">
  49                             {!!user ? (
  50                                 <>
  51                                     <ButtonLike
  52                                         className="w-auto mr-4"
  53                                         color="norm"
  54                                         shape="outline"
  55                                         as="a"
  56                                         href={getAppHref('/', APPS.PROTONDRIVE, localID)}
  57                                         target="_blank"
  58                                     >
  59                                         {c('Action').t`Go to ${DRIVE_SHORT_APP_NAME}`}
  60                                     </ButtonLike>
  61                                     <UserInfo user={user} />
  62                                 </>
  63                             ) : (
  64                                 <ButtonLike
  65                                     className="w-full md:w-auto"
  66                                     color="norm"
  67                                     shape="ghost"
  68                                     as="a"
  69                                     href={DRIVE_PRICING_PAGE}
  70                                     target="_blank"
  71                                 >
  72                                     {c('Action').t`Create free account`}
  73                                 </ButtonLike>
  74                             )}
  75                         </div>
  76                     </Header>
  77                 )}
  78                 <main
  79                     className={clsx(
  80                         'shared-page-layout-container w-full flex flex-nowrap flex-column md:flex-row flex-1 px-4',
  81                         partialView ? 'md:px-5' : 'md:px-10'
  82                     )}
  83                 >
  84                     <div className="flex-1 mb-4 md:mb-0 flex flex-column flex-nowrap">{children}</div>
  85                 </main>
  86                 <Footer className="justify-space-between items-center p-0 mt-6 md:mt-0">{FooterComponent}</Footer>
  87             </div>
  88         </UnAuthenticated>
  89     );
  90 }