fulldev-ui 0.7.0-beta.9 → 0.9.0

package/src/components/blocks/banner-2.astro

@@ -0,0 +1,46 @@
+---
+import { cn } from "@/lib/utils"
+import { Banner, BannerContainer } from "@/components/ui/banner"
+import { Button } from "@/components/ui/button"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  buttons?: {
+    label: string
+    href: string
+    variant?: "default" | "outline" | "secondary" | "ghost"
+  }[]
+}
+
+const { class: className, title, description, buttons } = Astro.props
+---
+
+<Banner variant="floating" storageKey="banner-2" class={cn("", className)}>
+  <BannerContainer class="gap-4 py-1" showClose={false}>
+    <div
+      class="flex flex-1 flex-col gap-0.5 lg:flex-row lg:items-center lg:gap-x-4"
+    >
+      <p class="text-sm font-semibold">{title}</p>
+      <p class="text-muted-foreground text-sm">{description}</p>
+    </div>
+    {
+      buttons?.length && (
+        <div class="flex shrink-0 items-center gap-2">
+          {buttons.map(({ href, label, ...button }, index) => (
+            <Button
+              as="a"
+              href={href}
+              size="sm"
+              variant={button.variant ?? (index === 0 ? "default" : "outline")}
+              {...button}
+            >
+              {label}
+            </Button>
+          ))}
+        </div>
+      )
+    }
+  </BannerContainer>
+</Banner>

package/src/components/blocks/blocks-1.astro

@@ -0,0 +1,262 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { buttonVariants } from "@/components/ui/button/button-variants"
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu"
+import { Icon } from "@/components/ui/icon"
+import { SectionContainer } from "@/components/ui/section"
+import {
+  Typography,
+  TypographyH1,
+  TypographyLead,
+} from "@/components/ui/typography"
+
+type Props = {
+  class?: string
+  title: string
+  description?: string
+  copyButton?: {
+    id: string
+    source: string
+  }
+  markdownUrl?: string
+  previousPage?: {
+    href: string
+    title: string
+  }
+  nextPage?: {
+    href: string
+    title: string
+  }
+  labels: {
+    copyMarkdown: string
+    openIn: string
+    openInMarkdown: string
+    openInChatGPT: string
+    openInClaude: string
+    openInCursor: string
+    pagination: {
+      previous: string
+      next: string
+      ariaLabel: string
+    }
+  }
+}
+
+const {
+  class: className,
+  title,
+  description,
+  copyButton,
+  markdownUrl,
+  previousPage,
+  nextPage,
+  labels,
+} = Astro.props
+const showCopyButton = Boolean(copyButton)
+const showOpenButton = Boolean(markdownUrl)
+const showPagination = Boolean(previousPage || nextPage)
+const assistantPrompt = markdownUrl
+  ? `Read ${markdownUrl}, I want to ask questions about it.`
+  : ""
+const openLinks = markdownUrl
+  ? [
+      {
+        label: labels.openInMarkdown,
+        href: markdownUrl,
+        icon: "markdown",
+      },
+      {
+        label: labels.openInChatGPT,
+        href: `https://chatgpt.com/?hints=search&q=${encodeURIComponent(assistantPrompt)}`,
+        icon: "chatgpt",
+      },
+      {
+        label: labels.openInClaude,
+        href: `https://claude.ai/new?q=${encodeURIComponent(assistantPrompt)}`,
+        icon: "claude",
+      },
+      {
+        label: labels.openInCursor,
+        href: `https://cursor.com/link/prompt?text=${encodeURIComponent(assistantPrompt)}`,
+        icon: "cursor",
+      },
+    ]
+  : []
+---
+
+<SectionContainer
+  data-slot="blocks-page"
+  class={cn("gap-10 pt-10 pb-10 sm:pt-12 sm:pb-12", className)}
+>
+  <div class="mx-auto flex w-full max-w-336 flex-col gap-10">
+    <header
+      class="flex flex-col gap-4 border-b pb-8 sm:flex-row sm:items-start sm:justify-between"
+    >
+      <div class="flex max-w-3xl min-w-0 flex-1 flex-col gap-2">
+        <TypographyH1
+          class="text-foreground text-left text-3xl tracking-tight sm:text-4xl"
+        >
+          {title}
+        </TypographyH1>
+        {
+          description && (
+            <TypographyLead class="max-w-2xl text-base leading-7">
+              {description}
+            </TypographyLead>
+          )
+        }
+      </div>
+      <div class="flex shrink-0 items-center gap-2 self-start">
+        {
+          showCopyButton && (
+            <Button
+              id={copyButton?.id}
+              type="button"
+              variant="outline"
+              size="xs"
+              data-source={copyButton?.source}
+              aria-label={labels.copyMarkdown}
+            >
+              <Icon name="copy" class="blocks-copy-icon size-3.5" />
+              <Icon name="check" class="blocks-check-icon hidden size-3.5" />
+              <span>{labels.copyMarkdown}</span>
+            </Button>
+          )
+        }
+        {
+          showOpenButton && (
+            <DropdownMenu>
+              <DropdownMenuTrigger
+                class={buttonVariants({ variant: "outline", size: "xs" })}
+              >
+                <span>{labels.openIn}</span>
+                <Icon name="chevron-down" class="size-3.5 opacity-70" />
+              </DropdownMenuTrigger>
+              <DropdownMenuContent align="end" sideOffset={6} class="w-56">
+                {openLinks.map((link) => (
+                  <a
+                    href={link.href}
+                    target="_blank"
+                    rel="noreferrer noopener"
+                    class="hover:bg-accent hover:text-accent-foreground flex items-center gap-2 rounded-sm px-2 py-1.5 text-sm transition-colors outline-none"
+                  >
+                    {link.icon === "markdown" && (
+                      <Icon name="markdown" class="size-4 fill-current" />
+                    )}
+                    {link.icon === "chatgpt" && (
+                      <svg
+                        role="img"
+                        viewBox="0 0 24 24"
+                        fill="currentColor"
+                        class="size-4"
+                        aria-hidden="true"
+                      >
+                        <path d="M22.282 9.821a5.985 5.985 0 0 0-.516-4.91 6.046 6.046 0 0 0-6.51-2.9A6.065 6.065 0 0 0 4.981 4.182a5.985 5.985 0 0 0-3.998 2.9 6.046 6.046 0 0 0 .743 7.097 5.98 5.98 0 0 0 .511 4.91 6.051 6.051 0 0 0 6.515 2.9A5.985 5.985 0 0 0 13.26 24a6.056 6.056 0 0 0 5.772-4.206 5.989 5.989 0 0 0 3.998-2.9 6.056 6.056 0 0 0-.748-7.073ZM13.26 22.43a4.476 4.476 0 0 1-2.876-1.04l.142-.081 4.778-2.758a.795.795 0 0 0 .393-.681v-6.737l2.02 1.169a.071.071 0 0 1 .038.052v5.583a4.504 4.504 0 0 1-4.495 4.494Zm-9.66-4.125a4.471 4.471 0 0 1-.535-3.014l.142.085 4.783 2.758a.771.771 0 0 0 .781 0l5.843-3.368v2.332a.08.08 0 0 1-.034.062L9.74 19.95a4.499 4.499 0 0 1-6.14-1.646ZM2.34 7.896a4.485 4.485 0 0 1 2.366-1.973V11.6a.766.766 0 0 0 .388.677l5.814 3.354-2.02 1.169a.076.076 0 0 1-.071 0l-4.83-2.787A4.504 4.504 0 0 1 2.34 7.872Zm16.596 3.856-5.833-3.388L15.12 7.2a.076.076 0 0 1 .071 0l4.83 2.791a4.494 4.494 0 0 1-.676 8.104v-5.677a.79.79 0 0 0-.407-.667Zm2.011-3.024-.142-.085-4.774-2.782a.776.776 0 0 0-.785 0L9.409 9.23V6.897a.066.066 0 0 1 .028-.061l4.83-2.787a4.499 4.499 0 0 1 6.68 4.66ZM8.307 12.863l-2.02-1.164a.08.08 0 0 1-.038-.057V6.074a4.499 4.499 0 0 1 7.376-3.453l-.142.08-4.778 2.758a.795.795 0 0 0-.393.681Zm1.097-2.365 2.602-1.5 2.607 1.5v2.999l-2.597 1.5-2.607-1.5Z" />
+                      </svg>
+                    )}
+                    {link.icon === "claude" && (
+                      <Icon name="claude" class="size-4 fill-current" />
+                    )}
+                    {link.icon === "cursor" && (
+                      <Icon name="cursor" class="size-4 fill-current" />
+                    )}
+                    <span>{link.label}</span>
+                    <Icon
+                      name="external-link"
+                      class="text-muted-foreground ml-auto size-3.5"
+                    />
+                  </a>
+                ))}
+              </DropdownMenuContent>
+            </DropdownMenu>
+          )
+        }
+      </div>
+    </header>
+
+    <Typography as="article" class="w-full max-w-none" size="sm">
+      <slot />
+    </Typography>
+
+    {
+      showPagination && (
+        <nav
+          class="flex items-center justify-between gap-3"
+          aria-label={labels.pagination.ariaLabel}
+        >
+          {previousPage ? (
+            <Button
+              as="a"
+              href={previousPage.href}
+              variant="outline"
+              class="h-auto min-w-0 items-center justify-start gap-2 px-3 py-2 whitespace-normal"
+            >
+              <Icon name="arrow-left" class="size-4" />
+              <span class="truncate text-sm font-medium">
+                {previousPage.title}
+              </span>
+            </Button>
+          ) : (
+            <div aria-hidden="true" />
+          )}
+
+          {nextPage ? (
+            <Button
+              as="a"
+              href={nextPage.href}
+              variant="outline"
+              class="h-auto min-w-0 items-center justify-end gap-2 px-3 py-2 text-right whitespace-normal"
+            >
+              <span class="truncate text-sm font-medium">{nextPage.title}</span>
+              <Icon name="arrow-right" class="size-4" />
+            </Button>
+          ) : (
+            <div aria-hidden="true" />
+          )}
+        </nav>
+      )
+    }
+  </div>
+</SectionContainer>
+
+<script is:inline define:vars={{ copyButtonId: copyButton?.id }}>
+  const button = copyButtonId ? document.getElementById(copyButtonId) : null
+
+  if (button instanceof HTMLButtonElement) {
+    const writeToClipboard = async (text) => {
+      if (navigator.clipboard && window.isSecureContext) {
+        try {
+          await navigator.clipboard.writeText(text)
+          return true
+        } catch {
+          return false
+        }
+      }
+
+      return false
+    }
+
+    button.addEventListener("click", async () => {
+      const source = button.dataset.source
+
+      if (!source) return
+
+      const copied = await writeToClipboard(source)
+
+      if (copied) {
+        button.querySelector(".blocks-copy-icon")?.classList.add("hidden")
+        button.querySelector(".blocks-check-icon")?.classList.remove("hidden")
+
+        window.setTimeout(() => {
+          button.querySelector(".blocks-copy-icon")?.classList.remove("hidden")
+          button.querySelector(".blocks-check-icon")?.classList.add("hidden")
+        }, 1200)
+      }
+    })
+  }
+</script>

package/src/components/blocks/contact-1.astro

@@ -0,0 +1,126 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Icon } from "@/components/ui/icon"
+import { Input } from "@/components/ui/input"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Textarea } from "@/components/ui/textarea"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  contactItems: {
+    icon: string
+    title: string
+    description: string
+    href?: string
+  }[]
+  form: {
+    legend: string
+    nameLabel: string
+    namePlaceholder: string
+    emailLabel: string
+    emailPlaceholder: string
+    messageLabel: string
+    messagePlaceholder: string
+    messageDescription: string
+    actionLabel: string
+  }
+}
+
+const { class: className, title, description, contactItems, form } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer class="items-center gap-6 text-center">
+    <div class="flex max-w-2xl flex-col items-center gap-4">
+      <h2
+        class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+      >
+        {title}
+      </h2>
+      <p
+        class="text-muted-foreground max-w-2xl text-lg leading-relaxed text-balance"
+      >
+        {description}
+      </p>
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
+      {
+        contactItems.map((item) => (
+          <div class="flex flex-col gap-3 rounded-xl border p-5">
+            {item.href ? (
+              <Button
+                as="a"
+                href={item.href}
+                variant="secondary"
+                size="icon"
+                class="text-primary"
+                aria-label={item.title}
+              >
+                <Icon name={item.icon} />
+              </Button>
+            ) : (
+              <Button
+                variant="secondary"
+                size="icon"
+                class="text-primary"
+                aria-label={item.title}
+              >
+                <Icon name={item.icon} />
+              </Button>
+            )}
+            <h3 class="text-foreground text-sm font-medium">{item.title}</h3>
+            <p class="text-muted-foreground text-sm leading-relaxed">
+              {item.description}
+            </p>
+          </div>
+        ))
+      }
+    </div>
+  </SectionContainer>
+  <SectionContainer>
+    <div class="mx-auto w-full max-w-2xl rounded-xl border p-6 sm:p-8">
+      <FieldSet>
+        <FieldLegend class="sr-only">{form.legend}</FieldLegend>
+        <FieldGroup>
+          <div class="grid gap-4 md:grid-cols-2">
+            <Field>
+              <FieldLabel for="contact-name-1">{form.nameLabel}</FieldLabel>
+              <Input id="contact-name-1" placeholder={form.namePlaceholder} />
+            </Field>
+            <Field>
+              <FieldLabel for="contact-email-1">{form.emailLabel}</FieldLabel>
+              <Input
+                id="contact-email-1"
+                type="email"
+                placeholder={form.emailPlaceholder}
+              />
+            </Field>
+          </div>
+          <Field>
+            <FieldLabel for="contact-message-1">{form.messageLabel}</FieldLabel>
+            <Textarea
+              id="contact-message-1"
+              rows={5}
+              placeholder={form.messagePlaceholder}
+            />
+            <FieldDescription>{form.messageDescription}</FieldDescription>
+          </Field>
+          <Button size="lg" class="w-full">{form.actionLabel}</Button>
+        </FieldGroup>
+      </FieldSet>
+    </div>
+  </SectionContainer>
+</Section>

package/src/components/blocks/contact-2.astro

@@ -0,0 +1,130 @@
+---
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import {
+  Field,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSet,
+} from "@/components/ui/field"
+import { Icon } from "@/components/ui/icon"
+import { Input } from "@/components/ui/input"
+import { Section, SectionContainer } from "@/components/ui/section"
+import { Textarea } from "@/components/ui/textarea"
+
+type Props = {
+  class?: string
+  title: string
+  description: string
+  contactItems: {
+    icon: string
+    title: string
+    description: string
+    href?: string
+  }[]
+  form: {
+    title: string
+    legend: string
+    nameLabel: string
+    namePlaceholder: string
+    emailLabel: string
+    emailPlaceholder: string
+    messageLabel: string
+    messagePlaceholder: string
+    actionLabel: string
+  }
+}
+
+const { class: className, title, description, contactItems, form } = Astro.props
+---
+
+<Section class={cn("", className)}>
+  <SectionContainer
+    class="grid gap-10 lg:grid-cols-[minmax(0,1fr)_22rem] lg:items-start"
+  >
+    <div class="flex flex-col gap-6">
+      <div class="flex flex-col gap-4">
+        <h2
+          class="text-foreground text-3xl font-semibold tracking-tight text-balance sm:text-4xl"
+        >
+          {title}
+        </h2>
+        <p class="text-muted-foreground max-w-xl text-base leading-relaxed">
+          {description}
+        </p>
+      </div>
+      <div class="rounded-xl border p-6">
+        <div class="mb-6">
+          <h3 class="text-lg font-medium">{form.title}</h3>
+        </div>
+        <FieldSet>
+          <FieldLegend class="sr-only">{form.legend}</FieldLegend>
+          <FieldGroup>
+            <div class="grid gap-4 md:grid-cols-2">
+              <Field>
+                <FieldLabel for="contact-name-2">{form.nameLabel}</FieldLabel>
+                <Input id="contact-name-2" placeholder={form.namePlaceholder} />
+              </Field>
+              <Field>
+                <FieldLabel for="contact-email-2">{form.emailLabel}</FieldLabel>
+                <Input
+                  id="contact-email-2"
+                  type="email"
+                  placeholder={form.emailPlaceholder}
+                />
+              </Field>
+            </div>
+            <Field>
+              <FieldLabel for="contact-message-2"
+                >{form.messageLabel}</FieldLabel
+              >
+              <Textarea
+                id="contact-message-2"
+                rows={5}
+                placeholder={form.messagePlaceholder}
+              />
+            </Field>
+            <Button size="lg" class="w-full">{form.actionLabel}</Button>
+          </FieldGroup>
+        </FieldSet>
+      </div>
+    </div>
+
+    <div class="flex flex-col gap-3">
+      {
+        contactItems.map((item) => (
+          <div class="flex gap-4 rounded-xl border p-4">
+            {item.href ? (
+              <Button
+                as="a"
+                href={item.href}
+                variant="secondary"
+                size="icon"
+                class="text-primary shrink-0"
+                aria-label={item.title}
+              >
+                <Icon name={item.icon} />
+              </Button>
+            ) : (
+              <Button
+                variant="secondary"
+                size="icon"
+                class="text-primary shrink-0"
+                aria-label={item.title}
+              >
+                <Icon name={item.icon} />
+              </Button>
+            )}
+            <div class="flex flex-col gap-1">
+              <p class="text-foreground text-sm font-medium">{item.title}</p>
+              <p class="text-muted-foreground text-sm leading-relaxed">
+                {item.description}
+              </p>
+            </div>
+          </div>
+        ))
+      }
+    </div>
+  </SectionContainer>
+</Section>