blocks-1

1---
2import { cn } from "@/lib/utils"
3import { Button } from "@/components/ui/button"
4import { buttonVariants } from "@/components/ui/button/button-variants"
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuTrigger,
9} from "@/components/ui/dropdown-menu"
10import { Icon } from "@/components/ui/icon"
11import { SectionContainer } from "@/components/ui/section"
12import {
13  Typography,
14  TypographyH1,
15  TypographyLead,
16} from "@/components/ui/typography"
17 
18type Props = {
19  class?: string
20  title: string
21  description?: string
22  copyButton?: {
23    id: string
24    source: string
25  }
26  markdownUrl?: string
27  previousPage?: {
28    href: string
29    title: string
30  }
31  nextPage?: {
32    href: string
33    title: string
34  }
35  labels: {
36    copyMarkdown: string
37    openIn: string
38    openInMarkdown: string
39    openInChatGPT: string
40    openInClaude: string
41    openInCursor: string
42    pagination: {
43      previous: string
44      next: string
45      ariaLabel: string
46    }
47  }
48}
49 
50const {
51  class: className,
52  title,
53  description,
54  copyButton,
55  markdownUrl,
56  previousPage,
57  nextPage,
58  labels,
59} = Astro.props
60const showCopyButton = Boolean(copyButton)
61const showOpenButton = Boolean(markdownUrl)
62const showPagination = Boolean(previousPage || nextPage)
63const assistantPrompt = markdownUrl
64  ? `Read ${markdownUrl}, I want to ask questions about it.`
65  : ""
66const openLinks = markdownUrl
67  ? [
68      {
69        label: labels.openInMarkdown,
70        href: markdownUrl,
71        icon: "markdown",
72      },
73      {
74        label: labels.openInChatGPT,
75        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,
76        icon: "chatgpt",
77      },
78      {
79        label: labels.openInClaude,
80        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,
81        icon: "claude",
82      },
83      {
84        label: labels.openInCursor,
85        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,
86        icon: "cursor",
87      },
88    ]
89  : []
90---
91 
92<SectionContainer
93  data-slot="blocks-page"
94  class={cn("gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
95>
96  <div class="mx-auto flex w-full max-w-336 flex-col gap-10">
97    <header
98      class="flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between"
99    >
100      <div class="flex max-w-3xl min-w-0 flex-1 flex-col gap-2">
101        <TypographyH1
102          class="text-foreground text-left text-3xl tracking-tight sm:text-4xl"
103        >
104// … truncated