Pannel control styles done

src/components/Admin/AdminIdentify/AdminIdentify.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import AdminHeader from './Header/AdminHeader'
+import AdminHeader from '../Header/AdminHeader'
 import Identify from './Identify/Identify'
 
 const AdminIdentify = () => {

src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/BringAdminCode.js

@@ -1,5 +1,5 @@
 import { getFirestore, collection, getDocs } from 'firebase/firestore/lite';
-import { firestore } from '../../../../../Firebase/Firebase_Config';
+import { firestore } from '../../../../../../Firebase/Firebase_Config';
 
 const BringAdminCode = async () => {
 

src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/RegisterNewUser.js

@@ -1,4 +1,4 @@
-import { firestore } from '../../../../../Firebase/Firebase_Config'
+import { firestore } from '../../../../../../Firebase/Firebase_Config'
 import {getAuth, createUserWithEmailAndPassword} from 'firebase/auth'
 
 const RegisterNewUser = async (email, password, setMessage) => {

src/components/Admin/AdminIdentify/Identify/Form/Firebase Querys/Sign In.js

@@ -1,4 +1,4 @@
-import { firestore } from "../../../../../Firebase/Firebase_Config"
+import { firestore } from "../../../../../../Firebase/Firebase_Config"
 import {getAuth, signInWithEmailAndPassword} from 'firebase/auth'
 
 const SignIn = async (data, setMessage) => {

src/components/Admin/AdminIdentify/Identify/Form/Form.jsx

@@ -1,5 +1,5 @@
 import React, {useState} from 'react'
-import Loading from '../../../Game/components/Loading/Loading'
+import Loading from '../../../../Game/components/Loading/Loading'
 import MessageContainer from './MessageContainer'
 import FormActions from './Scripts/FormActions'
 

src/components/Admin/Control Panel/Actions/Actions.jsx

@@ -0,0 +1,41 @@
+import React from 'react'
+import AddCategory from './AddCategory/AddCategory'
+import AddWord from './AddWord/AddWord'
+import DeleteCategory from './DeleteCategory/DeleteCategory';
+import DeleteWord from './DeleteWord/DeleteWord';
+import EditWord from './EditWord/EditWord';
+
+const Actions = ({actualAction}) => {
+
+    return (
+        <>
+            {
+                actualAction === 'Add Word(s)' ?
+                    <AddWord action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Add Category' ? 
+                    <AddCategory action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Delete Category' ? 
+                    <DeleteCategory action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Delete Word' ? 
+                    <DeleteWord action={actualAction} />
+                : null
+            }
+            {
+                actualAction === 'Edit Word' ? 
+                    <EditWord action={actualAction} />
+                : null
+            }
+        </>
+    )
+}
+
+export default Actions

src/components/Admin/Control Panel/Actions/AddCategory/AddCategory.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const AddCategory = () => {
+
+    console.log('category');
+
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default AddCategory

src/components/Admin/Control Panel/Actions/AddWord/AddWord.jsx

@@ -0,0 +1,14 @@
+import React from 'react'
+
+const AddWord = () => {
+
+    console.log('word');
+
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default AddWord

src/components/Admin/Control Panel/Actions/DeleteCategory/DeleteCategory.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DeleteCategory = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default DeleteCategory

src/components/Admin/Control Panel/Actions/DeleteWord/DeleteWord.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const DeleteWord = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default DeleteWord

src/components/Admin/Control Panel/Actions/EditWord/EditWord.jsx

@@ -0,0 +1,11 @@
+import React from 'react'
+
+const EditWord = () => {
+    return (
+        <div>
+            
+        </div>
+    )
+}
+
+export default EditWord

src/components/Admin/Control Panel/Actions/Scripts/DefineClassName.js

@@ -0,0 +1,13 @@
+const DefineClassName = (action) => {
+
+    let className = action.split(' ')
+
+    className = className.map(word => word.toLowerCase())
+    className = className.join('-')
+    className = className.replaceAll('(', '')
+    className = className.replaceAll(')', '')
+
+    return className
+}
+
+export default DefineClassName

src/components/Admin/Control Panel/AdminFunctionButton.jsx

@@ -0,0 +1,18 @@
+import React from 'react'
+import DefineClassName from './Actions/Scripts/DefineClassName'
+
+const AdminFunctionButton = ({action, setActualAction}) => {
+  
+    const classButton = DefineClassName(action)
+
+    return (
+        <button
+            className={classButton}
+            onClick={() => setActualAction(action)}
+        >
+            {action}
+        </button>
+    )
+}
+
+export default AdminFunctionButton

src/components/Admin/Control Panel/ControlPanel.jsx

@@ -0,0 +1,51 @@
+import React from "react";
+import { getAuth, onAuthStateChanged } from "firebase/auth";
+import AdminFunctionButton from "./AdminFunctionButton";
+import {withRouter} from 'react-router'
+import Actions from "./Actions/Actions";
+import AdminHeader from "../Header/AdminHeader";
+
+const ControlPanel = (props) => {
+
+    const [userLogged, setUserLogged] = React.useState(false)
+    const [actualAction, setActualAction] = React.useState('')
+
+    const auth = getAuth()
+
+    onAuthStateChanged(auth, (user) => {
+
+        if (!user) {
+
+            props.history.push('/identify')
+
+        } else {
+            setUserLogged(true)
+        }
+    })
+
+    return (
+        <>
+        <AdminHeader />
+            <div className="control-panel">
+                {
+                    userLogged ?
+                        <>
+                            <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}/>
+                        </>
+                    : null
+                }
+                {
+                    actualAction ?
+                        <Actions actualAction={actualAction}/>
+                    : null
+                }
+            </div>
+        </>
+    )
+}
+
+export default withRouter(ControlPanel)