Fix login/logout, starting on create page

package-lock.json

@@ -17,6 +17,7 @@
         "nostr-tools": "^2.1.5",
         "primeicons": "^6.0.1",
         "primereact": "^10.2.1",
+        "quill": "^1.3.7",
         "react": "^18",
         "react-dom": "^18",
         "react-markdown": "^9.0.1",
@@ -1342,7 +1343,6 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.7.tgz",
       "integrity": "sha512-GHTSNSYICQ7scH7sZ+M2rFopRoLh8t2bLSW6BbgrtLsahOIB5iyAVJf9GjWK3cYTDaMj4XdBpM1cA6pIS0Kv2w==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -1501,6 +1501,14 @@
       "resolved": "https://registry.npmjs.org/client-only/-/client-only-0.0.1.tgz",
       "integrity": "sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA=="
     },
+    "node_modules/clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha512-3Pe/CF1Nn94hyhIYpjtiLhdCoEoz0DqQ+988E9gmeEdQZlojxnOb74wctFyuwWQHzqyf9X7C7MG8juUpqBJT8w==",
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -1627,6 +1635,25 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/deep-equal": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.2.tgz",
+      "integrity": "sha512-5tdhKF6DbU7iIzrIOa1AOUt39ZRm13cmL1cGEh//aqR8x9+tNfbywRf0n5FD/18OKMdo7DNEtrX2t22ZAkI+eg==",
+      "dependencies": {
+        "is-arguments": "^1.1.1",
+        "is-date-object": "^1.0.5",
+        "is-regex": "^1.1.4",
+        "object-is": "^1.1.5",
+        "object-keys": "^1.1.1",
+        "regexp.prototype.flags": "^1.5.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/deep-is": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
@@ -1637,7 +1664,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
       "integrity": "sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0",
         "es-errors": "^1.3.0",
@@ -1654,7 +1680,6 @@
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.2.1.tgz",
       "integrity": "sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.0.1",
         "has-property-descriptors": "^1.0.0",
@@ -1847,7 +1872,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.0.tgz",
       "integrity": "sha512-jxayLKShrEqqzJ0eumQbVhTYQM27CfT1T35+gCgDFoL82JLsXqTJ76zv6A0YLOgEnLUMvLzsDsGIrl8NFpT2gQ==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.2.4"
       },
@@ -1859,7 +1883,6 @@
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-errors/-/es-errors-1.3.0.tgz",
       "integrity": "sha512-Zf5H2Kxt2xjTvbJvP2ZWLEICxA6j+hAmMzIlypy4xcBg1vKVnx89Wy0GbS+kf5cwCVFFzdCFh2XSCFNULS6csw==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -2372,6 +2395,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/eventemitter3": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-2.0.3.tgz",
+      "integrity": "sha512-jLN68Dx5kyFHaePoXWPsCGW5qdyZQtLYHkxkg02/Mz6g0kYpDx4FyP6XfArhQdlOC4b8Mv+EMxPo/8La7Tzghg=="
+    },
     "node_modules/extend": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz",
@@ -2383,6 +2411,11 @@
       "integrity": "sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==",
       "dev": true
     },
+    "node_modules/fast-diff": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.1.2.tgz",
+      "integrity": "sha512-KaJUt+M9t1qaIteSvjc6P3RbMdXsNhK61GRftR6SNxqmhthcd9MGIi4T+o0jD8LUSpSnSKXE20nLtJ3fOHxQig=="
+    },
     "node_modules/fast-glob": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz",
@@ -2586,7 +2619,6 @@
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.2.tgz",
       "integrity": "sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2613,7 +2645,6 @@
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
       "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
-      "dev": true,
       "funding": {
         "url": "https://github.com/sponsors/ljharb"
       }
@@ -2622,7 +2653,6 @@
       "version": "1.2.4",
       "resolved": "https://registry.npmjs.org/get-intrinsic/-/get-intrinsic-1.2.4.tgz",
       "integrity": "sha512-5uYhsJH8VJBTv7oslg4BznJYhDoRI6waYCxMmCdnTrcCrHA/fCFKoTFz2JKKE0HdDFUF7/oQuhzumXJK7paBRQ==",
-      "dev": true,
       "dependencies": {
         "es-errors": "^1.3.0",
         "function-bind": "^1.1.2",
@@ -2757,7 +2787,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/gopd/-/gopd-1.0.1.tgz",
       "integrity": "sha512-d65bNlIadxvpb/A2abVdlqKqV563juRnZ1Wtk6s1sIR8uNsXR70xqIzVqxVf1eTqDunwT2MkczEeaezCKTZhwA==",
-      "dev": true,
       "dependencies": {
         "get-intrinsic": "^1.1.3"
       },
@@ -2798,7 +2827,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz",
       "integrity": "sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==",
-      "dev": true,
       "dependencies": {
         "es-define-property": "^1.0.0"
       },
@@ -2810,7 +2838,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-proto/-/has-proto-1.0.3.tgz",
       "integrity": "sha512-SJ1amZAJUiZS+PhsVLf5tGydlaVB8EdFpaSO4gmiUKUOxk8qzn5AIy4ZeJUmh22znIdk/uMAUT2pl3FxzVUH+Q==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2822,7 +2849,6 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
       "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -2834,7 +2860,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.2.tgz",
       "integrity": "sha512-NqADB8VjPFLM2V0VvHUewwwsw0ZWBaIdgo+ieHtK3hasLz4qeCRjYcqfB6AQrBggRKppKF8L52/VqdVsO47Dlw==",
-      "dev": true,
       "dependencies": {
         "has-symbols": "^1.0.3"
       },
@@ -2849,7 +2874,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/hasown/-/hasown-2.0.2.tgz",
       "integrity": "sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==",
-      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.2"
       },
@@ -3102,6 +3126,21 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/is-arguments": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.1.tgz",
+      "integrity": "sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==",
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-array-buffer": {
       "version": "3.0.4",
       "resolved": "https://registry.npmjs.org/is-array-buffer/-/is-array-buffer-3.0.4.tgz",
@@ -3201,7 +3240,6 @@
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz",
       "integrity": "sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==",
-      "dev": true,
       "dependencies": {
         "has-tostringtag": "^1.0.0"
       },
@@ -3359,7 +3397,6 @@
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
       "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
         "has-tostringtag": "^1.0.0"
@@ -4572,11 +4609,25 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object-is": {
+      "version": "1.1.6",
+      "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.6.tgz",
+      "integrity": "sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-keys": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz",
       "integrity": "sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==",
-      "dev": true,
       "engines": {
         "node": ">= 0.4"
       }
@@ -4751,6 +4802,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parchment": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/parchment/-/parchment-1.1.4.tgz",
+      "integrity": "sha512-J5FBQt/pM2inLzg4hEWmzQx/8h8D0CiDxaG3vyp9rKrQRSDgBlhjdP5jQGgosEajXPSQouXGHOmVdgo7QmJuOg=="
+    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -5188,6 +5244,32 @@
         }
       ]
     },
+    "node_modules/quill": {
+      "version": "1.3.7",
+      "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",
+      "integrity": "sha512-hG/DVzh/TiknWtE6QmWAF/pxoZKYxfe3J/d/+ShUWkDvvkZQVTPeVmUJVu1uE6DDooC4fWTiCLh84ul89oNz5g==",
+      "dependencies": {
+        "clone": "^2.1.1",
+        "deep-equal": "^1.0.1",
+        "eventemitter3": "^2.0.3",
+        "extend": "^3.0.2",
+        "parchment": "^1.1.4",
+        "quill-delta": "^3.6.2"
+      }
+    },
+    "node_modules/quill-delta": {
+      "version": "3.6.3",
+      "resolved": "https://registry.npmjs.org/quill-delta/-/quill-delta-3.6.3.tgz",
+      "integrity": "sha512-wdIGBlcX13tCHOXGMVnnTVFtGRLoP0imqxM696fIPwIf5ODIYUHIvHbZcyvGlZFiFhK5XzDC2lpjbxRhnM05Tg==",
+      "dependencies": {
+        "deep-equal": "^1.0.1",
+        "extend": "^3.0.2",
+        "fast-diff": "1.1.2"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/react": {
       "version": "18.2.0",
       "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
@@ -5358,7 +5440,6 @@
       "version": "1.5.2",
       "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.5.2.tgz",
       "integrity": "sha512-NcDiDkTLuPR+++OCKB0nWafEmhg/Da8aUPLPMQbK+bxKKCm1/S5he+AqYa4PlMCVBalb4/yxIRub6qkEx5yJbw==",
-      "dev": true,
       "dependencies": {
         "call-bind": "^1.0.6",
         "define-properties": "^1.2.1",
@@ -5567,7 +5648,6 @@
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/set-function-length/-/set-function-length-1.2.2.tgz",
       "integrity": "sha512-pgRc4hJ4/sNjWCSS9AmnS40x3bNMDTknHgL5UaMBTMyJnU90EgWh1Rz+MC9eFu4BuN/UwZjKQuY/1v3rM7HMfg==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",
@@ -5584,7 +5664,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/set-function-name/-/set-function-name-2.0.2.tgz",
       "integrity": "sha512-7PGFlmtwsEADb0WYyvCMa1t+yke6daIG4Wirafur5kcf+MhUnPms1UeR0CKQdTZD81yESwMHbtn+TR+dMviakQ==",
-      "dev": true,
       "dependencies": {
         "define-data-property": "^1.1.4",
         "es-errors": "^1.3.0",

package.json

@@ -18,6 +18,7 @@
     "nostr-tools": "^2.1.5",
     "primeicons": "^6.0.1",
     "primereact": "^10.2.1",
+    "quill": "^1.3.7",
     "react": "^18",
     "react-dom": "^18",
     "react-markdown": "^9.0.1",

src/components/forms/ResourceForm.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import { InputText } from "primereact/inputtext";
+import { InputNumber } from "primereact/inputnumber";
+import { InputSwitch } from "primereact/inputswitch";
+import { Editor } from "primereact/editor";
+import { Button } from "primereact/button";
+import 'primeicons/primeicons.css';
+
+const ResourceForm = () => {
+    const [title, setTitle] = useState('');
+    const [summary, setSummary] = useState('');
+    const [checked, setChecked] = useState(false);
+    const [price, setPrice] = useState(0);
+    const [text, setText] = useState('');
+
+    const handleSubmit = (e) => {
+        e.preventDefault(); // Prevents the default form submission mechanism
+        const payload = {
+            title,
+            summary,
+            isPaidResource: checked,
+            price: checked ? price : null,
+            content: text
+        };
+        console.log(payload);
+    }
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div className="p-inputgroup flex-1">
+                <InputText value={title} onChange={(e) => setTitle(e.target.value)} placeholder="Title" />
+            </div>
+            <div className="p-inputgroup flex-1 mt-8">
+                <InputText value={summary} onChange={(e) => setSummary(e.target.value)} placeholder="Summary" />
+            </div>
+
+            <div className="p-inputgroup flex-1 mt-8 flex-col">
+                <p className="py-2">Paid Resource</p>
+                <InputSwitch checked={checked} onChange={(e) => setChecked(e.value)} />
+                <div className="p-inputgroup flex-1 py-4">
+                    {checked && (
+                        <>
+                            <i className="pi pi-bolt p-inputgroup-addon text-2xl text-yellow-500"></i>
+                            <InputNumber value={price} onValueChange={(e) => setPrice(e.value)} placeholder="Price (sats)" />
+                        </>
+                    )}
+                </div>
+            </div>
+            <div className="p-inputgroup flex-1 flex-col mt-8">
+                <span>Content</span>
+                <Editor value={text} onTextChange={(e) => setText(e.htmlValue)} style={{ height: '320px' }} />
+            </div>
+            <div className="flex justify-center mt-8">
+                <Button type="submit" severity="success" outlined label="Submit" />
+            </div>
+        </form>
+    );
+}
+
+export default ResourceForm;

src/components/navbar/user/UserAvatar.js

@@ -22,7 +22,7 @@ const UserAvatar = () => {
 
     const handleLogout = () => {
         window.localStorage.removeItem('user');
-        router.push('/');
+        router.push('/').then(() => window.location.reload());
     }
 
     let userAvatar;

src/hooks/useLogin.js

@@ -76,7 +76,7 @@ export const useLogin = () => {
             if (response.status !== 200) throw new Error('User not found');
 ;
             window.localStorage.setItem('user', JSON.stringify(response.data));
-            router.push('/');
+            router.push('/').then(() => window.location.reload());
         } catch (error) {
             // User not found, create a new user
             const kind0 = await fetchKind0([{ authors: [publicKey], kinds: [0] }], {});
@@ -87,7 +87,7 @@ export const useLogin = () => {
                 const createUserResponse = await axios.post(`/api/users`, payload);
                 if (createUserResponse.status === 201) {
                     window.localStorage.setItem('user', JSON.stringify(createUserResponse.data));
-                    router.push('/');
+                    router.push('/').then(() => window.location.reload());
                 } else {
                     console.error('Error creating user:', createUserResponse);
                 }
@@ -106,7 +106,7 @@ export const useLogin = () => {
             const hexSecretKey = secretKey.toString('hex');
 
             window.localStorage.setItem('user', JSON.stringify({ pubkey: publicKey, secretKey: hexSecretKey }));
-            router.push('/');
+            router.push('/').then(() => window.location.reload());
         } catch (error) {
             console.error('Error during anonymous login:', error);
             showToast('error', 'Error Logging In', 'Failed to log in');

src/pages/content.js

@@ -1,30 +0,0 @@
-import React, { useEffect } from 'react';
-import CoursesCarousel from '@/components/courses/CoursesCarousel'
-import WorkshopsCarousel from '@/components/workshops/WorkshopsCarousel'
-import MenuTab from '@/components/menutab/MenuTab'
-import { useNostr } from '@/hooks/useNostr'
-
-const homeItems = [
-    { label: 'Top', icon: 'pi pi-star' },
-    { label: 'Courses', icon: 'pi pi-desktop' },
-    { label: 'Workshops', icon: 'pi pi-cog' },
-    { label: 'Resources', icon: 'pi pi-book' },
-    { label: 'Streams', icon: 'pi pi-video' }
-  ];
-
-export default function Content() {
-  const { fetchResources, fetchCourses } = useNostr();
-
-  useEffect(() => {
-    fetchResources();
-    fetchCourses();
-  }, [fetchResources, fetchCourses]);
-
-  return (
-      <main>
-        <MenuTab items={homeItems} />
-        <CoursesCarousel />
-        <WorkshopsCarousel />
-      </main>
-  )
-}

src/pages/create.js

@@ -0,0 +1,20 @@
+import React from "react";
+import MenuTab from "@/components/menutab/MenuTab";
+import ResourceForm from "@/components/forms/ResourceForm";
+
+const Create = () => {
+    const homeItems = [
+        { label: 'Course', icon: 'pi pi-desktop' },
+        { label: 'Workshop', icon: 'pi pi-cog' },
+        { label: 'Resource', icon: 'pi pi-book' },
+      ];
+    return (
+        <div className="w-fit mx-auto mt-8 flex flex-col justify-center">
+            <h1 className="text-center mb-8">Create</h1>
+            <MenuTab items={homeItems} />
+            <ResourceForm />
+        </div>
+    )
+}
+
+export default Create;

src/pages/profile.js

@@ -3,41 +3,50 @@ import { Button } from "primereact/button";
 import { DataTable } from 'primereact/datatable';
 import { Menu } from 'primereact/menu';
 import { Column } from 'primereact/column';
-import { useSelector } from "react-redux";
 import { useImageProxy } from "@/hooks/useImageProxy";
+import { useRouter } from "next/router";
 import useLocalStorage from "@/hooks/useLocalStorage";
+import MenuTab from "@/components/menutab/MenuTab";
 import Image from "next/image";
 
 const Profile = () => {
     const [user, setUser] = useLocalStorage('user', {});
     const { returnImageProxy } = useImageProxy();
     const menu = useRef(null);
+    const router = useRouter();
+
+    const homeItems = [
+        { label: 'All', icon: 'pi pi-star' },
+        { label: 'Courses', icon: 'pi pi-desktop' },
+        { label: 'Workshops', icon: 'pi pi-cog' },
+        { label: 'Resources', icon: 'pi pi-book' },
+      ];
 
     const purchases = [
-        {
+        // {
-            cost: 100,
+        //     cost: 100,
-            name: 'Course 1',
+        //     name: 'Course 1',
-            category: 'Education',
+        //     category: 'Education',
-            date: '2021-09-01'
+        //     date: '2021-09-01'
-        },
+        // },
-        {
+        // {
-            cost: 200,
+        //     cost: 200,
-            name: 'Course 2',
+        //     name: 'Course 2',
-            category: 'Education',
+        //     category: 'Education',
-            date: '2021-09-01'
+        //     date: '2021-09-01'
-        },
+        // },
-        {
+        // {
-            cost: 300,
+        //     cost: 300,
-            name: 'Course 3',
+        //     name: 'Course 3',
-            category: 'Education',
+        //     category: 'Education',
-            date: '2021-09-01'
+        //     date: '2021-09-01'
-        },
+        // },
-        {
+        // {
-            cost: 400,
+        //     cost: 400,
-            name: 'Course 4',
+        //     name: 'Course 4',
-            category: 'Education',
+        //     category: 'Education',
-            date: '2021-09-01'
+        //     date: '2021-09-01'
-        }
+        // }
     ];
 
     const menuItems = [
@@ -57,9 +66,15 @@ const Profile = () => {
         }
     ];
 
+    const header = (
+        <div className="flex flex-wrap align-items-center justify-content-between gap-2">
+            <span className="text-xl text-900 font-bold text-white">Purchases</span>
+        </div>
+    );
+
 
     return (
-        <div className="max-tab:w-[100vw] max-mob:w-[100vw]">
+        <div className="w-[90vw] mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
             <div className="w-[85vw] flex flex-col justify-center mx-auto max-tab:w-[100vw] max-mob:w-[100vw]">
                 <div className="relative flex w-full items-center justify-center">
                         <Image
@@ -83,12 +98,19 @@ const Profile = () => {
                     <Button label="Subscribe" className="p-button-raised p-button-success w-auto my-2 text-[#f8f8ff]" />
                 </div>
             </div>
-            <DataTable emptyMessage="No purchases" value={purchases} tableStyle={{ minWidth: '100%'}}>
+            <DataTable emptyMessage="No purchases" value={purchases} tableStyle={{ minWidth: '100%'}} header={header}>
                 <Column field="cost" header="Cost"></Column>
                 <Column field="name" header="Name"></Column>
                 <Column field="category" header="Category"></Column>
                 <Column field="date" header="Date"></Column>
             </DataTable>
+            <div className="border-y-2 border-gray-300 mt-12">
+                <h2 className="text-center my-4">Your Content</h2>
+            </div>
+            <div className="flex flex-row w-full justify-between px-4">
+                <MenuTab items={homeItems} />
+                <Button onClick={() => router.push('/create')} label="Create" severity="success" outlined className="mt-2" />
+            </div>
         </div>
     )
 }

src/styles/globals.css

@@ -70,3 +70,13 @@ h3 {
   height: auto;
   aspect-ratio: 16 / 9;
 }
+
+/* Hide scrollbars globally (need to be cautious with this approach) */
+.p-tabmenu .p-tabmenu-nav {
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.p-tabmenu .p-tabmenu-nav::-webkit-scrollbar {
+  display: none;
+}