applications/drive/src/app/components/modals/DriveOnboardingV2Modal/Container.tsx

   1 import type { ReactNode } from 'react';
   2
   3 type Props = {
   4     title: string;
   5     subtitle: string;
   6     children: ReactNode;
   7     image?: string;
   8     rightContent?: ReactNode;
   9 };
  10 export const Container = ({ title, subtitle, children, image, rightContent }: Props) => {
  11     return (
  12         <div className="flex flex-column-reverse sm:flex-row mt-8 gap-2 flex-nowrap">
  13             <div className="sm:w-1/2 flex flex-column justify-center items-start grow-0">
  14                 <span className="text-uppercase color-primary">{subtitle}</span>
  15                 <h2 className="mt-4 text-bold text-4xl">{title}</h2>
  16                 {children}
  17             </div>
  18             <div className="sm:w-1/2 ratio-square flex items-center justify-center">
  19                 {image ? <img src={image} alt="" /> : null}
  20                 {rightContent}
  21             </div>
  22         </div>
  23     );
  24 };