Resource Card

Resource card with status badge

SaaSResource

Overview

ResourceCard displays a resource in a compact card format showing its name, type, status badge, capacity range, and optional location. Supports loading skeleton, selected highlight, disabled state, and click interaction for selection or detail navigation.

Usage

import { ResourceCard } from "@leanicon/web-builder-library/saas";

<ResourceCard
  resource={{
    id: "room-1",
    name: "Conference Room A",
    type: "meeting-room",
    status: "active",
    capacity: { min: 1, max: 10, unit: "people" },
  }}
  onClick={(r) => console.log("Selected:", r.id)}
  onViewDetails={(r) => router.push(`/resources/${r.id}`)}
/>;

Variants

Default

Conference Room A

meeting-room

Capacity: 1-10 people

Active

Default (Dark)

Conference Room A

meeting-room

Capacity: 1-10 people

Active

Maintenance Status

Projector HP-2000

equipment

Maintenance

Inactive Status

Training Room

meeting-room

Capacity: 1-30 people

Inactive

Selected

Conference Room A

meeting-room

Capacity: 1-10 people

Active

Disabled

Conference Room A

meeting-room

Capacity: 1-10 people

Active

Loading

Props

Name	Type	Default	Required	Description
`resource`	`ResourceSummary \| ResourceData`	—	Yes	Resource data (summary or full)
`loading`	`boolean`	`false`	No	Whether card is in loading state
`selected`	`boolean`	`false`	No	Whether card is selected
`disabled`	`boolean`	`false`	No	Whether card is disabled
`labels`	`Record<string, string>`	—	No	Optional label overrides
`className`	`string`	—	No	Custom class name
`onClick`	`((resource: ResourceSummary \| ResourceData) => void)`	—	No	Called when card is clicked
`onViewDetails`	`((resource: ResourceSummary \| ResourceData) => void)`	—	No	Called when view details is clicked