-
-
- {brand?.name}
-
-
-
- {brand?.description}
+
+
-
-
+
+
-
-
+
+ {brand?.name}
+
+ {brand?.description}
+ {/* {isOwner && ( */}
+ {/*
+
+ EDIT BRAND
+ */}
+ {/* )} */}
+
- SHARE
+ backgroundOrigin: "border-box",
+ backgroundClip: "content-box, border-box",
+ WebkitBackgroundClip: "content-box, border-box", // For Safari
+ display: "block",
+ width: "180px",
+ height: "50px",
+ textAlign: "center",
+ }}
+ >
+ SHARE
+
+
+ {brand?.website && (
+
+ 
+
+ )}
+ {brand?.twitter && (
+
+ 
+
+ )}
+ {brand?.instagram && (
+
+ 
+
+ )}
+ {brand?.facebook && (
+
+ 
+
+ )}
+ {brand?.discord && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "whatsapp" && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "youtube" && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "telegram" && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "linkedin" && (
+
+ 
+
+ )}
+ {brand?.additional_link && brand.additional_link === "google" && (
+
+ 
+
+ )}
+ {brand?.additional_link && brand.additional_link === "tiktok" && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "snapchat" && (
+
+ 
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "pinterest" && (
+
+ 
+
+ )}
+
+
+
+ )}
+ {brand?.twitter && (
+
+
+
+ )}
+ {brand?.instagram && (
+
+
+
+ )}
+ {brand?.facebook && (
+
+
+
+ )}
+ {brand?.discord && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "whatsapp" && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "youtube" && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "telegram" && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "linkedin" && (
+
+
+
+ )}
+ {brand?.additional_link && brand.additional_link === "google" && (
+
+
+
+ )}
+ {brand?.additional_link && brand.additional_link === "tiktok" && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "snapchat" && (
+
+
+
+ )}
+ {brand?.additional_link &&
+ brand.additional_link === "pinterest" && (
+
+
+
+ )}
+
- {brand.website && (
-
-
-
- )}
- {brand.twitter && (
-
-
-
- )}
- {brand.instagram && (
-
-
-
- )}
- {brand.facebook && (
-
-
-
- )}
- {brand.discord && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'whatsapp' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'youtube' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'telegram' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'linkedin' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'google' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'tiktok' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'snapchat' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'pinterest' && (
-
-
-
- )}
-
+
-
- )}
- {brand.twitter && (
-
-
-
- )}
- {brand.instagram && (
-
-
-
- )}
- {brand.facebook && (
-
-
-
- )}
- {brand.discord && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'whatsapp' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'youtube' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'telegram' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'linkedin' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'google' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'tiktok' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'snapchat' && (
-
-
-
- )}
- {brand.additional_link && brand.additional_link === 'pinterest' && (
-
-
-
- )}
-
+
+ Collections
-
- Collections
-
-
+
{collections?.map((nft, index) => (
- Phygitals
+
+ Phygitals
+
-
+
-
{nfts?.map((nft, index) => (
-
+
-
{loading && (
{
}}
id="popupmodal"
>
-
-
-
+
+
+
{
)}
-
- )
-}
+ );
+};
-export default Brand;
\ No newline at end of file
+export default Brand;
diff --git a/src/app/profile-setting/page.js b/src/app/profile-setting/page.js
index f75342b..369d480 100644
--- a/src/app/profile-setting/page.js
+++ b/src/app/profile-setting/page.js
@@ -1,626 +1,883 @@
"use client";
-import React, { useState, useEffect } from 'react';
-import Header1 from '../../components/header1';
-import Footer from '../../components/footer';
-import { useAccount } from 'wagmi';
-import { ToastContainer, toast } from 'react-toastify';
-import 'react-toastify/dist/ReactToastify.css';
-import Link from 'next/link';
-import { v4 as uuidv4 } from 'uuid';
+import React, { useState, useEffect } from "react";
+import Header1 from "../../components/header1";
+import Footer from "../../components/footer";
+import { useAccount } from "wagmi";
+import { ToastContainer, toast } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import Link from "next/link";
+import { v4 as uuidv4 } from "uuid";
function ProfileSettingsPage() {
- const { address } = useAccount();
+ const { address } = useAccount();
- const [displayName, setDisplayName] = useState('');
- const [userName, setUserName] = useState('');
- const [bio, setBio] = useState('');
- const [website, setWebsite] = useState('');
- const [x, setx] = useState('');
- const [instagram, setInstagram] = useState('');
- const [discord, setDiscord] = useState('');
- const [allusernames,setAllUsernames] = useState([]);
- const [coverImage, setCoverImage] = useState('');
- const [profileImage, setProfileImage] = useState('');
- const [email, setEmail] = useState('');
- const [profileid, setId] = useState('');
- const [selectedSocialLink, setSelectedSocialLink] = useState('');
- const [link, setLink] = useState('');
+ const [displayName, setDisplayName] = useState("");
+ const [userName, setUserName] = useState("");
+ const [bio, setBio] = useState("");
+ const [website, setWebsite] = useState("");
+ const [x, setx] = useState("");
+ const [instagram, setInstagram] = useState("");
+ const [discord, setDiscord] = useState("");
+ const [allusernames, setAllUsernames] = useState([]);
+ const [coverImage, setCoverImage] = useState("");
+ const [profileImage, setProfileImage] = useState("");
+ const [email, setEmail] = useState("");
+ const [profileid, setId] = useState("");
+ const [selectedSocialLink, setSelectedSocialLink] = useState("");
+ const [link, setLink] = useState("");
- const [isEditing, setIsEditing] = useState(false);
- const [isCoverHovered, setIsCoverHovered] = useState(false);
- const [isProfileHovered, setIsProfileHovered] = useState(false);
- const [isCoverPopupVisible, setIsCoverPopupVisible] = useState(false);
- const [isProfilePopupVisible, setIsProfilePopupVisible] = useState(false);
- const [selectedFile, setSelectedFile] = useState(null);
- const [isUploading, setIsUploading] = useState(false);
- const [showForm, setShowForm] = useState(false);
- const [isAddressesOpen, setIsAddressesOpen] = useState(false);
+ const [isEditing, setIsEditing] = useState(false);
+ const [isCoverHovered, setIsCoverHovered] = useState(false);
+ const [isProfileHovered, setIsProfileHovered] = useState(false);
+ const [isCoverPopupVisible, setIsCoverPopupVisible] = useState(false);
+ const [isProfilePopupVisible, setIsProfilePopupVisible] = useState(false);
+ const [selectedFile, setSelectedFile] = useState(null);
+ const [isUploading, setIsUploading] = useState(false);
+ const [showForm, setShowForm] = useState(false);
+ const [isAddressesOpen, setIsAddressesOpen] = useState(false);
+ const [currentSection, setCurrentSection] = useState("profile");
+ const [validationError, setValidationError] = useState("");
- const [currentSection, setCurrentSection] = useState('profile');
- const [validationError, setValidationError] = useState('');
+ const [addresses, setAddresses] = useState([
+ {
+ id: "",
+ full_name: "",
+ street_address: "",
+ street_address_2: "",
+ city: "",
+ pincode: "",
+ country: "",
+ },
+ ]);
+ const countries = ["USA", "Canada", "UK", "Australia"];
- const [addresses, setAddresses] = useState([{ id: '', full_name: '', street_address: '', street_address_2: '', city: '', pincode: '', country: '' }]);
- const countries = ['USA', 'Canada', 'UK', 'Australia'];
+ const handleAddAddress = () => {
+ // Use functional update to ensure the latest state is used
+ setAddresses((prevAddresses) => [
+ ...prevAddresses,
+ {
+ id: uuidv4(),
+ full_name: "",
+ street_address: "",
+ street_address_2: "",
+ city: "",
+ pincode: "",
+ country: "",
+ },
+ ]);
+ };
- const handleAddAddress = () => {
- // Use functional update to ensure the latest state is used
- setAddresses(prevAddresses => [
- ...prevAddresses,
- { id: uuidv4(), full_name: '', street_address: '', street_address_2: '', city: '', pincode: '', country: '' }
- ]);
- };
+ const handleAddressChange = (index, field, value) => {
+ // Use functional update to ensure the latest state is used
+ setAddresses((prevAddresses) => {
+ const newAddresses = [...prevAddresses];
+ newAddresses[index][field] = value;
+ return newAddresses; // Return the updated addresses
+ });
+ };
- const handleAddressChange = (index, field, value) => {
- // Use functional update to ensure the latest state is used
- setAddresses(prevAddresses => {
- const newAddresses = [...prevAddresses];
- newAddresses[index][field] = value;
- return newAddresses; // Return the updated addresses
- });
- };
+ const baseUri = process.env.NEXT_PUBLIC_URI || "https://app.myriadflow.com";
- const baseUri = process.env.NEXT_PUBLIC_URI || 'https://app.myriadflow.com';
+ const deleteAddress = async (id) => {
+ try {
+ const response = await fetch(`${baseUri}/profiles/addresses/${id}`, {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
- const deleteAddress = async (id) => {
- try {
- const response = await fetch(`${baseUri}/profiles/addresses/${id}`, {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- },
- });
+ if (response.ok) {
+ toast.success("Address deleted successfully!");
+ window.location.reload();
+ } else {
+ const errorData = await response.json();
+ toast.error(`Failed to delete address: ${errorData.error}`);
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ toast.error("An error occurred while deleting the address.");
+ }
+ };
- if (response.ok) {
- toast.success('Address deleted successfully!');
- window.location.reload();
- } else {
- const errorData = await response.json();
- toast.error(`Failed to delete address: ${errorData.error}`);
- }
- } catch (error) {
- console.error('Error:', error);
- toast.error('An error occurred while deleting the address.');
+ const deleteAccount = async () => {
+ try {
+ const response = await fetch(
+ `${baseUri}/profiles/walletandemail/${address}/${email}`,
+ {
+ method: "DELETE",
+ headers: {
+ "Content-Type": "application/json",
+ },
}
- };
+ );
- const deleteAccount = async () => {
- try {
- const response = await fetch(`${baseUri}/profiles/walletandemail/${address}/${email}`, {
- method: 'DELETE',
- headers: {
- 'Content-Type': 'application/json',
- },
- });
+ if (response.ok) {
+ toast.success("Account deleted successfully!");
+ window.location.reload();
+ } else {
+ const errorData = await response.json();
+ toast.error(`Failed to delete account: ${errorData.error}`);
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ toast.error("An error occurred while deleting the account.");
+ }
+ };
- if (response.ok) {
- toast.success('Account deleted successfully!');
- window.location.reload();
- } else {
- const errorData = await response.json();
- toast.error(`Failed to delete account: ${errorData.error}`);
- }
- } catch (error) {
- console.error('Error:', error);
- toast.error('An error occurred while deleting the account.');
- }
- };
+ const handleDelete = () => {
+ setShowForm(true);
+ };
+
+ const handleSave = async () => {
+ // Validate username length
+ if (userName.length < 4) {
+ setValidationError("Username must be at least 4 characters long.");
+ return;
+ } else if (userName !== userName.toLowerCase()) {
+ setValidationError("Username must be in lowercase.");
+ return;
+ } else if (userName.includes(" ")) {
+ setValidationError("Username cannot contain spaces.");
+ return;
+ } else if (allusernames.some((profile) => profile.username === userName)) {
+ setValidationError("This username is already taken.");
+ return;
+ } else if (!/^[a-z]+$/.test(userName)) {
+ setValidationError(
+ "Username can only contain letters (no special characters)."
+ );
+ return;
+ } else {
+ setValidationError("");
+ }
- const handleDelete = () => {
- setShowForm(true)
+ const profileData = {
+ name: displayName,
+ email: email,
+ username: userName,
+ bio: bio,
+ website: website,
+ x: x,
+ instagram: instagram,
+ discord: discord,
+ cover_image: coverImage,
+ profile_image: profileImage,
+ selected_social_link: selectedSocialLink,
+ link: link,
};
- const handleSave = async () => {
- // Validate username length
- if (userName.length < 4) {
- setValidationError('Username must be at least 4 characters long.');
- return;
- } else if (userName !== userName.toLowerCase()) {
- setValidationError('Username must be in lowercase.');
- return;
- } else if (userName.includes(' ')) {
- setValidationError('Username cannot contain spaces.');
- return;
- } else if (allusernames.some(profile => profile.username === userName)) {
- setValidationError('This username is already taken.');
- return;
- } else if (!/^[a-z]+$/.test(userName)) {
- setValidationError('Username can only contain letters (no special characters).');
- return;
- } else {
- setValidationError('');
- }
+ try {
+ const response = await fetch(`${baseUri}/profiles/${address}`, {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(profileData),
+ });
- const profileData = {
- name: displayName,
- email: email,
- username: userName,
- bio: bio,
- website: website,
- x: x,
- instagram: instagram,
- discord: discord,
- cover_image: coverImage,
- profile_image: profileImage,
- selected_social_link: selectedSocialLink,
- link: link
- };
+ await Promise.all(
+ addresses.map(async (addressesall, index) => {
+ if (addressesall.id && addressesall.id === addressesall.id) {
+ try {
+ const addressData = await fetch(
+ `${baseUri}/profiles/addresses/${profileid}`,
+ {
+ method: "PUT",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(addresses),
+ }
+ );
- try {
- const response = await fetch(`${baseUri}/profiles/${address}`, {
- method: 'PUT',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(profileData)
- });
+ if (addressData.ok) {
+ console.log("Address Updated Successfully");
+ }
+ } catch (error) {
+ console.error("Error fetching address data", error);
+ }
+ } else {
+ try {
+ const responseAddress = await fetch(
+ `${baseUri}/profiles/addresses/${profileid}`,
+ {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ body: JSON.stringify(addresses),
+ }
+ );
+ if (responseAddress.ok) {
+ console.log("Address Added Successfully");
+ }
+ } catch (error) {
+ console.error("Failed to save profile settings.");
+ }
+ }
+ })
+ );
- await Promise.all(addresses.map(async (addressesall, index) => {
- if (addressesall.id && addressesall.id === addressesall.id) {
- try {
- const addressData = await fetch(`${baseUri}/profiles/addresses/${profileid}`, {
- method: "PUT",
- headers: {
- 'Content-Type': 'application/json',
- },
- body: JSON.stringify(addresses)
- });
+ if (response.ok) {
+ console.log("Profile settings saved successfully!");
+ setIsEditing(false);
+ } else {
+ console.error("Failed to save profile settings.");
+ }
+ } catch (error) {
+ console.error("Error:", error);
+ }
+ };
- if (addressData.ok) {
- console.log("Address Updated Successfully");
- }
- } catch (error) {
- console.error('Error fetching address data', error);
- }
- } else {
- try {
- const responseAddress = await fetch(`${baseUri}/profiles/addresses/${profileid}`, {
- method: 'POST',
- headers: {
- 'Content-Type': 'application/json'
- },
- body: JSON.stringify(addresses)
- });
- if (responseAddress.ok) {
- console.log("Address Added Successfully");
- }
- } catch (error) {
- console.error('Failed to save profile settings.');
- }
- }
- }));
+ const handleFileChange = (event) => {
+ const files = event.target.files;
+ if (files && files.length > 0) {
+ setSelectedFile(files[0]);
+ }
+ };
- if (response.ok) {
- console.log('Profile settings saved successfully!');
- setIsEditing(false);
- } else {
- console.error('Failed to save profile settings.');
- }
- } catch (error) {
- console.error('Error:', error);
- }
- };
+ const handleFileUpload = async (type) => {
+ if (!selectedFile) return;
+ setIsUploading(true);
+ const formData = new FormData();
+ formData.set("file", selectedFile);
- const handleFileChange = (event) => {
- const files = event.target.files;
- if (files && files.length > 0) {
- setSelectedFile(files[0]);
+ try {
+ const response = await fetch("/api/files", {
+ method: "POST",
+ body: formData,
+ });
+
+ if (response.ok) {
+ const data = await response.json();
+ const ipfsHash = data.IpfsHash;
+ if (type === "cover") {
+ setCoverImage(ipfsHash);
+ console.log("Coverimage", coverImage);
+ setIsCoverPopupVisible(false);
+ } else if (type === "profile") {
+ setProfileImage(ipfsHash);
+ setIsProfilePopupVisible(false);
}
- };
+ setIsEditing(true); // Enable save button after upload
+ } else {
+ console.error("Failed to upload image.");
+ }
+ } catch (error) {
+ console.error("Error uploading file:", error);
+ } finally {
+ setIsUploading(false);
+ }
+ };
- const handleFileUpload = async (type) => {
- if (!selectedFile) return;
- setIsUploading(true);
- const formData = new FormData();
- formData.set('file', selectedFile);
+ const handleEditClick = (type) => {
+ if (type === "cover") {
+ setIsCoverPopupVisible(true);
+ } else if (type === "profile") {
+ setIsProfilePopupVisible(true);
+ }
+ };
- try {
- const response = await fetch("/api/files", {
- method: 'POST',
- body: formData
- });
+ const handleButtonClick = (section) => {
+ setCurrentSection(section);
+ };
- if (response.ok) {
- const data = await response.json();
- const ipfsHash = data.IpfsHash;
- if (type === 'cover') {
- setCoverImage(ipfsHash);
- console.log("Coverimage", coverImage)
- setIsCoverPopupVisible(false);
- } else if (type === 'profile') {
- setProfileImage(ipfsHash);
- setIsProfilePopupVisible(false);
- }
- setIsEditing(true); // Enable save button after upload
- } else {
- console.error('Failed to upload image.');
+ useEffect(() => {
+ const getUserData = async () => {
+ if (address) {
+ try {
+ const response = await fetch(
+ `${baseUri}/profiles/wallet/${address}`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
}
- } catch (error) {
- console.error('Error uploading file:', error);
- } finally {
- setIsUploading(false);
- }
- };
+ );
- const handleEditClick = (type) => {
- if (type === 'cover') {
- setIsCoverPopupVisible(true);
- } else if (type === 'profile') {
- setIsProfilePopupVisible(true);
+ if (response.ok) {
+ const data = await response.json();
+ setId(data.id);
+ setDisplayName(data.name);
+ setUserName(data.username);
+ setCoverImage(data.cover_image);
+ setProfileImage(data.profile_image);
+ setBio(data.bio);
+ setWebsite(data.website);
+ setx(data.x);
+ setInstagram(data.instagram);
+ setDiscord(data.discord);
+ setSelectedSocialLink(data.selected_social_link);
+ setLink(data.link);
+ setEmail(data.email);
+ } else {
+ console.log("No user found");
+ }
+ } catch (error) {
+ console.error("Error fetching user data", error);
}
+ }
};
+ getUserData();
+ }, [address]);
- const handleButtonClick = (section) => {
- setCurrentSection(section);
- };
-
- useEffect(() => {
- const getUserData = async () => {
- if (address) {
- try {
- const response = await fetch(`${baseUri}/profiles/wallet/${address}`, {
- method: 'GET',
- headers: {
- 'Content-Type': 'application/json',
- },
- });
-
- if (response.ok) {
- const data = await response.json();
- setId(data.id);
- setDisplayName(data.name);
- setUserName(data.username);
- setCoverImage(data.cover_image);
- setProfileImage(data.profile_image);
- setBio(data.bio);
- setWebsite(data.website);
- setx(data.x);
- setInstagram(data.instagram);
- setDiscord(data.discord);
- setSelectedSocialLink(data.selected_social_link);
- setLink(data.link);
- setEmail(data.email);
- } else {
- console.log('No user found');
- }
- } catch (error) {
- console.error('Error fetching user data', error);
- }
+ useEffect(() => {
+ if (profileid) {
+ const getAddressData = async () => {
+ try {
+ const addressData = await fetch(
+ `${baseUri}/profiles/addresses/${profileid}`,
+ {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
}
- };
- getUserData();
- }, [address]);
+ );
- useEffect(() => {
- if (profileid) {
- const getAddressData = async () => {
- try {
- const addressData = await fetch(`${baseUri}/profiles/addresses/${profileid}`, {
- method: "GET",
- headers: {
- 'Content-Type': 'application/json',
- },
- });
+ if (addressData.ok) {
+ const addressdata = await addressData.json();
+ setAddresses(addressdata);
+ }
+ } catch (error) {
+ console.error("Error fetching address data", error);
+ }
+ };
- if (addressData.ok) {
- const addressdata = await addressData.json();
- setAddresses(addressdata);
- }
- } catch (error) {
- console.error('Error fetching address data', error);
- }
- };
+ getAddressData();
+ }
+ }, [profileid]);
+
+ useEffect(() => {
+ if (address) {
+ const getAllProfile = async () => {
+ try {
+ const usernameData = await fetch(`${baseUri}/profiles/all`, {
+ method: "GET",
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
- getAddressData();
+ if (usernameData.ok) {
+ const usernamedata = await usernameData.json();
+ setAllUsernames(usernamedata);
+ }
+ } catch (error) {
+ console.error("Error fetching address data", error);
}
- }, [profileid])
+ };
- useEffect(() => {
- if (address) {
- const getAllProfile = async () => {
- try {
- const usernameData = await fetch(`${baseUri}/profiles/all`, {
- method: "GET",
- headers: {
- 'Content-Type': 'application/json',
- },
- });
+ getAllProfile();
+ }
+ }, [address]);
- if (usernameData.ok) {
- const usernamedata = await usernameData.json();
- setAllUsernames(usernamedata);
- }
- } catch (error) {
- console.error('Error fetching address data', error);
- }
- };
+ return (
+ <>
+ {
+
- getAllProfile();
- }
- }, [address])
+ + Profile Settings +
+
+ {/* Sidebar */}
+
+ {" "}
+
+ {" "} +
+ + {instagram || x ? ( +
+ {" "} +
+ + {instagram || x ? ( +
+
- + You have completed the verification process. Your profile is + visible on the Users page. +
- return ( - <> -
- 
+
+
+
+ ) : (
+
+
+
+
+
+
+ )}
+
+ + Click to proceed with the verification process to become a + creator and gain the trust of the community! +
+ +Profile Settings
-
- {/* Sidebar */}
-
-
-
+ {/* Main Content */} +
-
+ {/* Main Content */} +
+ {currentSection === "profile" ? (
+ <>
+ {/* Cover image */}
+
setIsCoverHovered(true)}
+ onMouseLeave={() => setIsCoverHovered(false)}
+ onClick={() => handleEditClick("cover")}
+ >
+ {isCoverHovered && (
+
+ )}
+
+
- {/* Main Content */}
- setIsProfileHovered(true)}
+ onMouseLeave={() => setIsProfileHovered(false)}
+ onClick={() => handleEditClick("profile")}
+ >
+ 
+
+ {isProfileHovered && (
- {instagram || x ? (
-
+
-
-
-
-
-
- ) : (
- You have completed the verification process. Your profile is visible on the Users page.
- -
-
-
-
-
-
-
- )}
-
+ )}
- Click to proceed with the verification process to become a creator and gain the trust of the community!
- -
- {currentSection === 'profile' ? (
- <>
- {/* Cover image */}
-
setIsCoverHovered(true)}
- onMouseLeave={() => setIsCoverHovered(false)}
- onClick={() => handleEditClick('cover')}
- >
- {isCoverHovered && (
-
- )}
-
-
-
+ setIsProfileHovered(true)}
- onMouseLeave={() => setIsProfileHovered(false)}
- onClick={() => handleEditClick('profile')}
- >
- 
-
- {isProfileHovered && (
-
- )}
-
-
+
+ {
+ setDisplayName(e.target.value);
+ setIsEditing(true);
+ }}
+ style={{
+ padding: "10px",
+ borderRadius: "8px",
+ border: "1px solid #D1D5DB",
+ width: "50%",
+ marginBottom: "20px",
+ }}
+ />
+
+ {
+ setEmail(e.target.value);
+ setIsEditing(true);
+ }}
+ style={{
+ padding: "10px",
+ borderRadius: "8px",
+ border: "1px solid #D1D5DB",
+ width: "50%",
+ marginBottom: "20px",
+ }}
+ />
-
-
- {
- setDisplayName(e.target.value);
- setIsEditing(true);
- }}
- style={{ padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB', width: '50%', marginBottom: '20px' }}
- />
-
- {
- setEmail(e.target.value);
- setIsEditing(true);
- }}
- style={{ padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB', width: '50%', marginBottom: '20px' }}
- />
-
-
- {
- setUserName(e.target.value);
- setIsEditing(true);
- }}
- style={{ padding: '10px', borderRadius: '8px', border: '1px solid #D1D5DB', width: '50%', marginBottom: '20px' }}
- />
- {validationError && (
-
- {validationError} -
- )} - - -