1import { Title } from '../../atoms/title/title';
2import { ArticlesCarousel } from './articles-carousel';
3import { Button } from '../../atoms/button/button';
4import { QueueListIcon } from '@heroicons/react/24/outline';
5import { ProcessedFile } from '@site/src/lib/articles';
6
7export interface  ArticleProps {
8  data: ProcessedFile[];
9}
10
11export const Articles: React.FC<ArticleProps> = ({data }) => {
12  if (data.length === 0) {
13    // If something goes wrong with the API, we just don't show the articles section
14    return null;
15  }
16
17  return (
18    <section className='relative mb-28 pb-0 md:py-16'>
19      <div className='flex items-center justify-between gap-4 pb-6 md:pb-14'>
20        <Title as='h2' variant='medium' className='text-center md:text-left'>
21          Blog Highlights
22        </Title>
23
24        <Button
25          variant='primary'
26          className='flex items-center gap-2 whitespace-pre'
27          href='https://blog.spiceai.org/'
28          target='_blank'
29          rel='noopener noreferrer'
30        >
31          <div className='w-5'>
32            <QueueListIcon />
33          </div>
34          View all
35        </Button>
36      </div>
37      <ArticlesCarousel data={data} />
38    </section>
39  );
40};
41

1import { Title } from '../../atoms/title/title';
2import { ArticlesCarousel } from './articles-carousel';
3import { Button } from '../../atoms/button/button';
4import { QueueListIcon } from '@heroicons/react/24/outline';
5import { ProcessedFile } from '@site/src/lib/articles';
6
7export interface  ArticleProps {
8  data: ProcessedFile[];
9}
10
11export const Articles: React.FC<ArticleProps> = ({data }) => {
12  if (data.length === 0) {
13    // If something goes wrong with the API, we just don't show the articles section
14    return null;
15  }
16
17  return (
18    <section className='relative mb-28 pb-0 md:py-16'>
19      <div className='flex items-center justify-between gap-4 pb-6 md:pb-14'>
20        <Title as='h2' variant='medium' className='text-center md:text-left'>
21          Blog Highlights
22        </Title>
23
24        <Button
25          variant='primary'
26          className='flex items-center gap-2 whitespace-pre'
27          href='https://blog.spiceai.org/'
28          target='_blank'
29          rel='noopener noreferrer'
30        >
31          <div className='w-5'>
32            <QueueListIcon />
33          </div>
34          View all
35        </Button>
36      </div>
37      <ArticlesCarousel data={data} />
38    </section>
39  );
40};
41