mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-08-13 12:43:59 +02:00
feat: add daily dev link in profile (#5948)
This commit is contained in:
@@ -44,6 +44,7 @@ export interface UserDocument {
|
|||||||
github?: string;
|
github?: string;
|
||||||
linkedin?: string;
|
linkedin?: string;
|
||||||
twitter?: string;
|
twitter?: string;
|
||||||
|
dailydev?: string;
|
||||||
website?: string;
|
website?: string;
|
||||||
};
|
};
|
||||||
username?: string;
|
username?: string;
|
||||||
|
15
src/components/DailyDevIcon.tsx
Normal file
15
src/components/DailyDevIcon.tsx
Normal file
@@ -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>
|
||||||
|
);
|
||||||
|
}
|
@@ -9,7 +9,8 @@ import type {
|
|||||||
} from '../../api/user';
|
} from '../../api/user';
|
||||||
import { SelectionButton } from '../RoadCard/SelectionButton';
|
import { SelectionButton } from '../RoadCard/SelectionButton';
|
||||||
import {
|
import {
|
||||||
ArrowUpRight, Check,
|
ArrowUpRight,
|
||||||
|
Check,
|
||||||
CheckCircle,
|
CheckCircle,
|
||||||
Copy,
|
Copy,
|
||||||
Eye,
|
Eye,
|
||||||
@@ -64,6 +65,7 @@ export function UpdatePublicProfileForm() {
|
|||||||
const [github, setGithub] = useState('');
|
const [github, setGithub] = useState('');
|
||||||
const [twitter, setTwitter] = useState('');
|
const [twitter, setTwitter] = useState('');
|
||||||
const [linkedin, setLinkedin] = useState('');
|
const [linkedin, setLinkedin] = useState('');
|
||||||
|
const [dailydev, setDailydev] = useState('');
|
||||||
const [website, setWebsite] = useState('');
|
const [website, setWebsite] = useState('');
|
||||||
|
|
||||||
const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]);
|
const [profileRoadmaps, setProfileRoadmaps] = useState<RoadmapType[]>([]);
|
||||||
@@ -94,6 +96,7 @@ export function UpdatePublicProfileForm() {
|
|||||||
website,
|
website,
|
||||||
name,
|
name,
|
||||||
email,
|
email,
|
||||||
|
dailydev,
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
|
|
||||||
@@ -141,6 +144,7 @@ export function UpdatePublicProfileForm() {
|
|||||||
setGithub(links?.github || '');
|
setGithub(links?.github || '');
|
||||||
setTwitter(links?.twitter || '');
|
setTwitter(links?.twitter || '');
|
||||||
setLinkedin(links?.linkedin || '');
|
setLinkedin(links?.linkedin || '');
|
||||||
|
setDailydev(links?.dailydev || '');
|
||||||
setWebsite(links?.website || '');
|
setWebsite(links?.website || '');
|
||||||
setProfileVisibility(defaultProfileVisibility || 'public');
|
setProfileVisibility(defaultProfileVisibility || 'public');
|
||||||
setHeadline(publicConfig?.headline || '');
|
setHeadline(publicConfig?.headline || '');
|
||||||
@@ -528,6 +532,23 @@ export function UpdatePublicProfileForm() {
|
|||||||
onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
|
onChange={(e) => setLinkedin((e.target as HTMLInputElement).value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</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">
|
<div className="flex w-full flex-col">
|
||||||
<label
|
<label
|
||||||
|
@@ -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 type { GetPublicProfileResponse } from '../../api/user';
|
||||||
|
import { DailyDevIcon } from '../DailyDevIcon';
|
||||||
|
|
||||||
type UserPublicProfileHeaderProps = {
|
type UserPublicProfileHeaderProps = {
|
||||||
userDetails: GetPublicProfileResponse;
|
userDetails: GetPublicProfileResponse;
|
||||||
@@ -12,7 +19,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
|
|||||||
const { headline, isAvailableForHire, isEmailVisible } = publicConfig!;
|
const { headline, isAvailableForHire, isEmailVisible } = publicConfig!;
|
||||||
|
|
||||||
return (
|
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
|
<img
|
||||||
src={
|
src={
|
||||||
avatar
|
avatar
|
||||||
@@ -37,6 +44,9 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
|
|||||||
<UserLink href={links?.linkedin} icon={LinkedinIcon} />
|
<UserLink href={links?.linkedin} icon={LinkedinIcon} />
|
||||||
)}
|
)}
|
||||||
{links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
|
{links?.twitter && <UserLink href={links?.twitter} icon={Twitter} />}
|
||||||
|
{links?.dailydev && (
|
||||||
|
<UserLink href={links?.dailydev} icon={DailyDevIcon} />
|
||||||
|
)}
|
||||||
{links?.website && <UserLink href={links?.website} icon={Globe} />}
|
{links?.website && <UserLink href={links?.website} icon={Globe} />}
|
||||||
{isEmailVisible && <UserLink href={`mailto:${email}`} icon={Mail} />}
|
{isEmailVisible && <UserLink href={`mailto:${email}`} icon={Mail} />}
|
||||||
</div>
|
</div>
|
||||||
@@ -47,7 +57,7 @@ export function UserPublicProfileHeader(props: UserPublicProfileHeaderProps) {
|
|||||||
|
|
||||||
type UserLinkProps = {
|
type UserLinkProps = {
|
||||||
href: string;
|
href: string;
|
||||||
icon: typeof Github;
|
icon: ((props: React.SVGProps<SVGSVGElement>) => JSX.Element) | typeof Globe;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function UserLink(props: UserLinkProps) {
|
export function UserLink(props: UserLinkProps) {
|
||||||
|
Reference in New Issue
Block a user