Skip to content

Refactor social link rendering into shared reusable component #573

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Rohan-Ver-ma wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Refactor social link rendering into shared reusable component #573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ce15648
Refactor social link rendering into shared reusable component
Rohan-Ver-ma Mar 21, 2026
126beb8
Merge branch 'main' into refactor/shared-social-links-component
Rohan-Ver-ma Apr 4, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
97 changes: 9 additions & 88 deletions src/Components/Contributor/ContributorCard.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,14 +1,8 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Link } from 'gatsby';
import {
Calendar,
Github,
Linkedin,
CircleUser,
GitCommitVertical,
} from 'lucide-react';
import XIcon from '../XIcon';
import { Calendar, CircleUser, GitCommitVertical } from 'lucide-react';
import SocialLinks from '../SocialLinks.jsx';

const ContributorCard = ({ contributor }) => {
const pageAttributes = contributor?.node?.pageAttributes ?? {};
Expand All @@ -25,24 +19,6 @@ const ContributorCard = ({ contributor }) => {
twitter,
pronouns,
} = pageAttributes;
const socialLinkVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: (i) => ({
opacity: 1,
scale: 1,
transition: {
delay: i * 0.1,
type: 'spring',
stiffness: 200,
damping: 15,
},
}),
hover: {
scale: 1.2,
rotate: 5,
transition: { type: 'spring', stiffness: 400 },
},
};
const badgeVariants = {
hidden: { opacity: 0, scale: 0.6, y: -10 },
visible: {
Expand Down Expand Up @@ -161,68 +137,13 @@ const ContributorCard = ({ contributor }) => {
initial='hidden'
animate='visible'
>
{github || linkedin || twitter ? (
<>
{github && (
<motion.a
href={`https://github.com/${github}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={0}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<Github size={18} />
<span className='social-tooltip'>
GitHub
</span>
</motion.a>
)}

{linkedin && (
<motion.a
href={`https://linkedin.com/in/${linkedin}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={1}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<Linkedin size={18} />
<span className='social-tooltip'>
LinkedIn
</span>
</motion.a>
)}

{twitter && (
<motion.a
href={`https://x.com/${twitter}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={2}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<XIcon size={18} />
<span className='social-tooltip'>
X (formerly Twitter)
</span>
</motion.a>
)}
</>
) : (
<span className='no-social-data'>No social links</span>
)}
<SocialLinks
github={github}
linkedin={linkedin}
twitter={twitter}
onLinkClick={(e) => e.stopPropagation()}
showNoSocialText
/>
</motion.div>
</div>
</Link>
Expand Down
82 changes: 7 additions & 75 deletions src/Components/Search/SearchResults.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,7 @@
import React from 'react';
import './search-result.css';
import { Link } from 'gatsby';
import { Github, Linkedin } from 'lucide-react';
import { motion } from 'framer-motion';
import XIcon from '../XIcon.jsx';
import SocialLinks from '../SocialLinks.jsx';

function SearchResults({ results, darkmode }) {
if (!results || results.length === 0) {
Expand All @@ -26,24 +24,6 @@ function SearchResults({ results, darkmode }) {
);
}
const sortedResults = [...results].sort((a, b) => a.score - b.score);
const socialLinkVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: (i) => ({
opacity: 1,
scale: 1,
transition: {
delay: i * 0.1,
type: 'spring',
stiffness: 200,
damping: 15,
},
}),
hover: {
scale: 1.2,
rotate: 5,
transition: { type: 'spring', stiffness: 400 },
},
};
return (
<div className='results-container'>
{sortedResults.map(({ item, score }) => {
Expand All @@ -68,60 +48,12 @@ function SearchResults({ results, darkmode }) {
</p>

<div className='result-links'>
{item?.github && (
<motion.a
href={`https://github.com/${item.github}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={0}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<Github size={18} />
<span className='social-tooltip'>
GitHub
</span>
</motion.a>
)}
{item?.linkedin && (
<motion.a
href={`https://linkedin.com/in/${item?.linkedin}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={1}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<Linkedin size={18} />
<span className='social-tooltip'>
LinkedIn
</span>
</motion.a>
)}
{item?.twitter && (
<motion.a
href={`https://x.com/${item.twitter}`}
target='_blank'
rel='noopener noreferrer'
onClick={(e) => e.stopPropagation()}
variants={socialLinkVariants}
custom={2}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
<XIcon size={18} />
<span className='social-tooltip'>
X (formerly Twitter)
</span>
</motion.a>
)}
<SocialLinks
github={item?.github}
linkedin={item?.linkedin}
twitter={item?.twitter}
onLinkClick={(e) => e.stopPropagation()}
/>
</div>
</div>
</div>
Expand Down
95 changes: 95 additions & 0 deletions src/Components/SocialLinks.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,95 @@
import React from 'react';
import { motion } from 'framer-motion';
import { Github, Linkedin, Mail } from 'lucide-react';
import XIcon from './XIcon.jsx';

const socialLinkVariants = {
hidden: { opacity: 0, scale: 0.8 },
visible: (i) => ({
opacity: 1,
scale: 1,
transition: {
delay: i * 0.1,
type: 'spring',
stiffness: 200,
damping: 15,
},
}),
hover: {
scale: 1.2,
rotate: 5,
transition: { type: 'spring', stiffness: 400 },
},
};

const linkConfig = {
github: {
href: (value) => `https://github.com/${value}`,
label: 'GitHub',
icon: <Github size={18} />,
},
linkedin: {
href: (value) => `https://linkedin.com/in/${value}`,
label: 'LinkedIn',
icon: <Linkedin size={18} />,
},
twitter: {
href: (value) => `https://x.com/${value}`,
label: 'X (formerly Twitter)',
icon: <XIcon size={18} />,
},
email: {
href: (value) => `mailto:${value}`,
label: 'Email',
icon: <Mail size={18} />,
},
};

const SocialLinks = ({
github,
linkedin,
twitter,
email,
order = ['github', 'linkedin', 'twitter', 'email'],
onLinkClick,
showNoSocialText = false,
}) => {
const values = { github, linkedin, twitter, email };
const links = order
.filter((type) => values[type])
.map((type, index) => ({ type, value: values[type], index }));

if (links.length === 0) {
return showNoSocialText ? (
<span className='no-social-data'>No social links</span>
) : null;
}

return (
<>
{links.map(({ type, value, index }) => {
const config = linkConfig[type];

return (
<motion.a
key={type}
href={config.href(value)}
target='_blank'
rel='noreferrer'
onClick={onLinkClick}
variants={socialLinkVariants}
custom={index}
whileHover='hover'
whileTap={{ scale: 0.9 }}
className='social-link'
>
{config.icon}
<span className='social-tooltip'>{config.label}</span>
</motion.a>
);
})}
</>
);
};

export default SocialLinks;
Loading