From b5d4410dca2311d01b97da84509db0bf1fcd0575 Mon Sep 17 00:00:00 2001
From: DarkSky <darksky2048@gmail.com>
Date: Tue, 9 Aug 2022 19:31:08 +0800
Subject: [PATCH] feat: tips bar

---
 .../layout/src/header/LayoutHeader.tsx        | 31 ++++++++++++++++++-
 1 file changed, 30 insertions(+), 1 deletion(-)

diff --git a/libs/components/layout/src/header/LayoutHeader.tsx b/libs/components/layout/src/header/LayoutHeader.tsx
index 0adf0546ed..ccf6497642 100644
--- a/libs/components/layout/src/header/LayoutHeader.tsx
+++ b/libs/components/layout/src/header/LayoutHeader.tsx
@@ -44,10 +44,37 @@ export const LayoutHeader = () => {
                     <EditorBoardSwitcher />
                 </StyledContainerForEditorBoardSwitcher>
             </StyledHeaderRoot>
+            <StyledUnstableTips>
+                <StyledUnstableTipsText>
+                    AFFiNE now under active development, the version is
+                    UNSTABLE, please DO NOT store important data in this version
+                </StyledUnstableTipsText>
+            </StyledUnstableTips>
         </StyledContainerForHeaderRoot>
     );
 };
 
+const StyledUnstableTips = styled('div')(({ theme }) => {
+    return {
+        width: '100%',
+        height: '2em',
+        display: 'flex',
+        zIndex: theme.affine.zIndex.header,
+        backgroundColor: '#fff8c5',
+        borderWidth: '1px 0',
+        borderColor: '#e4e49588',
+        borderStyle: 'solid',
+    };
+});
+
+const StyledUnstableTipsText = styled('span')(({ theme }) => {
+    return {
+        margin: 'auto 36px',
+        width: '100%',
+        textAlign: 'center',
+    };
+});
+
 const StyledContainerForHeaderRoot = styled('div')(({ theme }) => {
     return {
         width: '100%',
@@ -114,7 +141,9 @@ const StyledLogoIcon = styled(LogoIcon)(({ theme }) => {
 
 const StyledContainerForEditorBoardSwitcher = styled('div')(({ theme }) => {
     return {
+        width: '100%',
         position: 'absolute',
-        left: '50%',
+        display: 'flex',
+        justifyContent: 'center',
     };
 });