feat: add email icon

src/api/user.ts

@@ -47,6 +47,7 @@ export interface UserDocument {
   profileVisibility: AllowedProfileVisibility;
   publicConfig?: {
     isAvailableForHire: boolean;
+    isEmailVisible: boolean;
     headline: string;
     roadmaps: string[];
     customRoadmaps: string[];
@@ -78,11 +79,7 @@ type ProgressResponse = {
 
 export type GetPublicProfileResponse = Omit<
   UserDocument,
-  | 'password'
-  | 'verificationCode'
-  | 'resetPasswordCode'
-  | 'resetPasswordCodeAt'
-  | 'email'
+  'password' | 'verificationCode' | 'resetPasswordCode' | 'resetPasswordCodeAt'
 > & {
   activity: UserActivityCount;
   roadmaps: ProgressResponse[];

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -30,6 +30,7 @@ export function UpdatePublicProfileForm() {
 
   const [publicProfileUrl, setPublicProfileUrl] = useState('');
   const [isAvailableForHire, setIsAvailableForHire] = useState(false);
+  const [isEmailVisible, setIsEmailVisible] = useState(true);
   const [headline, setHeadline] = useState('');
   const [username, setUsername] = useState('');
   const [roadmapVisibility, setRoadmapVisibility] =
@@ -56,6 +57,7 @@ export function UpdatePublicProfileForm() {
       `${import.meta.env.PUBLIC_API_URL}/v1-update-public-profile-config`,
       {
         isAvailableForHire,
+        isEmailVisible,
         profileVisibility,
         headline,
         username,
@@ -116,6 +118,7 @@ export function UpdatePublicProfileForm() {
     setRoadmaps(publicConfig?.roadmaps || []);
     setCustomRoadmapVisibility(publicConfig?.customRoadmapVisibility || 'none');
     setIsAvailableForHire(publicConfig?.isAvailableForHire || false);
+    setIsEmailVisible(publicConfig?.isEmailVisible ?? true);
 
     setIsLoading(false);
   };
@@ -450,6 +453,19 @@ export function UpdatePublicProfileForm() {
         </div>
 
         <div>
+          <div className="flex items-center gap-2">
+            <input
+              type="checkbox"
+              name="isEmailVisible"
+              id="isEmailVisible"
+              checked={isEmailVisible}
+              onChange={(e) => setIsEmailVisible(e.target.checked)}
+            />
+            <label htmlFor="isEmailVisible" className="">
+              Show my Email
+            </label>
+          </div>
+
           <div className="flex items-center gap-2">
             <input
               type="checkbox"

src/components/UserPublicProfile/UserPublicProfileHeader.tsx

@@ -1,4 +1,4 @@
-import { Github, Globe, LinkedinIcon, Twitter } from 'lucide-react';
+import { Github, Globe, LinkedinIcon, Mail, Twitter } from 'lucide-react';
 import type { GetPublicProfileResponse } from '../../api/user';
 
 type UserPublicProfileHeaderProps = {
@@ -7,8 +7,9 @@ type UserPublicProfileHeaderProps = {
 
 export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
   const { userDetails } = props;
-  const { name, links, publicConfig, avatar } = userDetails;
-  const { headline, isAvailableForHire } = publicConfig!;
+
+  const { name, links, publicConfig, avatar, email } = userDetails;
+  const { headline, isAvailableForHire, isEmailVisible } = publicConfig!;
 
   return (
     <div className="flex items-center gap-8">
@@ -37,6 +38,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
           )}
           {links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
           {links?.website && <UserLink href={links?.website} icon={Globe} />}
+          {isEmailVisible && <UserLink href={`mailto:${email}`} icon={Mail} />}
         </div>
       </div>
     </div>