job-board/src/components/profile/ProfileSocials.tsx at 39bc5e27c8faff330cf4306e6582b8b36be51a94 · code100x/job-board · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
import { UserType } from '@/types/user.types';
import { Globe } from 'lucide-react';
import Link from 'next/link';
import React from 'react';
import Icon from '../ui/icon';

const ProfileSocials = ({ userdetails }: { userdetails: UserType }) => {
  return (
    <div className="flex flex-wrap gap-x-3 gap-y-3">
      {userdetails.githubLink && (
        <Link
          target="_blank"
          href={userdetails.githubLink}
          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
        >
          <Icon
            icon={'github'}
            className="w-6 h-6 dark:text-slate-400 text-slate-500"
          />
          {userdetails.githubLink.split('/').filter(Boolean).pop()}
        </Link>
      )}
      {userdetails.linkedinLink && (
        <Link
          target="_blank"
          href={userdetails.linkedinLink}
          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
        >
          <Icon
            icon={'linkedin'}
            className="w-6 h-6 dark:text-slate-400 text-slate-500"
          />
          {userdetails.linkedinLink.split('/').filter(Boolean).pop()}
        </Link>
      )}
      {userdetails.twitterLink && (
        <Link
          target="_blank"
          href={userdetails.twitterLink}
          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
        >
          <Icon
            icon={'twitter'}
            className="w-6 h-6 dark:text-slate-400 text-slate-500"
          />
          {userdetails.twitterLink.split('/').filter(Boolean).pop()}
        </Link>
      )}
      {userdetails.discordLink && (
        <Link
          target="_blank"
          href={userdetails.discordLink}
          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
        >
          <Icon
            icon={'discord'}
            className="w-6 h-6 dark:text-slate-400 text-slate-500"
          />
          {userdetails.discordLink.split('/').filter(Boolean).pop()}
        </Link>
      )}

      {userdetails.portfolioLink && (
        <Link
          target="_blank"
          href={userdetails.portfolioLink}
          className="px-3 dark:text-slate-50 flex gap-3 items-center w-fit py-2 text-base dark:bg-slate-900 bg-slate-100 rounded-[8px] "
        >
          <Globe
            width={24}
            height={24}
            className="dark:text-slate-400 text-slate-500"
          />
          Portfolio
        </Link>
      )}
    </div>
  );
};

export default ProfileSocials;