React Essentials - Created new components.

carla-ng · Jun 3, 2024 · 7eb83be · 7eb83be
1 parent 80d99d7
commit 7eb83be
Show file tree

Hide file tree

Showing 7 changed files with 98 additions and 45 deletions.
diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsCoreConcept.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsCoreConcept.jsx
@@ -1,4 +1,4 @@
-const ReactEssentialsHeader = ({ title, description, image }) => {
+const ReactEssentialsCoreConcept = ({ title, description, image }) => {
     return (
         <li>
             <img src={image} alt={title} />
@@ -8,4 +8,4 @@ const ReactEssentialsHeader = ({ title, description, image }) => {
     )
 }
 
-export default ReactEssentialsHeader
+export default ReactEssentialsCoreConcept
diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsCoreConcepts.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsCoreConcepts.jsx
@@ -0,0 +1,16 @@
+import { CORE_CONCEPTS } from '../data/data.js'
+
+import ReactEssentialsCoreConcept from './ReactEssentialsCoreConcept.jsx'
+
+const ReactEssentialsCoreConcepts = () => {
+    return (
+        <section id="core-concepts">
+            <h2>Core Concepts</h2>
+            <ul>
+                {CORE_CONCEPTS.map(concept => <ReactEssentialsCoreConcept key={concept.title} { ...concept } />)}
+            </ul>
+        </section>
+    )
+}
+
+export default ReactEssentialsCoreConcepts
diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsExamples.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsExamples.jsx
@@ -0,0 +1,46 @@
+import { useState } from 'react'
+
+import { EXAMPLES } from '../data/data.js'
+
+import ReactEssentialsTabButton from './ReactEssentialsTabButton.jsx'
+import ReactEssentialsTabs from './ReactEssentialsTabs.jsx'
+import ReactEssentialsSection from './ReactEssentialsSection.jsx'
+
+const ReactEssentialsExample = () => {
+    const [selectedTopic, setSelectedTopic] = useState()
+
+    const handleSelect = ( selectedButton ) => {
+        setSelectedTopic(selectedButton)
+    }
+
+    let tabContent = <p> Please, select a topic / tab.</p>
+
+    if ( selectedTopic ) {
+        tabContent = (
+            <div id="tab-content">
+                <h3>{ EXAMPLES[selectedTopic].title }</h3>
+                <p>{ EXAMPLES[selectedTopic].description }</p>
+                <code>{ EXAMPLES[selectedTopic].code }</code>
+            </div>
+        )
+    }
+
+    return (
+        <ReactEssentialsSection id="examples" title="Examples">
+            <ReactEssentialsTabs
+                ButtonsContainer="menu"
+                buttons={
+                    <>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'components'} onClick={() => handleSelect('components')}>Components</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'jsx'} onClick={() => handleSelect('jsx')}>JSX</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'props'} onClick={() => handleSelect('props')}>Props</ReactEssentialsTabButton>
+                        <ReactEssentialsTabButton isSelected={selectedTopic === 'state'} onClick={() => handleSelect('state')}>State</ReactEssentialsTabButton>
+                    </>}
+            >
+                { tabContent }
+            </ReactEssentialsTabs>
+        </ReactEssentialsSection>
+    )
+}
+
+export default ReactEssentialsExample
diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsSection.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsSection.jsx
@@ -0,0 +1,12 @@
+
+const ReactEssentialsSection = ({title, children, ...props}) => {
+    return (
+        <section {...props}>
+            <h2>{title}</h2>
+            {children}
+        </section>
+    )
+
+}
+
+export default ReactEssentialsSection 
diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabButton.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabButton.jsx
@@ -1,9 +1,9 @@
 
-const ReactEssentialsTabButton = ({ children, onSelect, isSelected }) => {
+const ReactEssentialsTabButton = ({ children, isSelected, ...props }) => {
 
     return (
         <li>
-            <button className={ isSelected ? 'active' : undefined } onClick={onSelect}>{children}</button>
+            <button className={ isSelected ? 'active' : undefined } {...props}>{children}</button>
         </li>
     )
 }

diff --git a/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabs.jsx b/react-practice/main-project/src/ReactEssentials/components/ReactEssentialsTabs.jsx
@@ -0,0 +1,16 @@
+
+const ReactEssentialsTabs = ({ children, buttons, ButtonsContainer = 'menu' }) => {
+    //const ButtonsContainer = buttonsContainer
+
+    return (
+        <>
+            <ButtonsContainer>
+                { buttons }
+            </ButtonsContainer>
+
+            { children }
+        </>
+    )
+}
+
+export default ReactEssentialsTabs
diff --git a/react-practice/main-project/src/ReactEssentials/pages/ReactEssentialsPage.jsx b/react-practice/main-project/src/ReactEssentials/pages/ReactEssentialsPage.jsx
@@ -1,53 +1,16 @@
 import '../css/ReactEssentials.css'
-import { CORE_CONCEPTS, EXAMPLES } from '../data/data.js'
-
-import { useState } from 'react'
 
+import ReactEssentialsCoreConcepts from '../components/ReactEssentialsCoreConcepts.jsx'
+import ReactEssentialsExamples from '../components/ReactEssentialsExamples.jsx'
 import ReactEssentialsHeader from '../components/ReactEssentialsHeader.jsx'
-import ReactEssentialsCoreConcept from '../components/ReactEssentialsCoreConcept.jsx'
-import ReactEssentialsTabButton from '../components/ReactEssentialsTabButton.jsx'
 
 function ReactEssentialsPage() {
-    const [selectedTopic, setSelectedTopic] = useState()
-
-    const handleSelect = ( selectedButton ) => {
-        setSelectedTopic(selectedButton)
-    }
-
-    let tabContent = <p> Please, select a topic.</p>
-
-    if ( selectedTopic ) {
-        tabContent = (
-            <div id="tab-content">
-                <h3>{ EXAMPLES[selectedTopic].title }</h3>
-                <p>{ EXAMPLES[selectedTopic].description }</p>
-                <code>{ EXAMPLES[selectedTopic].code }</code>
-            </div>
-        )
-    }
-
     return (
         <div id="reactessentials-container">
             <ReactEssentialsHeader />
             <main>
-                <section id="core-concepts">
-                    <h2>Core Concepts</h2>
-                    <ul>
-                        {CORE_CONCEPTS.map(concept => <ReactEssentialsCoreConcept key={concept.title} { ...concept } />)}
-                    </ul>
-                </section>
-
-                <section id="examples">
-                    <h2>Examples</h2>
-                    <menu>
-                        <ReactEssentialsTabButton isSelected={selectedTopic === 'components'} onSelect={() => handleSelect('components')}>Components</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton isSelected={selectedTopic === 'jsx'} onSelect={() => handleSelect('jsx')}>JSX</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton isSelected={selectedTopic === 'props'} onSelect={() => handleSelect('props')}>Props</ReactEssentialsTabButton>
-                        <ReactEssentialsTabButton isSelected={selectedTopic === 'state'} onSelect={() => handleSelect('state')}>State</ReactEssentialsTabButton>
-                    </menu>
-
-                    { tabContent }
-                </section>
+                <ReactEssentialsCoreConcepts />
+                <ReactEssentialsExamples />
             </main>
         </div>
     )