1import { Title } from '../../atoms/title/title'
2import { Button } from '../../atoms/button/button'
3import { Paragraph } from '../../atoms/paragraph/paragraph'
4
5import { ProcessedFile } from '../../../lib/articles'
6import { ArticleImage } from './article-image'
7
8export const Article = ({ article }: { article: ProcessedFile }) => {
9  return (
10    <article className='group relative overflow-hidden rounded-lg bg-neutral p-4 shadow-box transition-all md:bg-transparent md:shadow-none md:hover:bg-neutral md:hover:shadow-box'>
11      <div className='flex flex-col gap-4'>
12        <ArticleImage title={article.title} />
13
14        <div className='flex gap-2'>
15          {article.tags.slice(0, 3).map((tag: string) => (
16            <Button
17              key={tag}
18              variant='tagSmall'
19              className='max-w-40 truncate whitespace-pre md:hover:bg-alpha-100'
20            >
21              {tag}
22            </Button>
23          ))}
24        </div>
25
26        <Title as='h5' variant='small'>
27          {article.title}
28        </Title>
29        <Paragraph variant='small' className='line-clamp-3'>
30          {article.description}
31        </Paragraph>
32      </div>
33
34      <Button
35        variant='primary'
36        className='absolute bottom-4 left-4 z-10 transition-opacity group-hover:opacity-100 md:opacity-0'
37        href={article.link}
38        target='_blank'
39        rel='noopener noreferrer'
40      >
41        Continue reading
42      </Button>
43      {/* Absolute Shadow */}
44      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral transition-opacity group-hover:opacity-100 md:opacity-0' />
45
46      <div className='absolute bottom-0 left-0 h-10 w-full bg-gradient-to-t from-neutral transition-opacity group-hover:opacity-100 md:opacity-0' />
47    </article>
48  )
49}
50

1import { Title } from '../../atoms/title/title'
2import { Button } from '../../atoms/button/button'
3import { Paragraph } from '../../atoms/paragraph/paragraph'
4
5import { ProcessedFile } from '../../../lib/articles'
6import { ArticleImage } from './article-image'
7
8export const Article = ({ article }: { article: ProcessedFile }) => {
9  return (
10    <article className='group relative overflow-hidden rounded-lg bg-neutral p-4 shadow-box transition-all md:bg-transparent md:shadow-none md:hover:bg-neutral md:hover:shadow-box'>
11      <div className='flex flex-col gap-4'>
12        <ArticleImage title={article.title} />
13
14        <div className='flex gap-2'>
15          {article.tags.slice(0, 3).map((tag: string) => (
16            <Button
17              key={tag}
18              variant='tagSmall'
19              className='max-w-40 truncate whitespace-pre md:hover:bg-alpha-100'
20            >
21              {tag}
22            </Button>
23          ))}
24        </div>
25
26        <Title as='h5' variant='small'>
27          {article.title}
28        </Title>
29        <Paragraph variant='small' className='line-clamp-3'>
30          {article.description}
31        </Paragraph>
32      </div>
33
34      <Button
35        variant='primary'
36        className='absolute bottom-4 left-4 z-10 transition-opacity group-hover:opacity-100 md:opacity-0'
37        href={article.link}
38        target='_blank'
39        rel='noopener noreferrer'
40      >
41        Continue reading
42      </Button>
43      {/* Absolute Shadow */}
44      <div className='absolute bottom-0 left-0 h-20 w-full bg-gradient-to-t from-neutral transition-opacity group-hover:opacity-100 md:opacity-0' />
45
46      <div className='absolute bottom-0 left-0 h-10 w-full bg-gradient-to-t from-neutral transition-opacity group-hover:opacity-100 md:opacity-0' />
47    </article>
48  )
49}
50