From 2d3ab087245d61d72bf03ef3bbe6cbc3885a8468 Mon Sep 17 00:00:00 2001
From: Peter Zimon <peter.zimon@gmail.com>
Date: Fri, 9 Jun 2023 14:29:39 +0200
Subject: [PATCH] Experimenting with sticky footers in AdminX

refs. https://github.com/TryGhost/Team/issues/3354
---
 .../experimental/BlurryStickyFooter.tsx       | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)
 create mode 100644 ghost/admin-x-settings/src/admin-x-ds/experimental/BlurryStickyFooter.tsx

diff --git a/ghost/admin-x-settings/src/admin-x-ds/experimental/BlurryStickyFooter.tsx b/ghost/admin-x-settings/src/admin-x-ds/experimental/BlurryStickyFooter.tsx
new file mode 100644
index 0000000000..d95a03230b
--- /dev/null
+++ b/ghost/admin-x-settings/src/admin-x-ds/experimental/BlurryStickyFooter.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import clsx from 'clsx';
+
+interface StickyFooterProps {
+    shiftY?: string;
+    children?: React.ReactNode;
+}
+
+const BlurryStickyFooter: React.FC<StickyFooterProps> = ({
+    shiftY,
+    children
+}) => {
+    const containerClasses = clsx(
+        'w-100 sticky z-[9997] m-0 box-border p-0',
+        'backdrop-blur',
+        'bg-[rgba(255,255,255,0.4)]'
+    );
+    const containerBottom = shiftY ? `calc(${shiftY})` : '0';
+    const containerHeight = `82px`;
+
+    const contentClasses = clsx(
+        `sticky z-[9999] flex items-center justify-between`,
+        'h-[96px]'
+    );
+    const contentBottom = '0';
+    const contentHeight = `82px`;
+
+    return (
+        <>
+            <div className={containerClasses}
+                style={{
+                    bottom: containerBottom,
+                    height: containerHeight
+                }}
+            >
+                <div className={contentClasses}
+                    style={{
+                        bottom: contentBottom,
+                        height: contentHeight
+                    }}
+                >
+                    {children}
+                </div>
+            </div>
+        </>
+    );
+};
+
+export default BlurryStickyFooter;
\ No newline at end of file