optimized component structure

Author: bennobuilder

src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

@@ -0,0 +1,53 @@
+import { animated, useSpring } from 'react-spring';
+import React, { useEffect, useState } from 'react';
+import { useAgile } from '@agile-ts/react';
+import core from '../../../../../../core';
+import styles from './styles.module.css';
+import clsx from 'clsx';
+
+type Props = { className?: string };
+
+const Astronaut: React.FC<Props> = (props) => {
+  const { className } = props;
+  const [timing] = useState(200);
+  const [isRaised, setIsRaised] = React.useState(false);
+  const animated_Astronaut = useSpring({
+    transform: isRaised ? `translateY(-${30}px)` : `translateY(0px)`,
+    config: {
+      mass: 1,
+      tension: 400,
+      friction: 15,
+    },
+  });
+  const dark = useAgile(core.ui.ASTRONAUT_DARK);
+
+  useEffect(() => {
+    if (!isRaised) {
+      return;
+    }
+
+    const timeoutId = setTimeout(() => {
+      core.ui.toggleAstronautColor(!dark);
+      setIsRaised(false);
+    }, timing);
+
+    return () => clearTimeout(timeoutId);
+  }, [isRaised, timing]);
+
+  const trigger = () => setIsRaised(true);
+
+  return (
+    <div className={clsx(styles.Container, className)}>
+      <animated.img
+        onMouseEnter={trigger}
+        style={animated_Astronaut}
+        className={styles.Image}
+        src={`img/astronaut-${dark ? 'dark' : 'light'}.svg`}
+        alt={'Astronaut'}
+      />
+      <div className={styles.Text}>Poke me 👆 to mutate my color State.</div>
+    </div>
+  );
+};
+
+export default Astronaut;

src/_pages/LandingPage/components/HeaderView/components/Astronaut/styles.module.css

@@ -0,0 +1,16 @@
+.Container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+}
+
+.Text {
+  color: var(--ifm-color-on-background-2);
+  margin-top: 30px;
+  align-self: center;
+}
+
+.Image {
+  width: 100%;
+  max-width: 800px;
+}

src/components/other/HeaderTyper/AutoTyper/events/Event.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/events/Event.ts

@@ -1,12 +1,14 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
-import HeaderTyper from '../../../../components/other/HeaderTyper';
+import HeaderTyper from './components/HeaderTyper';
 import Spacer from '../../../../components/other/Spacer';
 import PrimaryButton from '../../../../components/buttons/PrimaryButton';
 import GithubButton from '../../../../components/buttons/GithubButton';
 import styles from './styles.module.css';
 import { useWindowSize } from '../../../../hooks/useWindowSize';
-import MouseScroller from '../../../../components/other/MouseScroller';
+import MouseScroller from './components/MouseScroller';
+import { animated, useSpring } from 'react-spring';
+import Astronaut from './components/Astronaut';
 
 const HeaderView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();
@@ -52,11 +54,7 @@ const HeaderView: React.FC = () => {
           />
         </div>
       </div>
-      <img
-        className={styles.AstronautImage}
-        src={'img/astronaut-light.svg'}
-        alt={'Astronaut'}
-      />
+      <Astronaut className={styles.AstronautImage} />
       {windowHeight > 850 && windowHeight < 1200 && <MouseScroller />}
     </div>
   );

src/components/other/HeaderTyper/AutoTyper/events/LoopEvent.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/events/LoopEvent.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import styles from './styles.module.css';
+import Spacer from '../../../../components/other/Spacer';
+
+const OtherFeaturesView: React.FC = () => {
+  return (
+    <div className={styles.Container}>
+      <Spacer height={30} />
+      <div>todo</div>
+    </div>
+  );
+};
+
+export default OtherFeaturesView;

src/components/other/HeaderTyper/AutoTyper/events/RemoveEvent.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/events/RemoveEvent.ts

@@ -0,0 +1,9 @@
+.Container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 95%;
+    max-width: var(--ifm-container-width);
+    margin: 0 auto;
+    padding: 8rem 0;
+}

src/components/other/HeaderTyper/AutoTyper/events/SleepEvent.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/events/SleepEvent.ts

@@ -6,7 +6,7 @@ import { useState } from 'react';
 import LiveCodeNotFound from './components/LiveCodeNotFound';
 import { FaReact, FaVuejs } from 'react-icons/all';
 import usePrismTheme from '@theme/hooks/usePrismTheme';
-import PlainButton from '../../buttons/PlainButton';
+import PlainButton from '../../../../../../components/buttons/PlainButton';
 import FrameworkButton from './components/FrameworkButton';
 
 type Props = {

src/components/other/HeaderTyper/AutoTyper/events/TypeEvent.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/events/TypeEvent.ts

@@ -1,8 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
-import LiveCoder from '../../../../components/other/LiveCoder';
+import LiveCoder from './components/LiveCoder';
 import Spacer from '../../../../components/other/Spacer';
-import PlainButton from '../../../../components/buttons/PlainButton';
 
 const reactCode = `// Let's start by creating an Agile Instance
 const App = new Agile();

src/components/other/HeaderTyper/AutoTyper/index.ts renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/AutoTyper/index.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import styles from './styles.module.css';
 import { IconContext } from 'react-icons';
-import Icons, { IconTypes } from '../Icons';
+import Icons, { IconTypes } from '../../../../../../components/other/Icons';
 import clsx from 'clsx';
 import { useHistory } from 'react-router-dom';
 

src/components/other/HeaderTyper/index.tsx renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/index.tsx

@@ -4,7 +4,7 @@ import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
 import Spacer from '../../../../components/other/Spacer';
 import { useAgile } from '@agile-ts/react';
 import core from '../../../../core';
-import StatBadge from '../../../../components/other/StatBadge';
+import StatBadge from './components/StatBadge';
 
 const StatsView: React.FC = () => {
   const { siteConfig } = useDocusaurusContext();

src/components/other/HeaderTyper/styles.module.css renamed to src/_pages/LandingPage/components/HeaderView/components/HeaderTyper/styles.module.css

@@ -1,7 +1,9 @@
 import React from 'react';
 import styles from './styles.module.css';
 import clsx from 'clsx';
-import Icons, { IconTypes } from '../../../Icons';
+import Icons, {
+  IconTypes,
+} from '../../../../../../../../components/other/Icons';
 
 export type Props = {
   icon?: IconTypes;

src/components/other/MouseScroller/index.tsx renamed to src/_pages/LandingPage/components/HeaderView/components/MouseScroller/index.tsx

@@ -1,10 +1,10 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import styles from './styles.module.css';
-import { useWindowSize } from '../../../hooks/useWindowSize';
+import { useWindowSize } from '../../../../../../hooks/useWindowSize';
 import SectionRightItem from './components/SectionRightItem';
 import SectionLeftItem from './components/SectionLeftItem';
 import { FiChevronDown, FiChevronUp } from 'react-icons/all';
-import { IconTypes } from '../Icons';
+import { IconTypes } from '../../../../../../components/other/Icons';
 
 export interface SectionInterface {
   codeWithComment?: string;

src/components/other/MouseScroller/styles.module.css renamed to src/_pages/LandingPage/components/HeaderView/components/MouseScroller/styles.module.css

@@ -3,7 +3,7 @@ import styles from './styles.module.css';
 import Spacer from '../../../../components/other/Spacer';
 import SectionScroller, {
   SectionInterface,
-} from '../../../../components/other/SectionScroller';
+} from './components/SectionScroller';
 import PlainButton from '../../../../components/buttons/PlainButton';
 
 const sections: SectionInterface[] = [

src/_pages/LandingPage/components/HeaderView/index.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+
+export interface CardInterface {
+  title: string;
+  description: string;
+  imagePath: string;
+}
+
+export type Props = { cards: CardInterface[]; startIndex?: number };
+
+const Cards: React.FC<CardInterface> = (props) => {
+  return (
+    <div>
+      <div>much todo</div>
+    </div>
+  );
+};
+
+export default Cards;

src/_pages/LandingPage/components/OtherFeaturesView/index.tsx

@@ -1,10 +1,14 @@
-import { THEME_TYPE } from './ui.controller';
+import { ASTRONAUT_DARK, THEME_TYPE } from './ui.controller';
 import { ThemeInterface } from './ui.interface';
 
 export const toggleTheme = (dark: boolean): void => {
   THEME_TYPE.set(dark ? 'dark' : 'light');
 };
 
+export const toggleAstronautColor = (dark: boolean): void => {
+  ASTRONAUT_DARK.set(dark);
+};
+
 export const mutateThemeCssProperties = (theme: ThemeInterface): void => {
   document.documentElement.style.setProperty(
     '--ifm-background-color',

src/_pages/LandingPage/components/OtherFeaturesView/styles.module.css

@@ -18,3 +18,7 @@ export const THEME = App.createState<ThemeInterface>(
 ).watch('mutateColor', (value) => {
   mutateThemeCssProperties(value);
 });
+
+export const ASTRONAUT_DARK = App.createState<boolean>(false).persist(
+  'astronaut-color'
+);