demo: remove dynamic buttons

Author: Emanuel Suriano

packages/demo/src/App.tsx

@@ -1,17 +1,16 @@
 import { useState } from 'react';
 import { ScrollingProvider, Section } from 'react-scroll-section';
-import ModeToggle, { MenuKind } from './ModeToggle';
+import ModeToggle, { Mode } from './ModeToggle';
 import { DynamicMenu, StaticMenu } from './Menu';
 import { Footer, Menu, SectionContainer } from './Builders';
 import logo from './logo.svg';
 
 function App() {
-  const [menu, setMenu] = useState<MenuKind>('dynamic');
-  const [sections, setSections] = useState(['s1']);
+  const [mode, setMode] = useState<Mode>('dynamic');
 
   return (
     <ScrollingProvider>
-      <Menu>{menu === 'static' ? <StaticMenu /> : <DynamicMenu />}</Menu>
+      <Menu>{mode === 'static' ? <StaticMenu /> : <DynamicMenu />}</Menu>
 
       <Section id="home">
         <SectionContainer>
@@ -46,32 +45,8 @@ function App() {
         </SectionContainer>
       </Section>
 
-      {sections.map((name) => (
-        <Section id={name} key={name}>
-          <SectionContainer>
-            <span role="img" aria-label="letter">
-              {name}
-            </span>
-            <button
-              onClick={() => {
-                setSections((prev) => [...prev, 's' + (prev.length + 1)]);
-              }}
-            >
-              Add
-            </button>
-            <button
-              onClick={() => {
-                setSections((prev) => prev.filter((s) => s !== name));
-              }}
-            >
-              Remove
-            </button>
-          </SectionContainer>
-        </Section>
-      ))}
-
       <Footer>
-        <ModeToggle menu={menu} onChange={setMenu} />
+        <ModeToggle mode={mode} onChange={setMode} />
         <a href="https://www.netlify.com">
           <img
             src="https://www.netlify.com/img/global/badges/netlify-color-bg.svg"

packages/demo/src/ModeToggle.tsx

@@ -1,24 +1,24 @@
 import styled from 'styled-components';
 import Toggle from 'react-toggle';
 
-export type MenuKind = 'static' | 'dynamic';
+export type Mode = 'static' | 'dynamic';
 
 type Props = {
-  menu: MenuKind;
-  onChange: (menu: MenuKind) => void;
+  mode: Mode;
+  onChange: (mode: Mode) => void;
 };
 
-const ModeToggle = ({ menu, onChange }: Props) => (
+const ModeToggle = ({ mode, onChange }: Props) => (
   <Container>
     <Toggle
-      id="menu-type"
-      defaultChecked={menu === 'static'}
+      id="mode-type"
+      defaultChecked={mode === 'dynamic'}
       onChange={({ currentTarget }) =>
-        onChange(currentTarget.checked ? 'static' : 'dynamic')
+        onChange(currentTarget.checked ? 'dynamic' : 'static')
       }
     />
-    <label htmlFor="menu-type" style={{ marginLeft: '10px' }}>
-      Menu: <b>{menu}</b>
+    <label htmlFor="mode-type" style={{ marginLeft: '10px' }}>
+      Mode: <b>{mode}</b>
     </label>
   </Container>
 );