noham/gitprofile
1
0
Fork 0
mirror of https://github.com/NohamR/gitprofile.git synced 2026-05-25 12:27:17 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #312 from arifszn/icon-placement

Browse Source 
Fix icon placement
This commit is contained in:
Ariful Alam
2023-02-19 00:05:53 +06:00
committed by GitHub
parent 5631516710 f5b9ed4afb
commit 22d6ee0d0f
3 changed files with 28 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
README.md
View File

@@ -93,9 +93,9 @@ Or try it **[online](https://stackblitz.com/edit/gitprofile)**.
There are three ways to use **GitProfile**. Use any. There are three ways to use **GitProfile**. Use any.
- Forking this repo _(recommended)_ - [Forking this repo _(recommended)_](#forking-this-repo)
- Setting up locally - [Setting up locally](#setting-up-locally)
- Installing as package - [Installing as package](#installing-as-package)
### Forking this repo ### Forking this repo

47
src/components/details/index.jsx
View File

@@ -1,13 +1,12 @@
import { MdLocationOn, MdMail } from 'react-icons/md'; import { MdLocationOn } from 'react-icons/md';
import { import {
AiFillGithub, AiFillGithub,
AiFillInstagram, AiFillInstagram,
AiFillMediumSquare, AiFillMediumSquare,
} from 'react-icons/ai'; } from 'react-icons/ai';
import { SiTwitter } from 'react-icons/si'; import { SiTwitter } from 'react-icons/si';
import { GrLinkedinOption } from 'react-icons/gr';
import { CgDribbble } from 'react-icons/cg'; import { CgDribbble } from 'react-icons/cg';
import { RiPhoneFill } from 'react-icons/ri'; import { RiPhoneFill, RiMailFill } from 'react-icons/ri';
import { Fragment } from 'react'; import { Fragment } from 'react';
import { import {
FaBehanceSquare, FaBehanceSquare,
@@ -19,6 +18,7 @@ import {
FaMastodon, FaMastodon,
FaStackOverflow, FaStackOverflow,
FaTelegram, FaTelegram,
FaLinkedin,
} from 'react-icons/fa'; } from 'react-icons/fa';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
import { skeleton } from '../../helpers/utils'; import { skeleton } from '../../helpers/utils';
@@ -49,8 +49,9 @@ const ListItem = ({ icon, title, value, link, skeleton = false }) => {
rel="noreferrer" rel="noreferrer"
className="flex justify-start py-2 px-1 items-center" className="flex justify-start py-2 px-1 items-center"
> >
<span className="w-2 m-2">{icon}</span> <div className="flex-grow font-medium gap-2 flex items-center my-1">
<div className="flex-grow font-medium px-2">{title}</div> {icon} {title}
</div>
<div <div
className={`${ className={`${
skeleton ? 'flex-grow' : '' skeleton ? 'flex-grow' : ''
@@ -93,14 +94,14 @@ const Details = ({ profile, loading, social, github }) => {
<Fragment> <Fragment>
{profile.location && ( {profile.location && (
<ListItem <ListItem
icon={<MdLocationOn className="mr-2" />} icon={<MdLocationOn />}
title="Based in:" title="Based in:"
value={profile.location} value={profile.location}
/> />
)} )}
{profile.company && ( {profile.company && (
<ListItem <ListItem
icon={<FaBuilding className="mr-2" />} icon={<FaBuilding />}
title="Company:" title="Company:"
value={profile.company} value={profile.company}
link={ link={
@@ -111,14 +112,14 @@ const Details = ({ profile, loading, social, github }) => {
/> />
)} )}
<ListItem <ListItem
icon={<AiFillGithub className="mr-2" />} icon={<AiFillGithub />}
title="GitHub:" title="GitHub:"
value={github.username} value={github.username}
link={`https://github.com/${github.username}`} link={`https://github.com/${github.username}`}
/> />
{social?.twitter && ( {social?.twitter && (
<ListItem <ListItem
icon={<SiTwitter className="mr-2" />} icon={<SiTwitter />}
title="Twitter:" title="Twitter:"
value={social.twitter} value={social.twitter}
link={`https://twitter.com/${social.twitter}`} link={`https://twitter.com/${social.twitter}`}
@@ -126,7 +127,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.mastodon && ( {social?.mastodon && (
<ListItem <ListItem
icon={<FaMastodon className="mr-2" />} icon={<FaMastodon />}
title="Mastodon:" title="Mastodon:"
value={getFormattedMastodonValue(social.mastodon, false)} value={getFormattedMastodonValue(social.mastodon, false)}
link={getFormattedMastodonValue(social.mastodon, true)} link={getFormattedMastodonValue(social.mastodon, true)}
@@ -134,7 +135,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.linkedin && ( {social?.linkedin && (
<ListItem <ListItem
icon={<GrLinkedinOption className="mr-2" />} icon={<FaLinkedin />}
title="LinkedIn:" title="LinkedIn:"
value={social.linkedin} value={social.linkedin}
link={`https://www.linkedin.com/in/${social.linkedin}`} link={`https://www.linkedin.com/in/${social.linkedin}`}
@@ -142,7 +143,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.dribbble && ( {social?.dribbble && (
<ListItem <ListItem
icon={<CgDribbble className="mr-2" />} icon={<CgDribbble />}
title="Dribbble:" title="Dribbble:"
value={social.dribbble} value={social.dribbble}
link={`https://dribbble.com/${social.dribbble}`} link={`https://dribbble.com/${social.dribbble}`}
@@ -150,7 +151,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.behance && ( {social?.behance && (
<ListItem <ListItem
icon={<FaBehanceSquare className="mr-2" />} icon={<FaBehanceSquare />}
title="Behance:" title="Behance:"
value={social.behance} value={social.behance}
link={`https://www.behance.net/${social.behance}`} link={`https://www.behance.net/${social.behance}`}
@@ -158,7 +159,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.facebook && ( {social?.facebook && (
<ListItem <ListItem
icon={<FaFacebook className="mr-2" />} icon={<FaFacebook />}
title="Facebook:" title="Facebook:"
value={social.facebook} value={social.facebook}
link={`https://www.facebook.com/${social.facebook}`} link={`https://www.facebook.com/${social.facebook}`}
@@ -166,7 +167,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.instagram && ( {social?.instagram && (
<ListItem <ListItem
icon={<AiFillInstagram className="mr-2" />} icon={<AiFillInstagram />}
title="Instagram:" title="Instagram:"
value={social.instagram} value={social.instagram}
link={`https://www.instagram.com/${social.instagram}`} link={`https://www.instagram.com/${social.instagram}`}
@@ -174,7 +175,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.medium && ( {social?.medium && (
<ListItem <ListItem
icon={<AiFillMediumSquare className="mr-2" />} icon={<AiFillMediumSquare />}
title="Medium:" title="Medium:"
value={social.medium} value={social.medium}
link={`https://medium.com/@${social.medium}`} link={`https://medium.com/@${social.medium}`}
@@ -182,7 +183,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.dev && ( {social?.dev && (
<ListItem <ListItem
icon={<FaDev className="mr-2" />} icon={<FaDev />}
title="Dev:" title="Dev:"
value={social.dev} value={social.dev}
link={`https://dev.to/${social.dev}`} link={`https://dev.to/${social.dev}`}
@@ -190,7 +191,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.stackoverflow && ( {social?.stackoverflow && (
<ListItem <ListItem
icon={<FaStackOverflow className="mr-2" />} icon={<FaStackOverflow />}
title="Stack Overflow:" title="Stack Overflow:"
value={social.stackoverflow.split('/').slice(-1)} value={social.stackoverflow.split('/').slice(-1)}
link={`https://stackoverflow.com/users/${social.stackoverflow}`} link={`https://stackoverflow.com/users/${social.stackoverflow}`}
@@ -198,7 +199,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.website && ( {social?.website && (
<ListItem <ListItem
icon={<FaGlobe className="mr-2" />} icon={<FaGlobe />}
title="Website:" title="Website:"
value={social.website} value={social.website}
link={social.website} link={social.website}
@@ -206,7 +207,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.skype && ( {social?.skype && (
<ListItem <ListItem
icon={<FaSkype className="mr-2" />} icon={<FaSkype />}
title="Skype" title="Skype"
value={social.skype} value={social.skype}
link={`skype:${social.skype}?chat`} link={`skype:${social.skype}?chat`}
@@ -214,7 +215,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.telegram && ( {social?.telegram && (
<ListItem <ListItem
icon={<FaTelegram className="mr-2" />} icon={<FaTelegram />}
title="Telegram" title="Telegram"
value={social.telegram} value={social.telegram}
link={`https://t.me/${social.telegram}`} link={`https://t.me/${social.telegram}`}
@@ -223,7 +224,7 @@ const Details = ({ profile, loading, social, github }) => {
{social?.phone && ( {social?.phone && (
<ListItem <ListItem
icon={<RiPhoneFill className="mr-2" />} icon={<RiPhoneFill />}
title="Phone:" title="Phone:"
value={social.phone} value={social.phone}
link={`tel:${social.phone}`} link={`tel:${social.phone}`}
@@ -231,7 +232,7 @@ const Details = ({ profile, loading, social, github }) => {
)} )}
{social?.email && ( {social?.email && (
<ListItem <ListItem
icon={<MdMail className="mr-2" />} icon={<RiMailFill />}
title="Email:" title="Email:"
value={social.email} value={social.email}
link={`mailto:${social.email}`} link={`mailto:${social.email}`}

2
src/components/theme-changer/index.jsx
View File

@@ -57,7 +57,7 @@ const ThemeChanger = ({ theme, setTheme, loading, themeConfig }) => {
</div> </div>
<div <div
tabIndex={0} 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"> <ul className="p-4 menu compact">
{[ {[