import React from 'react';
import { Box, IconButton, Tooltip, SvgIcon } from '@mui/material';
import GitHubIcon from '@mui/icons-material/GitHub';
import LinkedInIcon from '@mui/icons-material/LinkedIn';
import { SvgIconProps } from '@mui/material/SvgIcon';
// Custom icons for platforms without MUI icons
const GiteaIcon = (props: SvgIconProps) => (
);
const DiscordIcon = (props: SvgIconProps) => (
);
const XIcon = (props: SvgIconProps) => (
);
const FilesIcon = (props: SvgIconProps) => (
);
const AIIcon = (props: SvgIconProps) => (
);
// Interface for social media links
export interface SocialLink {
name: string;
url: string;
icon: React.ElementType;
}
// Default social links
const defaultSocialLinks: SocialLink[] = [
{
name: 'LinkedIn',
url: 'https://www.linkedin.com/in/damien-ostler-254663110/',
icon: LinkedInIcon,
},
{
name: 'GitHub',
url: 'https://github.com/d4m13n-d3v',
icon: GitHubIcon,
},
{
name: 'Gitea',
url: 'https://git.d4m13n.dev',
icon: GiteaIcon,
},
{
name: 'Discord',
url: 'https://discord.gg/8dHnaarghJ',
icon: DiscordIcon,
},
{
name: 'X',
url: 'https://x.com/d4m13n_d3v',
icon: XIcon,
},
{
name: 'Files',
url: 'https://files.d4m13n.dev',
icon: FilesIcon,
},
{
name: 'AI',
url: 'https://ai.d4m13n.dev',
icon: AIIcon,
},
];
// Glow effects
const whiteGlowEffects = {
textShadow: '0 0 10px rgba(255, 255, 255, 0.25), 0 0 20px rgba(255, 255, 255, 0.15)',
filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))'
};
const blueGlowEffects = {
textShadow: '0 0 10px rgba(79, 209, 255, 0.15), 0 0 20px rgba(79, 209, 255, 0.1)',
filter: 'drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25))'
};
interface SocialIconsProps {
links?: SocialLink[];
position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
}
const SocialIcons: React.FC = ({
links = defaultSocialLinks,
position = 'top-right'
}) => {
// Determine position styling
const getPositionStyling = () => {
switch (position) {
case 'top-right':
return { top: 16, right: 16 };
case 'top-left':
return { top: 16, left: 16 };
case 'bottom-right':
return { bottom: 16, right: 16 };
case 'bottom-left':
return { bottom: 16, left: 16 };
default:
return { top: 16, right: 16 };
}
};
return (
{links.map((link) => (
))}
);
};
export default SocialIcons;