diff --git a/libs/ui/src/index.ts b/libs/ui/src/index.ts index 62e0c08e1..665a5d8d1 100644 --- a/libs/ui/src/index.ts +++ b/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'; diff --git a/libs/ui/src/lib/sticky-footer-bar/index.tsx b/libs/ui/src/lib/sticky-footer-bar/index.tsx new file mode 100644 index 000000000..48c96f6ab --- /dev/null +++ b/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 ( +
+
+ {children} +
+
+ ); +}; + +export default StickyFooterBar; diff --git a/libs/ui/src/lib/sticky-footer-bar/sticky-footer-bar.module.css b/libs/ui/src/lib/sticky-footer-bar/sticky-footer-bar.module.css new file mode 100644 index 000000000..7067c99f1 --- /dev/null +++ b/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; +}