Agregar a elemento a LIFO y FIFO hecho

KevinLatino · May 11, 2024 · 294ddcd · 294ddcd
1 parent 57b9563
commit 294ddcd
Show file tree

Hide file tree

Showing 3 changed files with 175 additions and 7 deletions.
diff --git a/src/Articles/DataStructureScreen.jsx b/src/Articles/DataStructureScreen.jsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import DataStructureSvg from '../../public/DataStructure.svg'
 import { CodeComponent } from '../Components/CodeComponent'
 import { BackButton } from '../Components/BackButtonComponent'
@@ -22,7 +22,8 @@ import {
     PurpleSection,
     RedSection,
     RedWordSection,
-    PurpleWordSection
+    PurpleWordSection,
+    GreenSectionLine
 } from '../Components/SectionsComponent'
 import 'animate.css'
 
@@ -51,6 +52,19 @@ console.log(animal.especie)
 console.log(animal.especie)
 //En consola se mostrará Cat`
 
+    const [open, setOpen] = useState(false);
+
+    const addNumber = () => {
+        setOpen(!open)
+    }
+
+
+    const [open2, setOpen2] = useState(false);
+
+    const addNumber2 = () => {
+        setOpen2(!open2)
+    }
+
     return (
         <>
             <div className='animate__animated animate__fadeInLeft'>
@@ -182,7 +196,7 @@ console.log(animal.especie)
                             Ordenamiento de Burbuja
                         </BlueTitle>
                         <Paragraph>
-                            
+
                         </Paragraph>
 
                     </BlueSection>
@@ -275,8 +289,81 @@ console.log(animal.especie)
                         <Element>
                             <GreenWordSection>● Solo se pueden extraer elementos al final</GreenWordSection>
                         </Element>
+
                     </GreenSection>
 
+                    <GreenSection>
+                        <GreenTitle>
+                            Ejemplo de fifo
+                        </GreenTitle>
+
+                        <Space />
+
+                        <button
+                            className='bg-green_section text-white p-3 rounded-lg'
+                            onClick={addNumber}
+                        >
+                            Agregar
+                        </button>
+
+                        <Space />
+
+                        <div className='flex gap-5'>
+                            <GreenSection>
+                                <Paragraph>
+                                    1
+                                </Paragraph>
+
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    2
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    3
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    4
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    5
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    6
+                                </Paragraph>
+                            </GreenSection>
+
+                            {open && (
+                                <>
+                                    <GreenSection>
+                                        <Paragraph>
+                                            7
+                                        </Paragraph>
+                                    </GreenSection>
+                                </>
+                            )}
+                        </div>
+
+
+                    </GreenSection>
+                </div>
+
+                <Space />
+
+                <div className='flex gap-16'>
                     <PurpleSection>
                         <PurpleTitle>
                             Colas o LIFO's (Last In First Out)
@@ -291,6 +378,72 @@ console.log(animal.especie)
                             <PurpleWordSection>● Solo se pueden extraer elementos al final</PurpleWordSection>
                         </Element>
                     </PurpleSection>
+
+                    <PurpleSection>
+                        <PurpleTitle>
+                            Ejemplo de FIFO
+                        </PurpleTitle>
+
+                        <Space />
+
+                        <button
+                            className='bg-purple_section p-3 rounded-lg text-white'
+                            onClick={addNumber2}
+                        >
+                            Agregar
+                        </button>
+
+                        <Space />
+
+                        <div className='flex gap-5'>
+
+                            {open2 && (
+                                <>
+                                    <GreenSection>
+                                        <Paragraph>
+                                            1
+                                        </Paragraph>
+                                    </GreenSection>
+                                </>
+                            )}
+                            <GreenSection>
+                                <Paragraph>
+                                    2
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    2
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    3
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    4
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    5
+                                </Paragraph>
+                            </GreenSection>
+
+                            <GreenSection>
+                                <Paragraph>
+                                    6
+                                </Paragraph>
+                            </GreenSection>
+
+                        </div>
+                    </PurpleSection>
                 </div>
 
                 <Space />

diff --git a/src/Articles/LinkScreen.jsx b/src/Articles/LinkScreen.jsx
@@ -1,6 +1,5 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
-    Subtitle,
     Title,
     Space,
     BlueTitle,
@@ -15,6 +14,7 @@ import {
     GreenSection,
     GreenWordSection
 } from '../Components/SectionsComponent'
+import { BackButton } from '../Components/BackButtonComponent'
 
 const Links = () => {
 
@@ -30,6 +30,12 @@ const Links = () => {
         window.open(`https://drive.google.com/file/d/1ru9j36a1JCfQsmbNmzEwEyeVWD97Wlz5/view?usp=sharing`)
     }
 
+
+    const [hola, setHola] = useState(false);
+
+    const handleClick2 = () => {
+        setHola(!hola)
+    }
     return (
         <>
             <div className='animate__animated animate__fadeInLeft'>
@@ -39,7 +45,7 @@ const Links = () => {
                 </Title>
 
                 <Space />
-                
+
                 <div className='flex flex-wrap flex-col'>
                     <BlueSection>
                         <BlueTitle>
@@ -63,7 +69,7 @@ const Links = () => {
                         </PurpleTitle>
 
                         <Space />
-                        
+
                         <PurpleWordSection>
                             <span onClick={handleLink2} className='text-white cursor-pointer'>
                                 Has click para ir a la para ir a la prática.
@@ -88,6 +94,7 @@ const Links = () => {
                     </GreenSection>
                 </div>
             </div>
+            <BackButton />
         </>
     )
 }

diff --git a/src/Components/SectionsComponent.jsx b/src/Components/SectionsComponent.jsx
@@ -32,6 +32,14 @@ export const PurpleSection = ({ children }) => {
     )
 }
 
+export const GreenSectionLine = ({ children }) => {
+    return (
+        <div className=' bg-green_section w-fit p-3 rounded-2xl'>
+            {children}
+        </div>
+    )
+}
+
 export const PurpleWordSection = ({ children }) => {
     return (
         <div className='flex items-start flex-col flex-wrap bg-purple_word_section w-fit px-1 rounded-md'>