Resource List Page
Create a Queue
Build event-driven systems by creating a Queue above, or use Wrangler CLI to create a Queue.
$
Showing 1-10 of 100
Usage Section
Additional Content Section
Additional Content Section
<ResourceListPage
title="Components"
description="Reusable UI components for building modern applications."
icon={<ListIcon size={32} />}
>
<div className="space-y-4">
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
Component 1
</div>
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
Component 2
</div>
</div>
</ResourceListPage>Installation
Copy and paste the following code into your project.
import { ResourceListPage } from "~/layouts/resource-list";Usage
import { ResourceListPage } from "~/layouts/resource-list";
import { ListIcon } from "@phosphor-icons/react";
export default function Example() {
return (
<ResourceListPage
title="My Resources"
description="A list of all your resources."
icon={<ListIcon size={32} />}
>
{/* Your content here */}
</ResourceListPage>
);
}Examples
Basic
Projects
Project content
<ResourceListPage
title="Projects"
description="All your projects in one place."
>
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
Project content
</div>
</ResourceListPage>With Icon
Code Snippets
Snippet content
<ResourceListPage
title="Code Snippets"
description="Your saved code snippets."
icon={<CodeIcon size={32} />}
>
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
Snippet content
</div>
</ResourceListPage>With Usage Sidebar
API Keys
API key content
Usage
Use API keys to authenticate your requests.
<ResourceListPage
title="API Keys"
description="Manage your API keys and access tokens."
icon={<ListIcon size={32} />}
usage={
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
<h3 className="font-semibold mb-2">Usage</h3>
<p className="text-sm text-neutral-600 dark:text-neutral-400">
Use API keys to authenticate your requests.
</p>
</div>
}
>
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
API key content
</div>
</ResourceListPage>With Additional Content
Deployments
Deployment content
Quick Actions
Quick Actions
<ResourceListPage
title="Deployments"
description="View and manage your deployments."
icon={<ListIcon size={32} />}
additionalContent={
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
<h3 className="font-semibold mb-2">Quick Actions</h3>
<Button variant="primary" className="w-full">
New Deployment
</Button>
</div>
}
>
<div className="p-4 bg-white dark:bg-neutral-900 rounded-lg border">
Deployment content
</div>
</ResourceListPage>API Reference
| Prop | Type | Default |
|---|---|---|
| title | string | undefined |
| description | string | undefined |
| icon | React.ReactNode | undefined |
| usage | React.ReactNode | undefined |
| additionalContent | React.ReactNode | undefined |
| children | React.ReactNode | required |