feat(oracle-landing): tabs/fixes (#1062)

cybercongress · Dec 13, 2023 · f7fb6cd · f7fb6cd
1 parent 7222b6b
commit f7fb6cd
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 31 deletions.
diff --git a/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts b/src/features/cyberlinks/CyberlinksGraph/useCyberlinks.ts
@@ -20,8 +20,6 @@ function useCyberlinks(
     where = '{}';
   }
 
-  console.time('prepareCyberlinks');
-
   const query = useQuery(
     gql`
     query Cyberlinks {
@@ -72,8 +70,6 @@ function useCyberlinks(
       };
     }
 
-    console.timeEnd('prepareCyberlinks');
-
     return {
       nodes: object,
       links: links,

diff --git a/src/pages/oracle/landing/OracleLanding.module.scss b/src/pages/oracle/landing/OracleLanding.module.scss
@@ -9,17 +9,14 @@ $mobile-breakpoint: 480px;
   flex-direction: column;
   justify-content: space-between;
   // header, footer widths, TODO: use variables
-  min-height: calc(100vh - 120px - 60px - 45px);
+  min-height: calc(100vh - 120px - 60px - 100px);
 
   padding: 0 10px;
 
   // not good, need fix wrapper
   margin-bottom: 100px;
-  margin-top: -15px;
 
   @media (width <= $mobile-breakpoint) {
-    // padding: 0 50px;
-
     .actionBarBtn {
       min-width: 107px;
     }
@@ -41,6 +38,11 @@ $mobile-breakpoint: 480px;
   margin: 0px auto;
   width: 415px;
 
+  // because of adviser container
+  position: relative;
+  top: -45px;
+  z-index: 5;
+
   @media (width <= $mobile-breakpoint) {
     width: unset;
 

diff --git a/src/pages/oracle/landing/OracleLanding.tsx b/src/pages/oracle/landing/OracleLanding.tsx
@@ -1,14 +1,13 @@
-import { ActionBar, Button } from 'src/components';
+import { ActionBar, Button, Tabs } from 'src/components';
 import { routes } from 'src/routes';
-import { useEffect, useMemo, useRef, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import CyberlinksGraphContainer from 'src/features/cyberlinks/CyberlinksGraph/CyberlinksGraphContainer';
 import { Stars } from 'src/containers/portal/components';
 
 import { useDevice } from 'src/contexts/device';
 
 import { useAppDispatch } from 'src/redux/hooks';
 import { setFocus } from 'src/containers/application/Header/Commander/commander.redux';
-import Carousel from 'src/components/Tabs/Carousel/Carousel';
 import { Link, useNavigate, useSearchParams } from 'react-router-dom';
 import styles from './OracleLanding.module.scss';
 import KeywordButton from './components/KeywordButton/KeywordButton';
@@ -116,33 +115,29 @@ function OracleLanding() {
 
   const { title, description, text } = listConfig[titleType];
 
-  const listSlides = useMemo(() => {
-    return [TitleType.search, TitleType.ai, TitleType.learning].map((type) => {
-      return {
-        title: mapTitleTypeToTitle[type],
-        // step: type,
-      };
-    });
-  }, []);
-
   return (
     <div className={styles.wrapper} ref={ref}>
       <div className={styles.starsWrapper}>
         <Stars />
       </div>
 
       <header className={styles.header}>
-        <Carousel
-          color="blue"
-          noAnimation
-          activeStep={titleType}
-          onChange={(index: TitleType) => {
-            setTitleType(index);
-            navigate(`?${QUERY_KEY}=${mapTitleTypeToTitle[index]}`, {
-              replace: true,
-            });
-          }}
-          slides={listSlides}
+        <Tabs
+          options={[TitleType.search, TitleType.ai, TitleType.learning].map(
+            (type) => {
+              return {
+                onClick: () => {
+                  setTitleType(type);
+                  // navigate(`?${QUERY_KEY}=${mapTitleTypeToTitle[index]}`, {
+                  //   replace: true,
+                  // });
+                },
+                text: mapTitleTypeToTitle[type],
+                key: type,
+              };
+            }
+          )}
+          selected={titleType}
         />
       </header>