import { XPost } from "@/components/tool-ui/x-post"; import { InstagramPost } from "@/components/tool-ui/instagram-post"; import { LinkedInPost } from "@/components/tool-ui/linkedin-post"; import { DataTable } from "@/components/tool-ui/data-table"; A family of platform-specific components for rendering social media content: `XPost`, `InstagramPost`, and `LinkedInPost`. Each component is optimized for its platform's visual style while sharing a consistent API pattern.

## Components This is a collection of three separate, platform-specific components: - **XPost**: For Twitter/X posts and quoted tweets - Verified badges - Quoted tweets - Media attachments (images/video) - Link previews - **InstagramPost**: For Instagram posts and image carousels - Multi-image carousels - Verified badges - Image/video media - **LinkedInPost**: For LinkedIn posts and professional content - Link previews - Media attachments - Professional header layout Each component is independent and can be imported separately, allowing for tree-shaking when you only need one platform. ## When to Use - **Good for:** Social media posts, activity feeds, external messages - **Not for:** Dense event tables, editable rich text ## Key Features Each component mirrors its platform's visual language Add custom actions below any post ## Source and Install Copy the component(s) you need from `components/tool-ui` into your project. The `shared` folder is required for all social post components. The `tool-ui` directory should sit alongside your shadcn `ui` directory. ### Prerequisites These components require the following [shadcn/ui](https://ui.shadcn.com) components: ```bash pnpm dlx shadcn@latest add badge button dropdown-menu tooltip ``` ### Directory Structure ### Download - [**Shared Dependencies (GitHub)**](https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/shared) ([ZIP](https://download-directory.github.io/?url=https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/shared)) - [**X Post (GitHub)**](https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/x-post) ([ZIP](https://download-directory.github.io/?url=https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/x-post)) - [**Instagram Post (GitHub)**](https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/instagram-post) ([ZIP](https://download-directory.github.io/?url=https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/instagram-post)) - [**LinkedIn Post (GitHub)**](https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/linkedin-post) ([ZIP](https://download-directory.github.io/?url=https://github.com/assistant-ui/tool-ui/tree/main/components/tool-ui/linkedin-post)) ## Usage ```tsx import { XPost } from "@/components/tool-ui/x-post"; import { InstagramPost } from "@/components/tool-ui/instagram-post"; import { LinkedInPost } from "@/components/tool-ui/linkedin-post"; // X Post console.log(action, post.id)} responseActions={[{ id: "report", label: "Report", variant: "destructive" }]} onResponseAction={(id) => console.log(id)} /> // Instagram Post // LinkedIn Post ``` ## Props All three components share the same prop pattern: void", }, responseActions: { description: "Custom actions below the post", type: "Action[]", }, onResponseAction: { description: "Called when response action clicked", type: "(actionId: string) => void", }, }} /> ### XPostData ### InstagramPostData ### LinkedInPostData

Tool UI