1import { Icon } from '../../../components/atoms/icon/icon';
2import { Title } from '../../../components/atoms/title/title';
3import { Link, LinkProps } from '../../../components/atoms/link/link';
4
5export const Social = () => {
6  const iconClasses =
7    'h-8 w-8 hover:text-primary transition-colors active:text-red-700';
8  return (
9    <div className='flex flex-col items-center gap-6 md:flex-row'>
10      <div>
11        <Title as='h6' variant='small'>
12          Connect with us
13        </Title>
14      </div>
15      <div className='flex items-center gap-6'>
16        <Link
17          href='https://github.com/spiceai/spiceai'
18          target='_blank'
19          rel='noreferrer'
20          aria-label='GitHub repository for SpiceAI'
21        >
22          <Icon iconName='github' className={iconClasses} />
23        </Link>
24        <Link
25          href='https://x.com/spice_ai'
26          target='_blank'
27          rel='noreferrer'
28          aria-label='SpiceAI on Twitter'
29        >
30          <Icon iconName='twitter' className='h-7 w-7 hover:text-primary' />
31        </Link>
32        <Link
33          href='https://discord.gg/kZnTfneP5u'
34          target='_blank'
35          rel='noreferrer'
36          aria-label='SpiceAI Discord'
37        >
38          <Icon iconName='discord' className={iconClasses} />
39        </Link>
40        <Link
41          href='https://www.youtube.com/@spiceai'
42          target='_blank'
43          rel='noreferrer'
44          aria-label='SpiceAI YouTube'
45        >
46          <Icon iconName='youtube' className={iconClasses} />
47        </Link>
48      </div>
49    </div>
50  );
51};
52

1import { Icon } from '../../../components/atoms/icon/icon';
2import { Title } from '../../../components/atoms/title/title';
3import { Link, LinkProps } from '../../../components/atoms/link/link';
4
5export const Social = () => {
6  const iconClasses =
7    'h-8 w-8 hover:text-primary transition-colors active:text-red-700';
8  return (
9    <div className='flex flex-col items-center gap-6 md:flex-row'>
10      <div>
11        <Title as='h6' variant='small'>
12          Connect with us
13        </Title>
14      </div>
15      <div className='flex items-center gap-6'>
16        <Link
17          href='https://github.com/spiceai/spiceai'
18          target='_blank'
19          rel='noreferrer'
20          aria-label='GitHub repository for SpiceAI'
21        >
22          <Icon iconName='github' className={iconClasses} />
23        </Link>
24        <Link
25          href='https://x.com/spice_ai'
26          target='_blank'
27          rel='noreferrer'
28          aria-label='SpiceAI on Twitter'
29        >
30          <Icon iconName='twitter' className='h-7 w-7 hover:text-primary' />
31        </Link>
32        <Link
33          href='https://discord.gg/kZnTfneP5u'
34          target='_blank'
35          rel='noreferrer'
36          aria-label='SpiceAI Discord'
37        >
38          <Icon iconName='discord' className={iconClasses} />
39        </Link>
40        <Link
41          href='https://www.youtube.com/@spiceai'
42          target='_blank'
43          rel='noreferrer'
44          aria-label='SpiceAI YouTube'
45        >
46          <Icon iconName='youtube' className={iconClasses} />
47        </Link>
48      </div>
49    </div>
50  );
51};
52