feat: sticky footer bar

libs/ui/src/index.ts

@@ -36,6 +36,7 @@ export * from './lib/search-hits-page-layout';
 export * from './lib/select';
 export * from './lib/service-messages';
 export * from './lib/spinner';
+export * from './lib/sticky-footer-bar';
 export * from './lib/tag';
 export * from './lib/textarea-with-prefix';
 export * from './lib/title-with-tag';

libs/ui/src/lib/sticky-footer-bar/index.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react';
+import classNames from 'classnames';
+import styles from './sticky-footer-bar.module.css';
+
+const StickyFooterBar = ({ children }: PropsWithChildren) => {
+  return (
+    <div className={styles.stickyFooterBar}>
+      <div className={classNames('container', styles.stickyFooterContent)}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default StickyFooterBar;

libs/ui/src/lib/sticky-footer-bar/sticky-footer-bar.module.css

@@ -0,0 +1,16 @@
+.stickyFooterBar {
+  position: sticky;
+  bottom: 0px;
+  background-color: #fff;
+  border-top: 1px solid rgb(230, 230, 230);
+  box-shadow: #969ba0 0px 0px 10px -5px;
+  z-index: 10;
+}
+
+.stickyFooterContent {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  padding: 2rem 1rem;
+}