Storybook stories for the `OrganizationCard` UI component, demonstrating all supported props and visual variants for displaying organizations with logos, stats, navigation links, and action buttons. ## Key Components | Story | Description | |---|---| | `Default` | Basic card with full organization data and no extras | | `WithImage` | Card with organization logo, link, and device count | | `WithLink` | Card rendered as a clickable anchor | | `WithDeviceCount` | Badge showing total device count in the top-right corner | | `WithFooterStats` | Footer row with icon/value/label stat items (devices, MRR) | | `WithActionButton` | Destructive action button (e.g. Remove) via `actionButton` prop | | `WithPrimaryAction` | Primary variant action button (e.g. Deploy) | | `Minimal` | Card with only `id` and `name` populated | | `NoDescription` | Card with industry/tier but no description | | `WithCustomFooter` | Arbitrary JSX injected as a custom footer slot | ## Usage Example ```typescript import { OrganizationCard } from '../components/ui/organization-card' import { Server } from 'lucide-react' // Basic card , value: 142, label: 'devices' }, ]} showActionButton actionButton={{ icon: , label: 'Deploy', onClick: (org) => console.log('Deploy:', org.id), variant: 'primary', }} /> ``` ## ArgTypes Reference | Prop | Type | Description | |---|---|---| | `organization` | `Organization` | Core data object (id, name, industry, description, stats) | | `href` | `string` | Makes the card a navigable link | | `fetchedImageUrl` | `string` | Pre-fetched logo URL from `useBatchImages` | | `deviceCount` | `number` | Badge count shown in the top-right corner | | `showActionButton` | `boolean` | Toggles the action button visibility | | `footerStats` | `FooterStat[]` | Icon + value + label rows in the card footer | | `customFooter` | `ReactNode` | Arbitrary JSX rendered in the footer slot |