Function ExtensionCard

app/page.tsx:13–53

({ extension }: { extension: {
  productId: string
  displayName: string
  description: string
  type: string
  author: { name: string }
  tags: string[]
} })

import { Header } from "@/components/header"

function ExtensionCard({ extension }: { extension: {
  productId: string
  displayName: string
  description: string
  type: string
  author: { name: string }
  tags: string[]
} }) {
  const typeInfo = EXTENSION_TYPES[extension.type as ExtensionType]

  return (
    <Link
      href={`/plugin/${extension.productId}`}
      className="group flex flex-col gap-4 rounded-xl border border-[var(--color-border-weak)] bg-[var(--color-bg-weak)] p-5 transition-all hover:border-[var(--color-border)] hover:bg-[var(--color-bg-weak-hover)] hover:shadow-sm"
    >
      <div className="flex items-start justify-between">
        <div className="flex flex-col gap-1">
          <span className="font-medium text-[var(--color-text-strong)]">
            {extension.displayName}
          </span>
          <span className="text-xs text-[var(--color-text-weak)]">
            Submitted by {extension.author.name}
          </span>
        </div>
        <Badge variant="secondary">{typeInfo?.label || extension.type}</Badge>
      </div>
      <p className="text-sm leading-relaxed text-[var(--color-text)] line-clamp-2">
        {extension.description}
      </p>
      {extension.tags.length > 0 && (
        <div className="flex flex-wrap gap-1">
          {extension.tags.slice(0, 3).map((tag, i) => (
            <span key={i} className="text-xs text-[var(--color-text-weak)]">
              #{tag}
            </span>
          ))}
        </div>
      )}
    </Link>
  )
}

function ExtensionsGrid() {
  const extensions = useQuery(api.extensions.listAllApproved)