frontend: update github campaign page content

pingcap · Sep 12, 2024 · 1e321f9 · 1e321f9
1 parent ee83a14
commit 1e321f9
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 10 deletions.
diff --git a/web/src/pages/open-source-heroes/_components/Tabs.tsx b/web/src/pages/open-source-heroes/_components/Tabs.tsx
@@ -1,20 +1,66 @@
 import { styled } from '@mui/material';
 import { motion } from 'framer-motion';
-import React, { createContext, type ReactNode, useContext, useEffect, useState } from 'react';
+import React, { createContext, type ReactNode, useContext, useEffect, useRef, useState } from 'react';
 
 export const TabsContext = createContext<{ init: boolean, current: string, setCurrent: (value: string) => void }>({ init: false, current: '', setCurrent () {} });
 
-export function Tabs ({ children, defaultValue }: { children: ReactNode, defaultValue: string }) {
+export function Tabs ({ children, defaultValue, values }: { children: ReactNode, defaultValue: string, values: string[] }) {
   const [current, setCurrent] = useState(defaultValue);
   const [init, setInit] = useState(false);
+  const [clicking, setClicking] = useState(0);
+  const [inView, setInView] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
+
   useEffect(() => {
     setInit(true);
+
+    const el = ref.current;
+    if (!el) return;
+    if (typeof IntersectionObserver !== 'undefined') {
+      const io = new IntersectionObserver(([entry]) => {
+        setInView(entry.isIntersecting);
+      }, { threshold: 0.3 });
+      io.observe(el);
+      return () => {
+        io.unobserve(el);
+      };
+    } else {
+      setInView(true);
+    }
   }, []);
 
+  useEffect(() => {
+    if (clicking) {
+      const timeout = setTimeout(() => {
+        setClicking(0);
+      }, 5000);
+      return () => {
+        clearTimeout(timeout);
+      };
+    }
+  }, [clicking]);
+
+  useEffect(() => {
+    if (!clicking && inView) {
+      const interval = setInterval(() => {
+        setCurrent(value => {
+          const index = Math.max(values.indexOf(value), 0);
+          return values[(index + 1) % values.length];
+        });
+      }, 4000);
+
+      return () => {
+        clearInterval(interval);
+      };
+    }
+  }, [clicking, inView]);
+
   return (
-    <TabsContext.Provider value={{ init, current, setCurrent }}>
-      {children}
-    </TabsContext.Provider>
+    <div ref={ref} onMouseDown={() => setClicking(clicking => clicking + 1)}>
+      <TabsContext.Provider value={{ init, current, setCurrent }}>
+        {children}
+      </TabsContext.Provider>
+    </div>
   );
 }
 

diff --git a/web/src/pages/open-source-heroes/_sections/2-introduction.tsx b/web/src/pages/open-source-heroes/_sections/2-introduction.tsx
@@ -36,7 +36,7 @@ export function IntroductionsSection () {
         <SectionTitle sx={{ mt: [20, 20, 40] }}>
           With TiDB Serverless credits 💰 , you can:
         </SectionTitle>
-        <Tabs defaultValue="free">
+        <Tabs defaultValue="free" values={tabValues}>
           <TabsList>
             <LayoutGroup>
               {tabs.map(tab => <TabItem key={tab.value} value={tab.value}>{tab.title}</TabItem>)}
@@ -63,6 +63,7 @@ export function IntroductionsSection () {
                   </AnimatePresence>
                 )}
               </TabsContext.Consumer>
+              <span className="--spacer" />
               <Button
                 variant="contained"
                 onClick={() => {
@@ -72,6 +73,9 @@ export function IntroductionsSection () {
               >
                 Claim your credits now
               </Button>
+              <footer>
+                <p>*The scenarios above are for reference only. The actual bill will be based on real usage.</p>
+              </footer>
             </motion.article>
           </Content>
         </Tabs>
@@ -88,26 +92,28 @@ const tabs: Array<{ value: string, title: ReactNode, content: ReactNode }> = [
   },
   {
     value: '$5',
-    title: '$5-10',
+    title: '$5-$10',
     content: <Content1 />,
   },
   {
     value: '$10',
-    title: '$10-100',
+    title: '$10-$100',
     content: <Content2 />,
   },
   {
     value: '$100',
-    title: '$100-300',
+    title: '$100-$300',
     content: <Content3 />,
   },
   {
     value: '$300',
-    title: '$300-2000',
+    title: '$300-$2000',
     content: <Content4 />,
   },
 ];
 
+const tabValues = tabs.map(tab => tab.value);
+
 const Content = styled('div')<{ invert?: boolean }>`
   margin-top: 36px;
 
@@ -131,9 +137,19 @@ const Content = styled('div')<{ invert?: boolean }>`
       text-decoration: underline;
     }
 
+    .--spacer {
+      flex: 1;
+    }
+
     .MuiButtonBase-root {
       width: 100%;
     }
+
+    footer {
+      font-size: 16px;
+      color: #53524F;
+      font-style: italic;
+    }
   }
 
   ${({ theme, invert }) => ({