Spaces:
Build error
Build error
File size: 2,438 Bytes
0bfe2e3 |
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 82 83 84 85 86 87 88 89 90 91 |
import { cn } from '@/components/ui/core/styling';
import { FiGithub } from 'react-icons/fi';
import { AiOutlineDiscord } from 'react-icons/ai';
import { FaPatreon } from 'react-icons/fa6';
import { SiBuymeacoffee, SiGithubsponsors, SiKofi } from 'react-icons/si';
import { Tooltip } from '../ui/tooltip';
import { FaGlobe } from 'react-icons/fa6';
type SocialIconProps = {
id:
| 'github'
| 'discord'
| 'ko-fi'
| 'patreon'
| 'buymeacoffee'
| 'github-sponsors'
| 'website';
url: string;
className?: string;
};
export function SocialIcon({ id, url, className }: SocialIconProps) {
const getTooltip = () => {
switch (id) {
case 'github':
return "View the addon's GitHub repository";
case 'discord':
return "Join the Developer's Discord";
case 'github-sponsors':
return 'Sponsor the Developer on GitHub';
case 'ko-fi':
return 'Support the Developer on Ko-fi';
case 'patreon':
return 'Support the Developer on Patreon';
case 'buymeacoffee':
return 'Support the Developer on Buy Me a Coffee';
default:
return null;
}
};
const tooltip = getTooltip();
return tooltip ? (
<Tooltip
side="top"
trigger={<SocialIconComponent id={id} url={url} className={className} />}
>
{tooltip}
</Tooltip>
) : (
<SocialIconComponent id={id} url={url} className={className} />
);
}
const SocialIconComponent = ({ id, url, className }: SocialIconProps) => {
const getIcon = () => {
switch (id) {
case 'website':
return <FaGlobe className="w-7 h-7" />;
case 'discord':
return <AiOutlineDiscord className="w-7 h-7" />;
case 'github':
return <FiGithub className="w-7 h-7" />;
case 'github-sponsors':
return <SiGithubsponsors className="w-7 h-7" />;
case 'ko-fi':
return <SiKofi className="w-7 h-7" />;
case 'patreon':
return <FaPatreon className="w-7 h-7" />;
case 'buymeacoffee':
return <SiBuymeacoffee className="w-7 h-7" />;
default:
return null;
}
};
return (
<a
href={url}
target="_blank"
rel="noopener noreferrer"
className={cn(
'inline-flex items-center justify-center text-gray-400 transition-colors hover:opacity-80 hover:text-[--brand]',
className
)}
>
{getIcon()}
</a>
);
};
|