explore/ui/marketplace/MarketplaceAppInfo/SocialLink.tsx

import React from 'react';

import type { MarketplaceAppSocialInfo } from 'types/client/marketplace';

import { Link } from 'toolkit/next/link';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';

export interface Props {
  field: keyof MarketplaceAppSocialInfo;
  icon: IconName;
  title: string;
  href?: string;
}

const SocialLink = ({ href, icon, title }: Props) => {
  return (
    <Link
      href={ href }
      aria-label={ title }
      title={ title }
      external noIcon
      className="inline-flex items-center"
    >
      <IconSvg name={ icon } className="w-5 h-5 mr-2 text-[var(--color-icon-primary)]"/>
      <span>{ title }</span>
    </Link>
  );
};

export default SocialLink;