@devxcrew/react-ui 0.0.0-stage → 0.1.7

package/src/blocks/table/data-table-toolbar.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from 'react';
+import { Columns3, Filter, Search } from 'lucide-react';
+import { DropdownMenu, DropdownMenuCheckboxItem } from '@devxcrew/react-ui/components/dropdown-menu';
+import { Input } from '@devxcrew/react-ui/components/input';
+import { DataTableIconMenuTrigger } from './data-table-icon-menu-trigger';
+import { DataTableMenuContent, dataTableMenuOptionClass } from './data-table-menu-content';
+import { TopologyRegion, type InterfaceTopologyController } from '@devxcrew/react-ui/features/interface-topology';
+
+export type DataTableColumnControl = {
+  id: string;
+  label: string;
+  onVisibleChange: (visible: boolean) => void;
+  visible: boolean;
+};
+
+export function DataTableToolbar({
+  columns,
+  filters,
+  onSearchChange,
+  search,
+  searchPlaceholder,
+  topology,
+  topologyIds,
+  filterOptions,
+  filterValue,
+  onFilterChange,
+}: {
+  columns: DataTableColumnControl[];
+  filters?: ReactNode;
+  onSearchChange: (value: string) => void;
+  search: string;
+  searchPlaceholder: string;
+  topology?: InterfaceTopologyController;
+  topologyIds?: { searchBar?: string; columnFilter?: string };
+  filterOptions?: readonly { label: string; value: string }[];
+  filterValue?: string;
+  onFilterChange?: (value: string) => void;
+}) {
+  const searchBar = (
+    <label className="relative w-full min-w-0 sm:max-w-3xl">
+      <Search className="pointer-events-none absolute top-1/2 left-3 size-4 -translate-y-1/2 text-muted-foreground" />
+      <span className="sr-only">{searchPlaceholder}</span>
+      <Input
+        className="h-8 pl-9"
+        onChange={(event) => onSearchChange(event.target.value)}
+        placeholder={searchPlaceholder}
+        value={search}
+      />
+    </label>
+  );
+  const filterMenu =
+    filterOptions?.length && onFilterChange ? (
+      <DropdownMenu>
+        <DataTableIconMenuTrigger active={Boolean(filterValue)} label="Filter">
+          <Filter />
+        </DataTableIconMenuTrigger>
+        <DataTableMenuContent actionLabel="Clear" onAction={() => onFilterChange('')} title="Filter options">
+          <DropdownMenuCheckboxItem
+            checked={!filterValue}
+            className={dataTableMenuOptionClass}
+            onCheckedChange={() => onFilterChange('')}
+          >
+            All records
+          </DropdownMenuCheckboxItem>
+          {filterOptions.map((option) => (
+            <DropdownMenuCheckboxItem
+              checked={filterValue === option.value}
+              className={dataTableMenuOptionClass}
+              key={option.value}
+              onCheckedChange={() => onFilterChange(option.value)}
+            >
+              {option.label}
+            </DropdownMenuCheckboxItem>
+          ))}
+        </DataTableMenuContent>
+      </DropdownMenu>
+    ) : null;
+  const columnFilter = (
+    <DropdownMenu>
+      <DataTableIconMenuTrigger label="Columns">
+        <Columns3 />
+      </DataTableIconMenuTrigger>
+      <DataTableMenuContent
+        actionLabel="Show all"
+        onAction={() => columns.forEach((column) => column.onVisibleChange(true))}
+        title="Visible columns"
+      >
+        {columns.map((column) => (
+          <DropdownMenuCheckboxItem
+            checked={column.visible}
+            className={dataTableMenuOptionClass}
+            key={column.id}
+            onCheckedChange={(visible) => column.onVisibleChange(Boolean(visible))}
+          >
+            {column.label}
+          </DropdownMenuCheckboxItem>
+        ))}
+      </DataTableMenuContent>
+    </DropdownMenu>
+  );
+
+  return (
+    <div className="flex flex-col gap-2 rounded-md border bg-card p-2 shadow-sm sm:flex-row sm:items-center">
+      {topology && topologyIds?.searchBar ? (
+        <TopologyRegion as="div" className="w-full min-w-0 sm:max-w-3xl" id={topologyIds.searchBar} topology={topology}>
+          {searchBar}
+        </TopologyRegion>
+      ) : (
+        searchBar
+      )}
+      <div className="flex flex-wrap items-center gap-2 sm:ml-auto">
+        {filters}
+        {filterMenu}
+        {topology && topologyIds?.columnFilter ? (
+          <TopologyRegion as="div" id={topologyIds.columnFilter} topology={topology}>
+            {columnFilter}
+          </TopologyRegion>
+        ) : (
+          columnFilter
+        )}
+      </div>
+    </div>
+  );
+}

package/src/blocks/table/data-table-totals.tsx

@@ -0,0 +1,31 @@
+import type { ReactNode } from 'react'
+import { cn } from '@devxcrew/react-ui/lib/utils'
+
+export type DataTableTotal = {
+  label: string
+  value: ReactNode
+}
+
+export function DataTableTotals({
+  className,
+  items,
+}: {
+  className?: string
+  items: DataTableTotal[]
+}) {
+  return (
+    <div
+      className={cn(
+        'grid gap-x-8 gap-y-2 rounded-md border bg-card px-4 py-3 text-sm shadow-sm sm:grid-cols-2 xl:grid-cols-4',
+        className,
+      )}
+    >
+      {items.map((item) => (
+        <div className="flex items-center justify-between gap-4" key={item.label}>
+          <span className="text-muted-foreground">{item.label}</span>
+          <strong className="font-semibold tabular-nums text-foreground">{item.value}</strong>
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/blocks/table/index.ts

@@ -0,0 +1,13 @@
+export {
+  createDataTableColumnHelper,
+  dataTableFeatures,
+  DataTableBlock,
+  type DataTableBlockProps,
+  type DataTableColumn,
+} from './data-table-block'
+export { DataTableFilterMenu, type DataTableFilterOption } from './data-table-filter-menu'
+export { DataTablePagination } from './data-table-pagination'
+export { DataTableRowActions, type DataTableRowAction } from './data-table-row-actions'
+export { DataTableStatus, type DataTableStatusTone } from './data-table-status'
+export { DataTableToolbar, type DataTableColumnControl } from './data-table-toolbar'
+export { DataTableTotals, type DataTableTotal } from './data-table-totals'

package/src/blocks/workspace/index.ts

@@ -0,0 +1,19 @@
+export { WorkspaceActionCard } from './workspace-action-card'
+export { WorkspaceMetricCard, WorkspaceMetricGrid } from './workspace-metric-card'
+export type { WorkspaceMetricTone, WorkspaceMetricTrend } from './workspace-metric-card'
+export { WorkspacePageHeader } from './workspace-page-header'
+export { WorkspaceSectionCard } from './workspace-section-card'
+export { WorkspaceEntityCard } from './workspace-entity-card'
+export type { WorkspaceEntityCardProps } from './workspace-entity-card'
+export { WorkspaceHealthSummary } from './workspace-health-summary'
+export type { WorkspaceHealthSummaryProps } from './workspace-health-summary'
+export { WorkspacePublishStatus } from './workspace-publish-status'
+export type { WorkspacePublishState } from './workspace-publish-status'
+export { WorkspaceRouteChecklist } from './workspace-route-checklist'
+export type { WorkspaceRouteCheck } from './workspace-route-checklist'
+export { WorkspaceRuntimeStatus } from './workspace-runtime-status'
+export type { WorkspaceRuntimeState, WorkspaceRuntimeStatusProps } from './workspace-runtime-status'
+export {
+  WorkspaceApplicationHeader,
+  type WorkspaceApplicationHeaderProps,
+} from './workspace-application-header'

package/src/blocks/workspace/workspace-action-card.tsx

@@ -0,0 +1,73 @@
+import type { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { Card, CardAction, CardDescription, CardHeader, CardTitle } from '../../components/card'
+import { cn } from '../../lib/utils'
+
+type WorkspaceActionCardProps = {
+  action?: ReactNode
+  className?: string
+  description?: ReactNode
+  icon: LucideIcon
+  iconClassName?: string
+  layout?: 'inline' | 'stacked'
+  title: ReactNode
+}
+
+export function WorkspaceActionCard({
+  action,
+  className,
+  description,
+  icon: Icon,
+  iconClassName,
+  layout = 'inline',
+  title,
+}: WorkspaceActionCardProps) {
+  if (layout === 'stacked') {
+    return (
+      <Card
+        className={cn('h-full shadow-xs transition-colors hover:bg-muted/25', className)}
+        size="sm"
+      >
+        <CardHeader className="place-items-center text-center">
+          <span
+            className={cn(
+              'grid size-9 place-items-center rounded-lg bg-primary/10 text-primary',
+              iconClassName,
+            )}
+          >
+            <Icon className="size-4" />
+          </span>
+          <CardTitle>{title}</CardTitle>
+          {description ? (
+            <CardDescription className="leading-5">{description}</CardDescription>
+          ) : null}
+          {action ? <CardAction>{action}</CardAction> : null}
+        </CardHeader>
+      </Card>
+    )
+  }
+
+  return (
+    <Card
+      className={cn('h-full shadow-xs transition-colors hover:bg-muted/25', className)}
+      size="sm"
+    >
+      <CardHeader className="grid grid-cols-[auto_1fr_auto] items-start gap-x-3">
+        <span
+          className={cn(
+            'row-span-2 grid size-9 place-items-center rounded-lg bg-primary/10 text-primary',
+            iconClassName,
+          )}
+        >
+          <Icon className="size-4" />
+        </span>
+        <CardTitle className="col-start-2">{title}</CardTitle>
+        {description ? (
+          <CardDescription className="col-start-2 leading-5">{description}</CardDescription>
+        ) : null}
+        {action ? <CardAction className="col-start-3">{action}</CardAction> : null}
+      </CardHeader>
+    </Card>
+  )
+}

package/src/blocks/workspace/workspace-application-header.tsx

@@ -0,0 +1,67 @@
+import type { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { cn } from '../../lib/utils'
+
+export type WorkspaceApplicationHeaderProps = {
+  applicationIcon?: LucideIcon
+  applicationLogoUrl?: string
+  applicationName: ReactNode
+  className?: string
+  end?: ReactNode
+  meta?: ReactNode
+  status?: ReactNode
+  showIdentity?: boolean
+  showWorkspaceTitle?: boolean
+  start?: ReactNode
+  title?: ReactNode
+  workspaceTitle?: ReactNode
+}
+
+/** Title bar for the canvas below the global workspace menu. */
+export function WorkspaceApplicationHeader({
+  applicationIcon: ApplicationIcon,
+  applicationLogoUrl,
+  applicationName,
+  className,
+  end,
+  meta,
+  status,
+  showIdentity = true,
+  showWorkspaceTitle = true,
+  start,
+  title,
+  workspaceTitle,
+}: WorkspaceApplicationHeaderProps) {
+  return (
+    <header
+      aria-label="Workspace application header"
+      data-ui-component="WorkspaceApplicationHeader"
+      className={cn(
+        'sticky top-0 z-20 flex h-10 shrink-0 items-center justify-between gap-3 border-b border-border bg-background px-3 text-[11px] leading-none text-foreground',
+        className,
+      )}
+    >
+      <div className="flex min-w-0 items-center gap-2">
+        {start}
+        {status}
+        {title ? <span className="truncate text-sm font-semibold">{title}</span> : null}
+        {showIdentity ? (
+          <>
+            {applicationLogoUrl ? (
+              <img alt="" className="size-3 shrink-0 rounded-sm object-contain" src={applicationLogoUrl} />
+            ) : ApplicationIcon ? (
+              <ApplicationIcon aria-hidden="true" className="size-3 shrink-0" />
+            ) : null}
+            <span className="truncate font-medium">{applicationName}</span>
+          </>
+        ) : null}
+      </div>
+      <div className="flex min-w-0 shrink-0 items-center gap-3 text-xs text-muted-foreground">
+        {meta}
+        {showWorkspaceTitle ? <span className="max-w-[45vw] truncate tracking-[0.12em] uppercase">{workspaceTitle}</span> : null}
+        {end}
+      </div>
+    </header>
+  )
+}

package/src/blocks/workspace/workspace-entity-card.tsx

@@ -0,0 +1,48 @@
+import type { ReactNode } from 'react'
+
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '../../components/card'
+import { cn } from '../../lib/utils'
+
+export type WorkspaceEntityCardProps = {
+  action?: ReactNode
+  children?: ReactNode
+  className?: string
+  description?: ReactNode
+  eyebrow?: ReactNode
+  footer?: ReactNode
+  title: ReactNode
+  variant?: 'default' | 'interactive'
+}
+
+export function WorkspaceEntityCard({
+  action,
+  children,
+  className,
+  description,
+  eyebrow,
+  footer,
+  title,
+  variant = 'default',
+}: WorkspaceEntityCardProps) {
+  return (
+    <Card
+      className={cn(
+        'h-full min-w-0 shadow-xs',
+        variant === 'interactive' ? 'transition-shadow hover:shadow-md' : null,
+        className,
+      )}
+      size="sm"
+    >
+      <CardHeader className="grid grid-cols-[1fr_auto] items-start gap-3">
+        <div className="min-w-0">
+          {eyebrow ? <div className="mb-2 text-xs font-semibold tracking-[0.16em] text-muted-foreground uppercase">{eyebrow}</div> : null}
+          <CardTitle>{title}</CardTitle>
+          {description ? <p className="mt-2 text-sm leading-6 text-muted-foreground">{description}</p> : null}
+        </div>
+        {action ? <div className="justify-self-end">{action}</div> : null}
+      </CardHeader>
+      {children ? <CardContent>{children}</CardContent> : null}
+      {footer ? <CardFooter className="mt-auto justify-between gap-3">{footer}</CardFooter> : null}
+    </Card>
+  )
+}

package/src/blocks/workspace/workspace-health-summary.tsx

@@ -0,0 +1,15 @@
+import type { LucideIcon } from 'lucide-react'
+
+import { WorkspaceMetricCard, type WorkspaceMetricTone } from './workspace-metric-card'
+
+export type WorkspaceHealthSummaryProps = {
+  description?: string
+  icon?: LucideIcon
+  label: string
+  tone?: WorkspaceMetricTone
+  value: string
+}
+
+export function WorkspaceHealthSummary({ description, icon, label, tone = 'neutral', value }: WorkspaceHealthSummaryProps) {
+  return <WorkspaceMetricCard description={description} icon={icon} label={label} size="compact" tone={tone} value={value} />
+}

package/src/blocks/workspace/workspace-metric-card.tsx

@@ -0,0 +1,97 @@
+import { ArrowDownRightIcon, ArrowRightIcon, ArrowUpRightIcon, type LucideIcon } from 'lucide-react'
+import type { HTMLAttributes, ReactNode } from 'react'
+
+import { Card, CardContent, CardHeader } from '../../components/card'
+import { cn } from '../../lib/utils'
+
+export type WorkspaceMetricTone = 'accent' | 'danger' | 'neutral' | 'success' | 'warning'
+export type WorkspaceMetricTrend = {
+  direction: 'down' | 'flat' | 'up'
+  label: string
+}
+
+type WorkspaceMetricCardProps = {
+  className?: string
+  description?: ReactNode
+  icon?: LucideIcon
+  label: ReactNode
+  size?: 'compact' | 'default'
+  tone?: WorkspaceMetricTone
+  trend?: WorkspaceMetricTrend
+  value: ReactNode
+}
+
+const iconToneClasses: Record<WorkspaceMetricTone, string> = {
+  accent: 'bg-primary/10 text-primary',
+  danger: 'bg-destructive/10 text-destructive',
+  neutral: 'bg-muted text-muted-foreground',
+  success: 'bg-success/10 text-success',
+  warning: 'bg-warning/15 text-warning-foreground',
+}
+
+const trendIcons: Record<WorkspaceMetricTrend['direction'], LucideIcon> = {
+  down: ArrowDownRightIcon,
+  flat: ArrowRightIcon,
+  up: ArrowUpRightIcon,
+}
+
+const trendClasses: Record<WorkspaceMetricTrend['direction'], string> = {
+  down: 'text-destructive',
+  flat: 'text-muted-foreground',
+  up: 'text-success',
+}
+
+export function WorkspaceMetricCard({
+  className,
+  description,
+  icon: Icon,
+  label,
+  size = 'default',
+  tone = 'neutral',
+  trend,
+  value,
+}: WorkspaceMetricCardProps) {
+  const TrendIcon = trend ? trendIcons[trend.direction] : null
+
+  return (
+    <Card className={cn('min-w-0 shadow-xs', size === 'compact' ? 'py-2' : null, className)} size="sm">
+      <CardHeader className={cn('flex-row items-start justify-between gap-3', size === 'compact' ? 'px-3' : null)}>
+        <div className={cn('min-w-0 font-medium text-muted-foreground', size === 'compact' ? 'text-xs' : 'text-sm')}>{label}</div>
+        {Icon ? (
+          <span
+            className={cn(
+              'grid shrink-0 place-items-center rounded-lg',
+              size === 'compact' ? 'size-7' : 'size-8',
+              iconToneClasses[tone],
+            )}
+          >
+            <Icon className="size-4" />
+          </span>
+        ) : null}
+      </CardHeader>
+      <CardContent className={cn('grid gap-2', size === 'compact' ? 'px-3 gap-1' : null)}>
+        <strong className={cn('font-semibold tracking-tight tabular-nums', size === 'compact' ? 'text-xl' : 'text-2xl')}>{value}</strong>
+        <div className="flex min-h-5 items-center gap-2 text-xs">
+          {trend && TrendIcon ? (
+            <span
+              className={cn(
+                'inline-flex items-center gap-1 font-medium',
+                trendClasses[trend.direction],
+              )}
+            >
+              <TrendIcon className="size-3.5" />
+              {trend.label}
+            </span>
+          ) : null}
+          {description ? (
+            <span className="truncate text-muted-foreground">{description}</span>
+          ) : null}
+        </div>
+      </CardContent>
+    </Card>
+  )
+}
+
+export function WorkspaceMetricGrid({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('grid gap-4 sm:grid-cols-2 xl:grid-cols-4', className)} {...props} />
+}

package/src/blocks/workspace/workspace-page-header.tsx

@@ -0,0 +1,43 @@
+import type { ReactNode } from 'react'
+
+import { cn } from '../../lib/utils'
+
+type WorkspacePageHeaderProps = {
+  actions?: ReactNode
+  badge?: ReactNode
+  className?: string
+  description?: ReactNode
+  eyebrow?: ReactNode
+  title: ReactNode
+}
+
+export function WorkspacePageHeader({
+  actions,
+  badge,
+  className,
+  description,
+  eyebrow,
+  title,
+}: WorkspacePageHeaderProps) {
+  return (
+    <header
+      className={cn('flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between', className)}
+    >
+      <div className="min-w-0 max-w-3xl">
+        {eyebrow ? (
+          <div className="pb-2 text-xs font-semibold tracking-widest text-primary uppercase">
+            {eyebrow}
+          </div>
+        ) : null}
+        <div className="flex flex-wrap items-center gap-2">
+          <h1 className="text-2xl font-semibold tracking-tight sm:text-3xl">{title}</h1>
+          {badge}
+        </div>
+        {description ? (
+          <p className="pt-2 text-sm leading-6 text-muted-foreground">{description}</p>
+        ) : null}
+      </div>
+      {actions ? <div className="flex shrink-0 flex-wrap items-center gap-2">{actions}</div> : null}
+    </header>
+  )
+}

package/src/blocks/workspace/workspace-publish-status.tsx

@@ -0,0 +1,15 @@
+import { CheckCircle2Icon, CircleAlertIcon, CircleDashedIcon } from 'lucide-react'
+
+import { Badge } from '../../components/badge'
+
+export type WorkspacePublishState = 'draft' | 'published' | 'review'
+
+export function WorkspacePublishStatus({ state }: { state: WorkspacePublishState }) {
+  const config = {
+    draft: { icon: CircleDashedIcon, label: 'Draft', variant: 'secondary' as const },
+    published: { icon: CheckCircle2Icon, label: 'Published', variant: 'studio-success' as const },
+    review: { icon: CircleAlertIcon, label: 'Needs review', variant: 'studio-warning' as const },
+  }[state]
+  const Icon = config.icon
+  return <Badge aria-label={`Publish status: ${config.label}`} variant={config.variant}><Icon aria-hidden="true" />{config.label}</Badge>
+}

package/src/blocks/workspace/workspace-route-checklist.tsx

@@ -0,0 +1,28 @@
+import { CheckCircle2Icon, CircleAlertIcon } from 'lucide-react'
+
+import { Badge } from '../../components/badge'
+import { Card, CardContent } from '../../components/card'
+
+export type WorkspaceRouteCheck = { label: string; status: 'blocked' | 'ready' | 'pending' }
+
+export function WorkspaceRouteChecklist({ items }: { items: WorkspaceRouteCheck[] }) {
+  return (
+    <div className="grid gap-3 sm:grid-cols-2">
+      {items.map((item) => {
+        const ready = item.status === 'ready'
+        const Icon = ready ? CheckCircle2Icon : CircleAlertIcon
+        return (
+          <Card key={item.label} size="sm" className="shadow-none">
+            <CardContent className="flex items-center gap-3 p-3 text-sm">
+              <Icon aria-hidden="true" className={`size-4 ${ready ? 'text-emerald-500' : 'text-amber-500'}`} />
+              <span className="flex-1">{item.label}</span>
+              <Badge variant={ready ? 'studio-success' : item.status === 'pending' ? 'studio-warning' : 'secondary'}>
+                {ready ? 'Ready' : item.status === 'pending' ? 'Pending' : 'Blocked'}
+              </Badge>
+            </CardContent>
+          </Card>
+        )
+      })}
+    </div>
+  )
+}

package/src/blocks/workspace/workspace-runtime-status.tsx

@@ -0,0 +1,48 @@
+import { CheckCircle2Icon, CircleAlertIcon, CircleOffIcon, type LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+import { Badge } from '../../components/badge'
+import { cn } from '../../lib/utils'
+
+export type WorkspaceRuntimeState = 'degraded' | 'live' | 'starting' | 'stopped'
+
+export type WorkspaceRuntimeStatusProps = {
+  action?: ReactNode
+  checkedAt?: string
+  className?: string
+  httpStatus?: number | null
+  port?: number
+  responseTimeMs?: number | null
+  state: WorkspaceRuntimeState
+}
+
+const stateConfig: Record<WorkspaceRuntimeState, { icon: LucideIcon; label: string; variant: 'secondary' | 'studio-success' | 'studio-warning' }> = {
+  degraded: { icon: CircleAlertIcon, label: 'Degraded', variant: 'studio-warning' },
+  live: { icon: CheckCircle2Icon, label: 'Live', variant: 'studio-success' },
+  starting: { icon: CircleAlertIcon, label: 'Starting', variant: 'studio-warning' },
+  stopped: { icon: CircleOffIcon, label: 'Not running', variant: 'secondary' },
+}
+
+export function WorkspaceRuntimeStatus({ action, checkedAt, className, httpStatus, port, responseTimeMs, state }: WorkspaceRuntimeStatusProps) {
+  const config = stateConfig[state]
+  const Icon = config.icon
+  const detail = state === 'live'
+    ? [port ? `:${port}` : null, responseTimeMs == null ? null : `${responseTimeMs}ms`].filter(Boolean).join(' · ')
+    : state === 'degraded' && httpStatus
+      ? `HTTP ${httpStatus}`
+      : null
+
+  return (
+    <div aria-live="polite" className={cn('flex min-w-0 items-center justify-between gap-3', className)}>
+      <div className="flex min-w-0 items-center gap-2">
+        <Badge aria-label={`Runtime status: ${config.label}`} variant={config.variant}>
+          <Icon aria-hidden="true" />
+          {config.label}
+        </Badge>
+        {detail ? <span className="truncate text-xs text-muted-foreground">{detail}</span> : null}
+        {checkedAt ? <span className="sr-only">Last checked {checkedAt}</span> : null}
+      </div>
+      {action}
+    </div>
+  )
+}

package/src/blocks/workspace/workspace-section-card.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from 'react'
+
+import {
+  Card,
+  CardAction,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from '../../components/card'
+import { cn } from '../../lib/utils'
+
+type WorkspaceSectionCardProps = {
+  action?: ReactNode
+  children: ReactNode
+  className?: string
+  description?: ReactNode
+  footer?: ReactNode
+  title: ReactNode
+}
+
+export function WorkspaceSectionCard({
+  action,
+  children,
+  className,
+  description,
+  footer,
+  title,
+}: WorkspaceSectionCardProps) {
+  return (
+    <Card className={cn('min-w-0 shadow-xs', className)}>
+      <CardHeader className="border-b">
+        <CardTitle>{title}</CardTitle>
+        {description ? <CardDescription>{description}</CardDescription> : null}
+        {action ? <CardAction>{action}</CardAction> : null}
+      </CardHeader>
+      <CardContent>{children}</CardContent>
+      {footer ? <CardFooter>{footer}</CardFooter> : null}
+    </Card>
+  )
+}