1import { Button } from '@/components/Button'
 2import { Heading } from '@/components/Heading'
 3
 4const guides = [
 5  {
 6    href: '/authentication',
 7    name: 'Authentication',
 8    description: 'Learn how to authenticate your API requests.',
 9  },
10  {
11    href: '/pagination',
12    name: 'Pagination',
13    description: 'Understand how to work with paginated responses.',
14  },
15  {
16    href: '/errors',
17    name: 'Errors',
18    description:
19      'Read about the different types of errors returned by the API.',
20  },
21  {
22    href: '/webhooks',
23    name: 'Webhooks',
24    description:
25      'Learn how to programmatically configure webhooks for your app.',
26  },
27]
28
29export function Guides() {
30  return (
31    <div className="my-16 xl:max-w-none">
32      <Heading level={2} id="guides">
33        Guides
34      </Heading>
35      <div className="not-prose mt-4 grid grid-cols-1 gap-8 border-t border-zinc-900/5 pt-10 dark:border-white/5 sm:grid-cols-2 xl:grid-cols-4">
36        {guides.map((guide) => (
37          <div key={guide.href}>
38            <h3 className="text-sm font-semibold text-zinc-900 dark:text-white">
39              {guide.name}
40            </h3>
41            <p className="mt-1 text-sm text-zinc-600 dark:text-zinc-400">
42              {guide.description}
43            </p>
44            <p className="mt-4">
45              <Button href={guide.href} variant="text" arrow="right">
46                Read more
47              </Button>
48            </p>
49          </div>
50        ))}
51      </div>
52    </div>
53  )
54}