mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
8ceae6d6fd
- Created a new document for custom skills development (`custom.md`) detailing the structure, creation, implementation, and best practices for developing custom CCW skills. - Added an index document (`index.md`) summarizing all built-in skills, their categories, and usage examples. - Introduced a reference guide (`reference.md`) providing a quick reference for all 33 built-in CCW skills, including triggers and purposes.
49 lines
1.6 KiB
TypeScript
49 lines
1.6 KiB
TypeScript
/**
|
|
* Terminal Layout Presets Demo
|
|
* Interactive layout preset buttons
|
|
*/
|
|
import React, { useState } from 'react'
|
|
|
|
export default function TerminalLayoutPresets() {
|
|
const [layout, setLayout] = useState('grid-2x2')
|
|
|
|
const layouts = {
|
|
single: 'grid-cols-1 grid-rows-1',
|
|
'split-h': 'grid-cols-2 grid-rows-1',
|
|
'split-v': 'grid-cols-1 grid-rows-2',
|
|
'grid-2x2': 'grid-cols-2 grid-rows-2',
|
|
}
|
|
|
|
return (
|
|
<div className="p-6 bg-background space-y-4">
|
|
<div className="flex items-center justify-between">
|
|
<h3 className="text-sm font-semibold">Terminal Layout Presets</h3>
|
|
<div className="flex gap-2">
|
|
{Object.keys(layouts).map((preset) => (
|
|
<button
|
|
key={preset}
|
|
onClick={() => setLayout(preset)}
|
|
className={`px-3 py-1.5 text-xs rounded transition-colors ${
|
|
layout === preset
|
|
? 'bg-primary text-primary-foreground'
|
|
: 'border hover:bg-accent'
|
|
}`}
|
|
>
|
|
{preset.replace('-', ' ').toUpperCase()}
|
|
</button>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
<div className={`grid gap-2 h-64 ${layouts[layout]}`}>
|
|
{Array.from({ length: layout === 'single' ? 1 : layout.includes('2x') ? 4 : 2 }).map((_, i) => (
|
|
<div key={i} className="bg-muted/20 border rounded p-4 font-mono text-xs">
|
|
<div className="text-green-500">$ Terminal {i + 1}</div>
|
|
<div className="text-muted-foreground mt-1">Ready for input...</div>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|