layout of actions done

This commit is contained in:
2021-10-22 18:52:31 -03:00
parent 4de12fa282
commit 232792b356
10 changed files with 85 additions and 20 deletions

View File

@@ -5,8 +5,11 @@ const AddCategory = () => {
console.log('category');
return (
<div>
<div className="action-form add-category">
<form>
<input type="text"/>
<input type="submit"/>
</form>
</div>
)
}

View File

@@ -5,7 +5,7 @@ const AddWord = () => {
console.log('word');
return (
<div className="form-add-word">
<div className="action-form add-word">
<form>
<textarea placeholder="Add the word/words separated by commas" cols="30" rows="10"></textarea>
<input type="submit" value="Add Word(s)" />

View File

@@ -2,8 +2,14 @@ import React from 'react'
const DeleteCategory = () => {
return (
<div>
<div className="action-form delete-category">
<form>
<select>
<option>Select an option</option>
<option>AA</option>
</select>
<input type="submit" value="Delete"/>
</form>
</div>
)
}

View File

@@ -2,8 +2,16 @@ import React from 'react'
const DeleteWord = () => {
return (
<div>
<div className="action-form delete-word">
<form>
<select>
<option>Select category</option>
</select>
<select>
<option>Select word</option>
</select>
<input type="submit" value="Delete" />
</form>
</div>
)
}

View File

@@ -2,8 +2,17 @@ import React from 'react'
const EditWord = () => {
return (
<div>
<div className="action-form edit-word">
<form>
<select>
<option>Select category</option>
</select>
<select>
<option>Select word</option>
</select>
<input type="text" placeholder="Place the new word" />
<input type="submit" value="Delete" />
</form>
</div>
)
}

View File

@@ -1,13 +1,13 @@
import React from 'react'
import DefineClassName from './Actions/Scripts/DefineClassName'
const AdminFunctionButton = ({action, setActualAction}) => {
const AdminFunctionButton = ({action, actualAction, setActualAction}) => {
const classButton = DefineClassName(action)
return (
<button
className={classButton}
className={action === actualAction ? classButton + ' active' : classButton}
onClick={() => setActualAction(action)}
>
{action}

View File

@@ -31,11 +31,11 @@ const ControlPanel = (props) => {
userLogged ?
<div
className={actualAction ? 'buttons-container nav-mode' : 'buttons-container'}>
<AdminFunctionButton action={'Add Word(s)'} setActualAction={setActualAction}/>
<AdminFunctionButton action={'Add Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Category'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Word'} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Edit Word'} setActualAction={setActualAction}/>
<AdminFunctionButton action={'Add Word(s)'} actualAction={actualAction} setActualAction={setActualAction}/>
<AdminFunctionButton action={'Add Category'} actualAction={actualAction} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Category'} actualAction={actualAction} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Delete Word'} actualAction={actualAction} setActualAction={setActualAction}/>
<AdminFunctionButton action ={'Edit Word'} actualAction={actualAction} setActualAction={setActualAction}/>
</div>
: null
}