From a545af2d9d67e1368693e87fafd71b9e83763441 Mon Sep 17 00:00:00 2001 From: ONEONUORA Date: Wed, 30 Apr 2025 13:51:17 -0700 Subject: [PATCH 1/2] feat: add profile page --- src/app/dashboard/analytics/page.tsx | 13 ++ src/app/dashboard/earnings/page.tsx | 15 ++ src/app/dashboard/feedback/page.tsx | 12 ++ src/app/dashboard/layout.tsx | 6 +- src/app/dashboard/notifications/page.tsx | 11 + .../profile/component/ProfileForm.tsx | 203 ++++++++++++++++++ .../dashboard/profile/component/Social.tsx | 116 ++++++++++ .../profile/component/UpdatePasswordForm.tsx | 111 ++++++++++ src/app/dashboard/profile/component/genre.tsx | 74 +++++++ .../profile/component/profileHeader.tsx | 41 ++++ .../profile/component/profilesidebar.tsx | 63 ++++++ src/app/dashboard/profile/genre/page.tsx | 12 ++ src/app/dashboard/profile/layout.tsx | 20 ++ src/app/dashboard/profile/page.tsx | 15 ++ src/app/dashboard/profile/password/page.tsx | 11 + src/app/dashboard/profile/social/page.tsx | 13 ++ 16 files changed, 731 insertions(+), 5 deletions(-) create mode 100644 src/app/dashboard/analytics/page.tsx create mode 100644 src/app/dashboard/earnings/page.tsx create mode 100644 src/app/dashboard/feedback/page.tsx create mode 100644 src/app/dashboard/notifications/page.tsx create mode 100644 src/app/dashboard/profile/component/ProfileForm.tsx create mode 100644 src/app/dashboard/profile/component/Social.tsx create mode 100644 src/app/dashboard/profile/component/UpdatePasswordForm.tsx create mode 100644 src/app/dashboard/profile/component/genre.tsx create mode 100644 src/app/dashboard/profile/component/profileHeader.tsx create mode 100644 src/app/dashboard/profile/component/profilesidebar.tsx create mode 100644 src/app/dashboard/profile/genre/page.tsx create mode 100644 src/app/dashboard/profile/layout.tsx create mode 100644 src/app/dashboard/profile/page.tsx create mode 100644 src/app/dashboard/profile/password/page.tsx create mode 100644 src/app/dashboard/profile/social/page.tsx diff --git a/src/app/dashboard/analytics/page.tsx b/src/app/dashboard/analytics/page.tsx new file mode 100644 index 0000000..9aef32b --- /dev/null +++ b/src/app/dashboard/analytics/page.tsx @@ -0,0 +1,13 @@ + + + +function AnalyticsPage() { + return ( +
+

Analytics

+

Analytics page content goes here.

+
+ ); +} + +export default AnalyticsPage \ No newline at end of file diff --git a/src/app/dashboard/earnings/page.tsx b/src/app/dashboard/earnings/page.tsx new file mode 100644 index 0000000..ee55de9 --- /dev/null +++ b/src/app/dashboard/earnings/page.tsx @@ -0,0 +1,15 @@ + + + +function EarningsPage() { + return ( +
+

Earnings

+

+ This is the earnings page. You can view your earnings here. +

+
+ ); +} + +export default EarningsPage; \ No newline at end of file diff --git a/src/app/dashboard/feedback/page.tsx b/src/app/dashboard/feedback/page.tsx new file mode 100644 index 0000000..d4225e5 --- /dev/null +++ b/src/app/dashboard/feedback/page.tsx @@ -0,0 +1,12 @@ + + +function FeedbackPage() { + return ( +
+

Feedback

+

We value your feedback! Please let us know your thoughts.

+ {/* Add your feedback form or component here */} +
+ ); +} +export default FeedbackPage; \ No newline at end of file diff --git a/src/app/dashboard/layout.tsx b/src/app/dashboard/layout.tsx index 46dd870..11f959f 100644 --- a/src/app/dashboard/layout.tsx +++ b/src/app/dashboard/layout.tsx @@ -8,13 +8,9 @@ export default function RootLayout({ children: React.ReactNode; }) { return ( - -
-
{children}
+
{children}
- - ); } diff --git a/src/app/dashboard/notifications/page.tsx b/src/app/dashboard/notifications/page.tsx new file mode 100644 index 0000000..8cf996c --- /dev/null +++ b/src/app/dashboard/notifications/page.tsx @@ -0,0 +1,11 @@ + + +function NotificationsPage() { + return ( +
+

Notifications

+

This is the notifications page.

+
+ ); +} +export default NotificationsPage; \ No newline at end of file diff --git a/src/app/dashboard/profile/component/ProfileForm.tsx b/src/app/dashboard/profile/component/ProfileForm.tsx new file mode 100644 index 0000000..723e893 --- /dev/null +++ b/src/app/dashboard/profile/component/ProfileForm.tsx @@ -0,0 +1,203 @@ +'use client'; + +import { useState, useRef, ChangeEvent } from "react"; +import Image from "next/image"; + +interface ProfileFormData { + firstName: string; + lastName: string; + pseudonym: string; + email: string; + bio: string; + profilePicture: string | null; + } + +export const ProfileForm = () => { + + + const [formData, setFormData] = useState({ + firstName: "Joseph", + lastName: "Paul", + pseudonym: "Joe Paul", + email: "example@gmail.com", + bio: "", + profilePicture: null, + }); + + const [preview, setPreview] = useState(null); + const fileInputRef = useRef(null); + + const handleInputChange = ( + e: ChangeEvent + ) => { + const { name, value } = e.target; + setFormData((prev) => ({ + ...prev, + [name]: value, + })); + }; + + const handleImageUpload = (e: ChangeEvent) => { + const file = e.target.files?.[0]; + if (!file) return; + + const reader = new FileReader(); + reader.onload = () => { + setPreview(reader.result as string); + setFormData((prev) => ({ + ...prev, + profilePicture: reader.result as string, + })); + }; + reader.readAsDataURL(file); + }; + + const triggerFileInput = () => { + fileInputRef.current?.click(); + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + console.log("Form submitted:", formData); + + }; + + return ( +
+
+
+
+
+ {preview ? ( + Profile Preview + ) : ( +
+ {/* Placeholder silhouette if no image */} + + + +
+ )} +
+ +
+ +
+ +
+
+ + +
+ +
+ + +
+ +
+ + +
+ +
+ + +
+
+ +
+ +