feat: add daily dev link in profile (#5948)

src/api/user.ts

@@ -44,6 +44,7 @@ export interface UserDocument {
     github?: string;
     linkedin?: string;
     twitter?: string;
+    dailydev?: string;
     website?: string;
   };
   username?: string;

src/components/DailyDevIcon.tsx

@@ -0,0 +1,15 @@
+import type { SVGProps } from 'react';
+
+export function DailyDevIcon(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg viewBox="0 0 32 18" xmlns="http://www.w3.org/2000/svg" {...props}>
+      <g fill="currentColor" fillRule="nonzero">
+        <path
+          d="M26.633 8.69l-3.424-3.431 1.711-3.43 5.563 5.575c.709.71.709 1.861 0 2.572l-6.847 6.86c-.709.711-1.858.711-2.567 0a1.821 1.821 0 010-2.571l5.564-5.575z"
+          fillOpacity="0.64"
+        ></path>
+        <path d="M21.07.536a1.813 1.813 0 012.568 0l1.283 1.286L9.945 16.83c-.709.71-1.858.71-2.567 0l-1.284-1.287L21.071.536zm-6.418 4.717l-2.567 2.572-3.424-3.43-4.28 4.288 3.424 3.43-1.71 3.43L.531 9.97a1.821 1.821 0 010-2.572L7.378.537A1.813 1.813 0 019.945.535l4.707 4.717z"></path>
+      </g>
+    </svg>
+  );
+}

src/components/UpdateProfile/UpdatePublicProfileForm.tsx

@@ -9,7 +9,8 @@ import type {
 } from '../../api/user';
 import { SelectionButton } from '../RoadCard/SelectionButton';
 import {
-  ArrowUpRight, Check,
+  ArrowUpRight,
+  Check,
   CheckCircle,
   Copy,
   Eye,
@@ -64,6 +65,7 @@ export function UpdatePublicProfileForm() {
   const [github, setGithub] = useState('');
   const [twitter, setTwitter] = useState('');
   const [linkedin, setLinkedin] = useState('');
+  const [dailydev, setDailydev] = useState('');
   const [website, setWebsite] = useState('');
 
   const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]);
@@ -94,6 +96,7 @@ export function UpdatePublicProfileForm() {
         website,
         name,
         email,
+        dailydev,
       },
     );
 
@@ -141,6 +144,7 @@ export function UpdatePublicProfileForm() {
     setGithub(links?.github || '');
     setTwitter(links?.twitter || '');
     setLinkedin(links?.linkedin || '');
+    setDailydev(links?.dailydev || '');
     setWebsite(links?.website || '');
     setProfileVisibility(defaultProfileVisibility || 'public');
     setHeadline(publicConfig?.headline || '');
@@ -528,6 +532,23 @@ export function UpdatePublicProfileForm() {
             onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
           />
         </div>
+        <div className="flex w-full flex-col">
+          <label
+            htmlFor="dailydev"
+            className="text-sm leading-none text-slate-500"
+          >
+            daily.dev
+          </label>
+          <input
+            type="text"
+            name="dailydev"
+            id="dailydev"
+            className="mt-2 block w-full rounded-lg border border-gray-300 px-3 py-2 shadow-sm outline-none placeholder:text-gray-400 focus:ring-2 focus:ring-black focus:ring-offset-1"
+            placeholder="https://app.daily.dev/username"
+            value={dailydev}
+            onChange={(e) => setDailydev((e.target as HTMLInputElement).value)}
+          />
+        </div>
 
         <div className="flex w-full flex-col">
           <label

src/components/UserPublicProfile/UserPublicProfileHeader.tsx

@@ -1,5 +1,12 @@
-import { Github, Globe, LinkedinIcon, Mail, Twitter } from 'lucide-react';
+import {
+  Github,
+  Globe,
+  LinkedinIcon,
+  Mail,
+  Twitter,
+} from 'lucide-react';
 import type { GetPublicProfileResponse } from '../../api/user';
+import { DailyDevIcon } from '../DailyDevIcon';
 
 type UserPublicProfileHeaderProps = {
   userDetails: GetPublicProfileResponse;
@@ -12,7 +19,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
   const { headline, isAvailableForHire, isEmailVisible } = publicConfig!;
 
   return (
-    <div className="flex items-center gap-6 container bg-white border p-8 rounded-xl">
+    <div className="container flex items-center gap-6 rounded-xl border bg-white p-8">
       <img
         src={
           avatar
@@ -37,6 +44,9 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
             <UserLink href={links?.linkedin} icon={LinkedinIcon} />
           )}
           {links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
+          {links?.dailydev && (
+            <UserLink href={links?.dailydev} icon={DailyDevIcon} />
+          )}
           {links?.website && <UserLink href={links?.website} icon={Globe} />}
           {isEmailVisible && <UserLink href={`mailto:${email}`} icon={Mail} />}
         </div>
@@ -47,7 +57,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
 
 type UserLinkProps = {
   href: string;
-  icon: typeof Github;
+  icon: ((props: React.SVGProps<SVGSVGElement>) => JSX.Element) | typeof Globe;
 };
 
 export function UserLink(props: UserLinkProps) {