Directory Card

디렉터리 항목을 소개하고 추가 버튼을 둔 카드입니다.

@horon-ai/react 표시

Preview

GitHubRead issues, open pull requests, and review code.

NotionSearch pages and databases, then draft new notes from a conversation with your team.

Local files

Usage

tsx

import { DirectoryCard } from "@horon-ai/react";
import { Folder, GithubLogo, Notebook } from "@phosphor-icons/react";

export default function DirectoryCardDemo() {
  return (
    <>
      <DirectoryCard
        className="w-full max-w-100"
        icon={<GithubLogo />}
        name="GitHub"
        description="Read issues, open pull requests, and review code."
      />
      <DirectoryCard
        className="w-full max-w-100"
        icon={<Notebook />}
        name="Notion"
        description="Search pages and databases, then draft new notes from a conversation with your team."
      />
      <DirectoryCard className="w-full max-w-100" icon={<Folder />} name="Local files" />
    </>
  );
}