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 = 'h-8 w-8 hover:text-primary transition-colors active:text-red-700'
7  return (
8    <div className='flex flex-col items-center gap-6 md:flex-row'>
9      <div>
10        <Title as='h6' variant='small'>
11          Connect with us
12        </Title>
13      </div>
14      <div className='flex items-center gap-6'>
15        <Link
16          href='https://github.com/spiceai/spiceai'
17          target='_blank'
18          rel='noreferrer'
19          aria-label='GitHub repository for SpiceAI'
20        >
21          <Icon iconName='github' className={iconClasses} />
22        </Link>
23        <Link
24          href='https://x.com/spice_ai'
25          target='_blank'
26          rel='noreferrer'
27          aria-label='SpiceAI on Twitter'
28        >
29          <Icon iconName='twitter' className='h-7 w-7 hover:text-primary' />
30        </Link>
31        <Link
32          href='https://spiceai.org/slack'
33          target='_blank'
34          rel='noreferrer'
35          aria-label='Spice.ai Slack Community'
36        >
37          <Icon iconName='discord' className={iconClasses} />
38        </Link>
39        <Link
40          href='https://www.youtube.com/@spiceai'
41          target='_blank'
42          rel='noreferrer'
43          aria-label='SpiceAI YouTube'
44        >
45          <Icon iconName='youtube' className={iconClasses} />
46        </Link>
47      </div>
48    </div>
49  )
50}
51

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 = 'h-8 w-8 hover:text-primary transition-colors active:text-red-700'
7  return (
8    <div className='flex flex-col items-center gap-6 md:flex-row'>
9      <div>
10        <Title as='h6' variant='small'>
11          Connect with us
12        </Title>
13      </div>
14      <div className='flex items-center gap-6'>
15        <Link
16          href='https://github.com/spiceai/spiceai'
17          target='_blank'
18          rel='noreferrer'
19          aria-label='GitHub repository for SpiceAI'
20        >
21          <Icon iconName='github' className={iconClasses} />
22        </Link>
23        <Link
24          href='https://x.com/spice_ai'
25          target='_blank'
26          rel='noreferrer'
27          aria-label='SpiceAI on Twitter'
28        >
29          <Icon iconName='twitter' className='h-7 w-7 hover:text-primary' />
30        </Link>
31        <Link
32          href='https://spiceai.org/slack'
33          target='_blank'
34          rel='noreferrer'
35          aria-label='Spice.ai Slack Community'
36        >
37          <Icon iconName='discord' className={iconClasses} />
38        </Link>
39        <Link
40          href='https://www.youtube.com/@spiceai'
41          target='_blank'
42          rel='noreferrer'
43          aria-label='SpiceAI YouTube'
44        >
45          <Icon iconName='youtube' className={iconClasses} />
46        </Link>
47      </div>
48    </div>
49  )
50}
51