first commit

common/resources/client/ui/overlays/dialog/dialog-footer.tsx

@@ -0,0 +1,43 @@
+import React, {ReactNode} from 'react';
+import clsx from 'clsx';
+import {DialogSize} from './dialog';
+
+interface DialogFooterProps {
+  children: ReactNode;
+  startAction?: ReactNode;
+  className?: string;
+  dividerTop?: boolean;
+  size?: DialogSize;
+  padding?: string;
+}
+export function DialogFooter(props: DialogFooterProps) {
+  const {children, startAction, className, dividerTop, padding, size} = props;
+
+  return (
+    <div
+      className={clsx(
+        className,
+        dividerTop && 'border-t',
+        getPadding(props),
+        'flex items-center gap-10 flex-shrink-0'
+      )}
+    >
+      <div>{startAction}</div>
+      <div className="ml-auto flex items-center gap-10">{children}</div>
+    </div>
+  );
+}
+
+function getPadding({padding, size}: DialogFooterProps) {
+  if (padding) {
+    return padding;
+  }
+  switch (size) {
+    case 'xs':
+      return 'p-14';
+    case 'sm':
+      return 'p-18';
+    default:
+      return 'px-24 py-20';
+  }
+}