Function UserExtensions

app/account/page.tsx:23–99

()

}

function UserExtensions() {
  const extensions = useQuery(api.extensions.listByAuthor)

  if (extensions === undefined) {
    return (
      <div className="space-y-3">
        {[1, 2].map((i) => (
          <div
            key={i}
            className="h-20 animate-pulse rounded border border-[var(--color-border-weak)] bg-[var(--color-bg-weak)]"
          />
        ))}
      </div>
    )
  }

  if (extensions.length === 0) {
    return (
      <div className="rounded border border-[var(--color-border-weak)] bg-[var(--color-bg-weak)] p-6 text-center">
        <p className="mb-4 text-[var(--color-text-weak)]">You haven&apos;t submitted any extensions yet.</p>
        <Link
          href="/submit"
          className="inline-flex items-center justify-center rounded bg-[var(--color-bg-strong)] px-4 py-2 text-sm font-medium text-[var(--color-text-inverted)] transition-colors hover:bg-[var(--color-bg-strong-hover)]"
        >
          Submit Your First Extension
        </Link>
      </div>
    )
  }

  return (
    <div className="space-y-3">
      {extensions.map((ext) => (
        <div
          key={ext._id}
          className="flex items-center justify-between rounded border border-[var(--color-border-weak)] bg-[var(--color-bg-weak)] p-4"
        >
          <div className="flex flex-col gap-1">
            <div className="flex items-center gap-2">
              <Link
                href={`/plugin/${ext.productId}`}
                className="font-medium text-[var(--color-text-strong)] hover:underline"
              >
                {ext.displayName}
              </Link>
              <Badge
                variant={
                  ext.status === "approved"
                    ? "success"
                    : ext.status === "rejected"
                    ? "destructive"
                    : "warning"
                }
              >
                {ext.status}
              </Badge>
            </div>
            <span className="text-xs text-[var(--color-text-weak)]">