Ariful Alam
GitHub
commit
22d6ee0d0f
@ -93,9 +93,9 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
|
||||
|
||||
There are three ways to use **GitProfile**. Use any.
|
||||
|
||||
- Forking this repo _(recommended)_
|
||||
- Setting up locally
|
||||
- Installing as package
|
||||
- [Forking this repo _(recommended)_](#forking-this-repo)
|
||||
- [Setting up locally](#setting-up-locally)
|
||||
- [Installing as package](#installing-as-package)
|
||||
|
||||
### Forking this repo
|
||||
|
||||
|
||||
@ -1,13 +1,12 @@
|
||||
import { MdLocationOn, MdMail } from 'react-icons/md';
|
||||
import { MdLocationOn } from 'react-icons/md';
|
||||
import {
|
||||
AiFillGithub,
|
||||
AiFillInstagram,
|
||||
AiFillMediumSquare,
|
||||
} from 'react-icons/ai';
|
||||
import { SiTwitter } from 'react-icons/si';
|
||||
import { GrLinkedinOption } from 'react-icons/gr';
|
||||
import { CgDribbble } from 'react-icons/cg';
|
||||
import { RiPhoneFill } from 'react-icons/ri';
|
||||
import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
|
||||
import { Fragment } from 'react';
|
||||
import {
|
||||
FaBehanceSquare,
|
||||
@ -19,6 +18,7 @@ import {
|
||||
FaMastodon,
|
||||
FaStackOverflow,
|
||||
FaTelegram,
|
||||
FaLinkedin,
|
||||
} from 'react-icons/fa';
|
||||
import PropTypes from 'prop-types';
|
||||
import { skeleton } from '../../helpers/utils';
|
||||
@ -49,8 +49,9 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
|
||||
rel="noreferrer"
|
||||
className="flex justify-start py-2 px-1 items-center"
|
||||
>
|
||||
<span className="w-2 m-2">{icon}</span>
|
||||
<div className="flex-grow font-medium px-2">{title}</div>
|
||||
<div className="flex-grow font-medium gap-2 flex items-center my-1">
|
||||
{icon} {title}
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
skeleton ? 'flex-grow' : ''
|
||||
@ -93,14 +94,14 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
<Fragment>
|
||||
{profile.location && (
|
||||
<ListItem
|
||||
icon={<MdLocationOn className="mr-2" />}
|
||||
icon={<MdLocationOn />}
|
||||
title="Based in:"
|
||||
value={profile.location}
|
||||
/>
|
||||
)}
|
||||
{profile.company && (
|
||||
<ListItem
|
||||
icon={<FaBuilding className="mr-2" />}
|
||||
icon={<FaBuilding />}
|
||||
title="Company:"
|
||||
value={profile.company}
|
||||
link={
|
||||
@ -111,14 +112,14 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
/>
|
||||
)}
|
||||
<ListItem
|
||||
icon={<AiFillGithub className="mr-2" />}
|
||||
icon={<AiFillGithub />}
|
||||
title="GitHub:"
|
||||
value={github.username}
|
||||
link={`https://github.com/${github.username}`}
|
||||
/>
|
||||
{social?.twitter && (
|
||||
<ListItem
|
||||
icon={<SiTwitter className="mr-2" />}
|
||||
icon={<SiTwitter />}
|
||||
title="Twitter:"
|
||||
value={social.twitter}
|
||||
link={`https://twitter.com/${social.twitter}`}
|
||||
@ -126,7 +127,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.mastodon && (
|
||||
<ListItem
|
||||
icon={<FaMastodon className="mr-2" />}
|
||||
icon={<FaMastodon />}
|
||||
title="Mastodon:"
|
||||
value={getFormattedMastodonValue(social.mastodon, false)}
|
||||
link={getFormattedMastodonValue(social.mastodon, true)}
|
||||
@ -134,7 +135,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.linkedin && (
|
||||
<ListItem
|
||||
icon={<GrLinkedinOption className="mr-2" />}
|
||||
icon={<FaLinkedin />}
|
||||
title="LinkedIn:"
|
||||
value={social.linkedin}
|
||||
link={`https://www.linkedin.com/in/${social.linkedin}`}
|
||||
@ -142,7 +143,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.dribbble && (
|
||||
<ListItem
|
||||
icon={<CgDribbble className="mr-2" />}
|
||||
icon={<CgDribbble />}
|
||||
title="Dribbble:"
|
||||
value={social.dribbble}
|
||||
link={`https://dribbble.com/${social.dribbble}`}
|
||||
@ -150,7 +151,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.behance && (
|
||||
<ListItem
|
||||
icon={<FaBehanceSquare className="mr-2" />}
|
||||
icon={<FaBehanceSquare />}
|
||||
title="Behance:"
|
||||
value={social.behance}
|
||||
link={`https://www.behance.net/${social.behance}`}
|
||||
@ -158,7 +159,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.facebook && (
|
||||
<ListItem
|
||||
icon={<FaFacebook className="mr-2" />}
|
||||
icon={<FaFacebook />}
|
||||
title="Facebook:"
|
||||
value={social.facebook}
|
||||
link={`https://www.facebook.com/${social.facebook}`}
|
||||
@ -166,7 +167,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.instagram && (
|
||||
<ListItem
|
||||
icon={<AiFillInstagram className="mr-2" />}
|
||||
icon={<AiFillInstagram />}
|
||||
title="Instagram:"
|
||||
value={social.instagram}
|
||||
link={`https://www.instagram.com/${social.instagram}`}
|
||||
@ -174,7 +175,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.medium && (
|
||||
<ListItem
|
||||
icon={<AiFillMediumSquare className="mr-2" />}
|
||||
icon={<AiFillMediumSquare />}
|
||||
title="Medium:"
|
||||
value={social.medium}
|
||||
link={`https://medium.com/@${social.medium}`}
|
||||
@ -182,7 +183,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.dev && (
|
||||
<ListItem
|
||||
icon={<FaDev className="mr-2" />}
|
||||
icon={<FaDev />}
|
||||
title="Dev:"
|
||||
value={social.dev}
|
||||
link={`https://dev.to/${social.dev}`}
|
||||
@ -190,7 +191,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.stackoverflow && (
|
||||
<ListItem
|
||||
icon={<FaStackOverflow className="mr-2" />}
|
||||
icon={<FaStackOverflow />}
|
||||
title="Stack Overflow:"
|
||||
value={social.stackoverflow.split('/').slice(-1)}
|
||||
link={`https://stackoverflow.com/users/${social.stackoverflow}`}
|
||||
@ -198,7 +199,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.website && (
|
||||
<ListItem
|
||||
icon={<FaGlobe className="mr-2" />}
|
||||
icon={<FaGlobe />}
|
||||
title="Website:"
|
||||
value={social.website}
|
||||
link={social.website}
|
||||
@ -206,7 +207,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.skype && (
|
||||
<ListItem
|
||||
icon={<FaSkype className="mr-2" />}
|
||||
icon={<FaSkype />}
|
||||
title="Skype"
|
||||
value={social.skype}
|
||||
link={`skype:${social.skype}?chat`}
|
||||
@ -214,7 +215,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.telegram && (
|
||||
<ListItem
|
||||
icon={<FaTelegram className="mr-2" />}
|
||||
icon={<FaTelegram />}
|
||||
title="Telegram"
|
||||
value={social.telegram}
|
||||
link={`https://t.me/${social.telegram}`}
|
||||
@ -223,7 +224,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
|
||||
{social?.phone && (
|
||||
<ListItem
|
||||
icon={<RiPhoneFill className="mr-2" />}
|
||||
icon={<RiPhoneFill />}
|
||||
title="Phone:"
|
||||
value={social.phone}
|
||||
link={`tel:${social.phone}`}
|
||||
@ -231,7 +232,7 @@ const Details = ({ profile, loading, social, github }) => {
|
||||
)}
|
||||
{social?.email && (
|
||||
<ListItem
|
||||
icon={<MdMail className="mr-2" />}
|
||||
icon={<RiMailFill />}
|
||||
title="Email:"
|
||||
value={social.email}
|
||||
link={`mailto:${social.email}`}
|
||||
|
||||
@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
|
||||
</div>
|
||||
<div
|
||||
tabIndex={0}
|
||||
className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-b-box bg-base-200 text-base-content"
|
||||
className="mt-16 overflow-y-auto shadow-2xl top-px dropdown-content max-h-96 w-52 rounded-lg bg-base-200 text-base-content"
|
||||
>
|
||||
<ul className="p-4 menu compact">
|
||||
{[
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user