panel and dropdown structs

client/src/Structures/Dropdown.js

@@ -0,0 +1,37 @@
+import React from "react";
+import '../css/Structures.css';
+
+const DropdownItem = ({ onUpdate, id, item: {name, value}}) => {
+    
+    return (
+        <div className='dropdown-item'>
+            <label htmlFor={id}>{name}</label>
+            <input
+                id={id}
+                type='checkbox'
+                defaultChecked={value}
+                name={name}
+                onChange={onUpdate}
+            />
+        </div>
+    );
+
+};
+
+const Dropdown = ({items, name, onUpdate}) => {
+
+    return (
+        <div className='dropdown'>
+            {name}
+            <div className='dropdown-list'>
+                {items.map(item => {
+                    const id = `${name}:${item.name}`;
+                    return <DropdownItem onUpdate={onUpdate} key={id} id={id} item={item} />;
+                })}
+            </div>
+        </div>
+    );
+
+};
+
+export default Dropdown;

client/src/pages/Panel.js

@@ -1,11 +1,39 @@
 import React, { useEffect, useState } from "react";
 import '../css/Panel.css';
+import Dropdown from "../Structures/Dropdown";
 
 const User = ({user}) => {
 
+    const { permissions } = user;
+    const perms = Object.entries(permissions)
+        .map(([name, value]) => { return { name, value }; });
+    
+    const onUpdate = (event) => {
+        console.log(permissions);
+        const perm = event.target.name;
+        const value = event.target.checked;
+        permissions[perm] = value;
+    };
+
     return (
-        <div className='user flex-container'>
-            {user.tag}
+        <div className='user flex-container shadow'>
+            <div className='identity'>
+                {user.tag} ({user.id})
+            </div>
+
+            <div className='permissions'>
+                <Dropdown onUpdate={onUpdate} items={perms} name='Permissions' />
+            </div>
+
+            <div className='uploads'>
+                Manage Uploads
+            </div>
+
+            <div>
+                <button className='delete-btn'>
+                    DELETE
+                </button>
+            </div>
         </div>
     );
 
@@ -27,8 +55,15 @@ const Panel = () => {
     }, []);
     
     return (
-        <div className='panel flex-container'>
-            {users.length ? users.map(user => <User key={user.id} user={user}/>):'No users'}
+        <div className='panel'>
+            {users.length ? users.map(user => <User key={user.id} user={user} />) : 'No users'}
+            
+            <div>
+                <button onClick={() => { console.log(users); }}>
+                    save
+                </button>
+            </div>
+
         </div>
     );