1import { Paragraph } from '../../atoms/paragraph/paragraph';
2import { Title } from '../../atoms/title/title';
3import { Link } from '../../atoms/link/link';
4import { Icon } from '../../atoms/icon/icon';
5import { classNames } from '@site/src/lib/utils';
6
7export const Recipe = ({
8 title,
9 description,
10 href,
11 videoUrl,
12 className,
13}: {
14 title: string;
15 description: string;
16 href: string;
17 videoUrl?: string;
18 className?: string;
19}) => {
20 return (
21 <div className={classNames('flex flex-col items-start gap-3 h-full rounded-sm border border-alpha-150 px-6 py-10 shadow-box md:gap-10 md:px-10', className)}>
22 <Title as='h3' variant='small' className='line-clamp-2'>
23 {title}
24 </Title>
25 <Paragraph className='flex-1'>{description}</Paragraph>
26 <div className='inline-flex gap-4'>
27 <Link
28 className='hover:text-primary-500 hover:underline inline-flex gap-1.5 mt-auto items-center'
29 href={href}
30 target='_blank'
31 rel='noopener noreferrer'
32 >
33 <Icon iconName='github' className='h-4' /> Recipe
34 </Link>
35 {videoUrl && (
36 <Link
37 className='hover:text-primary-500 hover:underline inline-flex gap-1.5 mt-auto items-center'
38 href={videoUrl}
39 target='_blank'
40 rel='noopener noreferrer'
41 >
42 <Icon iconName='youtube' className='h-4' /> Video
43 </Link>
44 )}
45 </div>
46 </div>
47 );
48};
49
50const Squares = ({ width = 24, height = 24 }) => (
51 <svg
52 xmlns='http://www.w3.org/2000/svg'
53 width={width}
54 height={height}
55 viewBox='0 0 24 24'
56 fill='none'
57 >
58 <path
59 d='M6.42857 9.75L2.25 12L6.42857 14.25M6.42857 9.75L12 12.75L17.5714 9.75M6.42857 9.75L2.25 7.5L12 2.25L21.75 7.5L17.5714 9.75M17.5714 9.75L21.75 12L17.5714 14.25M17.5714 14.25L21.75 16.5L12 21.75L2.25 16.5L6.42857 14.25M17.5714 14.25L12 17.25L6.42857 14.25'
60 stroke='#F37721'
61 strokeWidth='1.5'
62 strokeLinecap='round'
63 strokeLinejoin='round'
64 />
65 </svg>
66);
67
1import { Paragraph } from '../../atoms/paragraph/paragraph';
2import { Title } from '../../atoms/title/title';
3import { Link } from '../../atoms/link/link';
4import { Icon } from '../../atoms/icon/icon';
5import { classNames } from '@site/src/lib/utils';
6
7export const Recipe = ({
8 title,
9 description,
10 href,
11 videoUrl,
12 className,
13}: {
14 title: string;
15 description: string;
16 href: string;
17 videoUrl?: string;
18 className?: string;
19}) => {
20 return (
21 <div className={classNames('flex flex-col items-start gap-3 h-full rounded-sm border border-alpha-150 px-6 py-10 shadow-box md:gap-10 md:px-10', className)}>
22 <Title as='h3' variant='small' className='line-clamp-2'>
23 {title}
24 </Title>
25 <Paragraph className='flex-1'>{description}</Paragraph>
26 <div className='inline-flex gap-4'>
27 <Link
28 className='hover:text-primary-500 hover:underline inline-flex gap-1.5 mt-auto items-center'
29 href={href}
30 target='_blank'
31 rel='noopener noreferrer'
32 >
33 <Icon iconName='github' className='h-4' /> Recipe
34 </Link>
35 {videoUrl && (
36 <Link
37 className='hover:text-primary-500 hover:underline inline-flex gap-1.5 mt-auto items-center'
38 href={videoUrl}
39 target='_blank'
40 rel='noopener noreferrer'
41 >
42 <Icon iconName='youtube' className='h-4' /> Video
43 </Link>
44 )}
45 </div>
46 </div>
47 );
48};
49
50const Squares = ({ width = 24, height = 24 }) => (
51 <svg
52 xmlns='http://www.w3.org/2000/svg'
53 width={width}
54 height={height}
55 viewBox='0 0 24 24'
56 fill='none'
57 >
58 <path
59 d='M6.42857 9.75L2.25 12L6.42857 14.25M6.42857 9.75L12 12.75L17.5714 9.75M6.42857 9.75L2.25 7.5L12 2.25L21.75 7.5L17.5714 9.75M17.5714 9.75L21.75 12L17.5714 14.25M17.5714 14.25L21.75 16.5L12 21.75L2.25 16.5L6.42857 14.25M17.5714 14.25L12 17.25L6.42857 14.25'
60 stroke='#F37721'
61 strokeWidth='1.5'
62 strokeLinecap='round'
63 strokeLinejoin='round'
64 />
65 </svg>
66);
67