mirror of https://github.com/catlog22/Claude-Code-Workflow.git synced 2026-03-01 15:03:57 +08:00

Files

catlog22 2fb93d20e0 feat: add queue management and terminal dashboard documentation in Chinese

- Introduced comprehensive documentation for the queue management feature, detailing its pain points, core functionalities, and component structure.
- Added terminal dashboard documentation, highlighting its layout, core features, and usage examples.
- Created an index page in Chinese for Claude Code Workflow, summarizing its purpose and core features, along with quick links to installation and guides.

2026-03-01 10:52:46 +08:00

1.6 KiB

Raw Blame History

Demo Components

This directory contains React components that are embedded in the documentation as interactive demos.

Creating a New Demo

Create a new .tsx file in this directory (e.g., my-demo.tsx)
Export a default React component
Use it in markdown with :::demo my-demo :::

Demo Template

import React from 'react'

/**
 * Brief description of what this demo shows
 */
export default function MyDemo() {
  return (
    <div style={{ padding: '16px' }}>
      {/* Your demo content */}
    </div>
  )
}

Demo Guidelines

Keep it simple: Demos should be focused and easy to understand
Use inline styles: Avoid external dependencies for portability
Add comments: Explain what the demo is showing
Test interactions: Ensure buttons, inputs, etc. work correctly
Handle state: Use React hooks (useState, useEffect) for interactive demos

Demo File Naming

Use kebab-case: button-variants.tsx, card-basic.tsx
Group by category:
- ui/ - UI component demos
- shared/ - Shared component demos
- pages/ - Page-level demos

Using Props

If you need to pass custom props to a demo, use the extended markdown syntax:

:::demo my-demo
title: Custom Title
height: 300px
expandable: false
:::

Available Props

Prop	Type	Default	Description
name	string	-	Demo component name (required)
title	string	name	Custom demo title
height	string	'auto'	Container height
expandable	boolean	true	Allow expand/collapse
showCode	boolean	true	Show code tab

1.6 KiB Raw Blame History