Update pages/type_text.py

pages/type_text.py

@@ -9,6 +9,101 @@ import time
 import os
 os.getenv("HF_TOKEN") 
 
+import streamlit as st
+
+# 0. If stStatusWidget is a custom component, make sure it's defined or imported.
+# For demonstration, let's create a placeholder function for stStatusWidget.
+# Replace this with your actual stStatusWidget or the widgets you want to use.
+def stStatusWidget():
+    col1, col2, col3 = st.columns(3)
+    with col1:
+        st.metric("Temperature", "25 °C", "1.2 °C")
+    with col2:
+        st.metric("Humidity", "60%", "-5%")
+    with col3:
+        st.info("System Status: OK")
+
+# 1. Define the CSS for the sticky header
+# Note: The background color is important so content doesn't show through.
+# You might want to adjust it to match your Streamlit theme.
+# Streamlit's default light theme background is #f0f2f6 or white.
+# Streamlit's default dark theme background is #0e1117.
+# Using a generic white/light gray is often a safe bet.
+sticky_header_css = """
+<style>
+    div[data-testid="stVerticalBlock"] div:has(div.sticky-header) {
+        position: sticky;
+        top: 2.875rem; /* Adjust this value if you have a page icon or title taking up space */
+        background-color: white;
+        z-index: 999;
+        box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1); /* Optional: for a slight shadow */
+        padding-bottom: 0.5rem; /* Optional: for some spacing */
+    }
+
+    .sticky-header {
+        /* You can add additional styling for the header itself if needed */
+        /* border-bottom: 1px solid #e6e6e6; */ /* Optional: a bottom border */
+    }
+
+    /* Nudge the actual page content down a bit if the sticky header is tall */
+    /* This is optional and depends on your header's height and content */
+    /*
+    div[data-testid="stAppViewContainer"] > section:first-of-type {
+        padding-top: 5rem; /* Adjust this based on your header's height */
+    }
+    */
+
+    /*
+    Alternative for top positioning if you want it absolutely at the top,
+    but this might conflict with Streamlit's own header bar if you're using st.set_page_config with a title/icon.
+    If you're not, or want to cover it, top: 0; might be better.
+    */
+    /*
+    div[data-testid="stVerticalBlock"] div:has(div.sticky-header) {
+        position: sticky;
+        top: 0; // Use this if you have no page title/icon in Streamlit's native header bar
+        background-color: white;
+        z-index: 999;
+    }
+    */
+</style>
+"""
+st.markdown(sticky_header_css, unsafe_allow_html=True)
+
+# 2. Create the header content within a div that has the 'sticky-header' class.
+# We use st.markdown to open the div, then Streamlit widgets, then st.markdown to close.
+
+st.markdown('<div class="sticky-header">', unsafe_allow_html=True)
+
+# --- Your Header Content ---
+# st.title("My Application Dashboard") # You can have a title
+# st.markdown("---") # Optional separator
+
+# Example using columns for layout
+header_cols = st.columns([3, 2]) # Adjust ratios as needed
+with header_cols[0]:
+    st.subheader("Dashboard Overview 📊")
+    # You could put a logo here: st.image("logo.png", width=100)
+with header_cols[1]:
+    # Call your stStatusWidget or place its constituent widgets here
+    stStatusWidget() # Our placeholder status widget
+
+st.markdown('</div>', unsafe_allow_html=True)
+
+# 3. Add the rest of your page content to demonstrate scrolling
+st.markdown("## Main Content Area")
+st.write("Scroll down to see the header stick.")
+
+for i in range(50):
+    st.write(f"Dummy content line {i+1} to make the page scrollable.")
+    if (i+1) % 10 == 0:
+        st.image("https://streamlit.io/images/brand/streamlit-logo-secondary-colormark-darktext.png", width=300)
+
+st.markdown("---")
+st.write("End of content.")
+
+
+
 
 #hide_streamlit_style = """
 #        <style>