Resource List
@photon-ai/kumo-solid

Resource List

A layout component for resource list pages with optional sidebar content.

KV Namespaces

production-kv

Created 2 days ago

staging-kv

Created 1 week ago

Usage Example

// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');

Learn More

Check out our documentation to learn more about KV storage.

import { Surface, Code } from "@photon-ai/kumo-solid";
import { DatabaseIcon } from "~/components/icons";
import { ResourceListPage } from "../kumo/resource-list/resource-list";

export function ResourceListCompleteDemo() {
  return (
    <ResourceListPage
      className="min-h-[400px]"
      title="KV Namespaces"
      description="Store key-value data globally with low-latency access"
      icon={<DatabaseIcon size={32} className="text-kumo-subtle" />}
      usage={
        <Surface className="p-4">
          <h3 class="mb-2 font-semibold">Usage Example</h3>
          <Code
            lang="ts"
            code={`// Read from KV
const value = await KV.get('key');

// Write to KV
await KV.put('key', 'value');`}
          />
        </Surface>
      }
      additionalContent={
        <Surface className="p-4">
          <h3 class="mb-2 font-semibold">Learn More</h3>
          <p class="text-sm text-kumo-subtle">
            Check out our documentation to learn more about KV storage.
          </p>
        </Surface>
      }
    >
      <div class="space-y-4">
        <Surface className="p-6">
          <h4 class="mb-2 font-semibold">production-kv</h4>
          <p class="text-sm text-kumo-subtle">Created 2 days ago</p>
        </Surface>
        <Surface className="p-6">
          <h4 class="mb-2 font-semibold">staging-kv</h4>
          <p class="text-sm text-kumo-subtle">Created 1 week ago</p>
        </Surface>
      </div>
    </ResourceListPage>
  );
}

Installation

ResourceListPage is a block: a source-distributed Solid component that you own and customize.

The published Kumo CLI currently emits React source. Until a Solid-aware installer is available, copy this block from the repository.

1. Copy the Solid block directory

packages/kumo-docs-astro/src/components/kumo/resource-list/

2. Import from your local path

import { ResourceListPage } from "./components/kumo/resource-list/resource-list";

Why blocks? Blocks give you full ownership of the code, allowing you to customize layouts to fit your specific needs. They’re ideal for page-level patterns that often need project-specific modifications.

Usage

import { ResourceListPage } from "./components/kumo/resource-list/resource-list";
import { Surface } from "@photon-ai/kumo-solid";
import { DatabaseIcon } from "~/components/icons";

export default function DatabasesPage() {
  return (
    <ResourceListPage
      title="Databases"
      description="Manage your database instances and configurations"
      icon={<DatabaseIcon size={32} class="text-kumo-strong" />}
    >
      <Surface class="p-6">{/* Your resource list content */}</Surface>
    </ResourceListPage>
  );
}

Examples

Basic

A minimal resource list page with title, description, and icon.

Databases

Main content area - your resource list would go here

import { Surface } from "@photon-ai/kumo-solid";
import { DatabaseIcon } from "~/components/icons";
import { ResourceListPage } from "../kumo/resource-list/resource-list";

export function ResourceListBasicDemo() {
  return (
    <ResourceListPage
      className="min-h-[400px]"
      title="Databases"
      description="Manage your database instances and configurations"
      icon={<DatabaseIcon size={32} className="text-kumo-subtle" />}
    >
      <Surface className="p-6">
        <p>Main content area - your resource list would go here</p>
      </Surface>
    </ResourceListPage>
  );
}

With Usage Sidebar

Include a sidebar with usage examples or quick start guides.

API Keys

API keys list would appear here

Quick Start

Generate an API key to authenticate your requests

curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com
import { Surface, Code } from "@photon-ai/kumo-solid";
import { ResourceListPage } from "../kumo/resource-list/resource-list";

export function ResourceListWithUsageDemo() {
  return (
    <ResourceListPage
      className="min-h-[400px]"
      title="API Keys"
      description="Create and manage API keys for your applications"
      usage={
        <Surface className="p-4">
          <h3 class="mb-2 font-semibold">Quick Start</h3>
          <p class="mb-3 text-sm text-kumo-subtle">
            Generate an API key to authenticate your requests
          </p>
          <Code
            lang="bash"
            code='curl -H "Authorization: Bearer YOUR_API_KEY" https://api.example.com'
          />
        </Surface>
      }
    >
      <Surface className="p-6">
        <p>API keys list would appear here</p>
      </Surface>
    </ResourceListPage>
  );
}

API Reference

PropertyTypeDescription
titlestringPage title displayed at the top
descriptionstringPage description below the title
iconJSX.ElementIcon displayed next to the title
usageJSX.Element

Sidebar content for usage examples or quick start guides

additionalContentJSX.Element

Additional sidebar content (e.g., resources, links)

childrenJSX.ElementMain content area for the resource list
classNamestringAdditional CSS classes