From 5df9cf23026d1b1223c7de046f00abd0d3608c40 Mon Sep 17 00:00:00 2001
From: HsunPei Wang <garfieldduck@gmail.com>
Date: Sun, 27 Oct 2024 19:44:02 +0100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20:=20reuse=20the=20sticky?=
 =?UTF-8?q?=20container?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/grouped/StickyContainer.tsx    | 19 --------
 .../components/grouped/TrackedSection.tsx     |  2 +-
 apps/docs/components/video/StickyVideo.tsx    | 30 ++++++------
 apps/docs/pages/track_grouped_sections.mdx    |  5 +-
 packages/layout/src/components/index.ts       |  1 +
 .../src/components/sticky/StickyContainer.tsx | 48 +++++++++++++++++++
 .../sticky/StickyContainerTailwind.tsx        | 30 ++++++++++++
 .../layout/src/components/sticky/index.ts     |  2 +
 packages/layout/src/index.ts                  |  1 +
 9 files changed, 99 insertions(+), 39 deletions(-)
 delete mode 100644 apps/docs/components/grouped/StickyContainer.tsx
 create mode 100644 packages/layout/src/components/index.ts
 create mode 100644 packages/layout/src/components/sticky/StickyContainer.tsx
 create mode 100644 packages/layout/src/components/sticky/StickyContainerTailwind.tsx
 create mode 100644 packages/layout/src/components/sticky/index.ts

diff --git a/apps/docs/components/grouped/StickyContainer.tsx b/apps/docs/components/grouped/StickyContainer.tsx
deleted file mode 100644
index 0ae7488..0000000
--- a/apps/docs/components/grouped/StickyContainer.tsx
+++ /dev/null
@@ -1,19 +0,0 @@
-export interface StickyContainerProps {
-  /** Background sticky container */
-  children: React.ReactNode;
-
-  /** Overlaying content */
-  overlay?: React.ReactNode;
-}
-
-export const StickyContainer = ({ overlay, children }: StickyContainerProps) => {
-  return (
-    <div className="relative">
-      {/* Background */}
-      <div className="sticky top-0 pb-[100vh]">{children}</div>
-
-      {/* Overlay foreground content */}
-      <div className="relative -mt-[100vh]">{overlay}</div>
-    </div>
-  );
-};
diff --git a/apps/docs/components/grouped/TrackedSection.tsx b/apps/docs/components/grouped/TrackedSection.tsx
index 47503cb..b327031 100644
--- a/apps/docs/components/grouped/TrackedSection.tsx
+++ b/apps/docs/components/grouped/TrackedSection.tsx
@@ -15,7 +15,7 @@ export const TrackedSection = ({ className, sectionID }: TrackedSectionProps) =>
   return (
     <section
       ref={sectionRef}
-      className={`relative border-2 bg-opacity-10 p-10 pb-[50vh] drop-shadow-2xl dark:bg-opacity-10 ${className}`}
+      className={`border-2 bg-opacity-10 p-10 pb-[50vh] drop-shadow-2xl dark:bg-opacity-10 ${className}`}
     >
       <div className="absolute left-2 top-3.5">
         <span className="rounded-lg bg-white bg-opacity-60 p-2 text-slate-500 dark:bg-gray-950">
diff --git a/apps/docs/components/video/StickyVideo.tsx b/apps/docs/components/video/StickyVideo.tsx
index 76dd644..2247324 100644
--- a/apps/docs/components/video/StickyVideo.tsx
+++ b/apps/docs/components/video/StickyVideo.tsx
@@ -2,10 +2,9 @@ import { useRef } from 'react';
 
 import { useSectionScrollState } from '@react-scrollytelling/core';
 import { useResizeObserver } from '@react-scrollytelling/layout';
+import { StickyContainerTailwind } from '@react-scrollytelling/layout';
 import { Video } from '@react-scrollytelling/video';
 
-import { StickyContainer } from '../grouped/StickyContainer';
-
 export interface StickyVideoProps {
   src: string;
 }
@@ -18,19 +17,19 @@ export const StickyVideo = ({ src }: StickyVideoProps) => {
   const { scrolledRatio } = useSectionScrollState(sectionRef);
 
   return (
-    <StickyContainer
+    <StickyContainerTailwind
       overlay={
         <>
-          <section className="relative border-green-400" ref={sectionRef} style={{ height }}>
+          <section className="border-green-400" ref={sectionRef} style={{ height }}>
             {/* One video height of the empty space */}
           </section>
           <section
-            className="relative border-green-400 dark:border-green-700"
+            className="border-green-400 dark:border-green-700"
             ref={sectionRef}
             style={{ height }}
           >
             <div
-              className="rounded-full bg-emerald-200 bg-opacity-80 px-5 py-1 text-slate-800 backdrop-blur-sm dark:bg-emerald-950 dark:bg-opacity-80 dark:text-slate-200"
+              className="min-w-20 rounded-full bg-emerald-200 bg-opacity-80 px-5 py-1 text-slate-800 backdrop-blur-sm dark:bg-emerald-950 dark:bg-opacity-80 dark:text-slate-200"
               style={{ width: `${scrolledRatio * 100}%` }}
             >
               {Math.round(scrolledRatio * 100)}%
@@ -38,16 +37,15 @@ export const StickyVideo = ({ src }: StickyVideoProps) => {
           </section>
         </>
       }
+      backgroundRef={videoContainerRef}
     >
-      <div ref={videoContainerRef} className="absolute left-0 right-0 top-14 h-screen">
-        <Video
-          className="h-full w-full object-cover"
-          width={width}
-          height={height}
-          src={src}
-          ratio={scrolledRatio}
-        />
-      </div>
-    </StickyContainer>
+      <Video
+        className="h-full w-full object-cover"
+        width={width}
+        height={height}
+        src={src}
+        ratio={scrolledRatio}
+      />
+    </StickyContainerTailwind>
   );
 };
diff --git a/apps/docs/pages/track_grouped_sections.mdx b/apps/docs/pages/track_grouped_sections.mdx
index 86fa9a5..a9f3ecc 100644
--- a/apps/docs/pages/track_grouped_sections.mdx
+++ b/apps/docs/pages/track_grouped_sections.mdx
@@ -1,8 +1,8 @@
 import { TrackedSection } from '../components/grouped/TrackedSection';
-import { StickyContainer } from '../components/grouped/StickyContainer';
 import { ActiveSectionInfo } from '../components/grouped/ActiveSectionInfo';
 
 import { ScrollytellingProvider } from '@react-scrollytelling/grouped';
+import { StickyContainer } from '@react-scrollytelling/layout';
 
 To tell a story that spans multiple sections, for example, changing the background based on the section in view,
 multiple sections tracking tools of `react-scrollytelling` can help you achieve this.
@@ -145,9 +145,8 @@ You can replace the states with motion values from animation libraries like [rea
         </>
       }
     >
-      <div className="absolute left-0 right-0 top-0 h-screen">
+        {/* Background */}
         <ActiveSectionInfo />
-      </div>
     </StickyContainer>
   </ScrollytellingProvider>
 </div>
diff --git a/packages/layout/src/components/index.ts b/packages/layout/src/components/index.ts
new file mode 100644
index 0000000..7fa3183
--- /dev/null
+++ b/packages/layout/src/components/index.ts
@@ -0,0 +1 @@
+export * from './sticky';
diff --git a/packages/layout/src/components/sticky/StickyContainer.tsx b/packages/layout/src/components/sticky/StickyContainer.tsx
new file mode 100644
index 0000000..efcdd44
--- /dev/null
+++ b/packages/layout/src/components/sticky/StickyContainer.tsx
@@ -0,0 +1,48 @@
+export interface StickyContainerProps {
+  /** Background sticky container */
+  children: React.ReactNode;
+
+  /** Overlaying content */
+  overlay?: React.ReactNode;
+
+  /** Ref to the background container */
+  backgroundRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const StickyContainer = ({ overlay, children, backgroundRef }: StickyContainerProps) => {
+  return (
+    <div style={{ position: 'relative' }}>
+      {/* Background */}
+      <div
+        style={{
+          position: 'sticky',
+          top: 0,
+          paddingBottom: '100vh',
+        }}
+      >
+        <div
+          style={{
+            position: 'absolute',
+            left: 0,
+            right: 0,
+            top: 0,
+            height: '100vh',
+          }}
+          ref={backgroundRef}
+        >
+          {children}
+        </div>
+      </div>
+
+      {/* Overlay foreground content */}
+      <div
+        style={{
+          position: 'relative',
+          marginTop: '-100vh',
+        }}
+      >
+        {overlay}
+      </div>
+    </div>
+  );
+};
diff --git a/packages/layout/src/components/sticky/StickyContainerTailwind.tsx b/packages/layout/src/components/sticky/StickyContainerTailwind.tsx
new file mode 100644
index 0000000..2f8ed8b
--- /dev/null
+++ b/packages/layout/src/components/sticky/StickyContainerTailwind.tsx
@@ -0,0 +1,30 @@
+export interface StickyContainerTailwindProps {
+  /** Background sticky container */
+  children: React.ReactNode;
+
+  /** Overlaying content */
+  overlay?: React.ReactNode;
+
+  /** Ref to the background container */
+  backgroundRef?: React.RefObject<HTMLDivElement>;
+}
+
+export const StickyContainerTailwind = ({
+  overlay,
+  children,
+  backgroundRef,
+}: StickyContainerTailwindProps) => {
+  return (
+    <div className="relative">
+      {/* Background */}
+      <div className="sticky top-0 pb-[100vh]">
+        <div className="absolute left-0 right-0 top-0 h-screen" ref={backgroundRef}>
+          {children}
+        </div>
+      </div>
+
+      {/* Overlay foreground content */}
+      <div className="relative -mt-[100vh]">{overlay}</div>
+    </div>
+  );
+};
diff --git a/packages/layout/src/components/sticky/index.ts b/packages/layout/src/components/sticky/index.ts
new file mode 100644
index 0000000..e825b28
--- /dev/null
+++ b/packages/layout/src/components/sticky/index.ts
@@ -0,0 +1,2 @@
+export * from './StickyContainerTailwind';
+export * from './StickyContainer';
diff --git a/packages/layout/src/index.ts b/packages/layout/src/index.ts
index 4cc90d0..9330290 100644
--- a/packages/layout/src/index.ts
+++ b/packages/layout/src/index.ts
@@ -1 +1,2 @@
 export * from './hooks';
+export * from './components';