Directory Card

import { IconPlus, IconSettings } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import { DirectoryCard } from "@/components/ui/directory-card";

export default function Particle() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 p-4 sm:grid-cols-2">
      <DirectoryCard
        action={
          <Button aria-label="Открыть в личных" size="icon-sm" variant="ghost">
            <IconSettings />
          </Button>
        }
        description="Полный цикл поиска работы: анализ рынка, резюме, отклики, собеседования и переговоры по офферу."
        installs={1240}
        name="job-search-ru"
        publisher="Oracul"
      />
      <DirectoryCard
        action={
          <Button aria-label="Добавить навык" size="icon-sm" variant="ghost">
            <IconPlus />
          </Button>
        }
        description="Саммари PDF, извлечение таблиц и перевод краткого содержания."
        installs={86}
        name="summarize-pdf"
        publisher="Вы"
      />
    </div>
  );
}

import { IconPlus } from "@tabler/icons-react";
import { Button } from "@/components/ui/button";
import { DirectoryCard } from "@/components/ui/directory-card";

// Brand monogram tile — the app passes a real favicon; the demo uses initials.
function Brand({ children }: { children: string }) {
  return (
    <span className="font-semibold text-foreground text-xs">{children}</span>
  );
}

/** Connector catalog cards — brand icon, install count and popularity rank. */
export default function Particle() {
  return (
    <div className="grid w-full max-w-2xl grid-cols-1 gap-4 p-4 sm:grid-cols-2">
      <DirectoryCard
        action={
          <Button aria-label="Добавить Miro" size="icon-sm" variant="ghost">
            <IconPlus />
          </Button>
        }
        description="Доски, фреймы и стикеры прямо из чата."
        icon={<Brand>Mi</Brand>}
        installs={18700}
        name="Miro"
        publisher="Miro"
        rank={1}
      />
      <DirectoryCard
        action={
          <Button aria-label="Добавить Notion" size="icon-sm" variant="ghost">
            <IconPlus />
          </Button>
        }
        description="Страницы, базы данных и заметки."
        icon={<Brand>No</Brand>}
        installs={15200}
        name="Notion"
        publisher="Notion"
        rank={2}
      />
    </div>
  );
}