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.
96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
/**
|
|
* Input Variants Demo
|
|
* Shows all input states
|
|
*/
|
|
import React, { useState } from 'react'
|
|
|
|
export default function InputVariantsDemo() {
|
|
const [value, setValue] = useState('')
|
|
|
|
return (
|
|
<div className="p-6 bg-background space-y-6">
|
|
<h3 className="text-sm font-semibold">Input States</h3>
|
|
|
|
<div className="grid md:grid-cols-2 gap-6">
|
|
{/* Default */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Default</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Enter text..."
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
|
|
{/* With Value */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">With Value</label>
|
|
<input
|
|
type="text"
|
|
value="John Doe"
|
|
readOnly
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
|
|
/>
|
|
</div>
|
|
|
|
{/* Error State */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Error State</label>
|
|
<input
|
|
type="text"
|
|
placeholder="Invalid input"
|
|
className="flex h-10 w-full rounded-md border border-destructive bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-destructive"
|
|
/>
|
|
<p className="text-xs text-destructive">This field is required</p>
|
|
</div>
|
|
|
|
{/* Disabled */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Disabled</label>
|
|
<input
|
|
type="text"
|
|
disabled
|
|
placeholder="Disabled input"
|
|
className="flex h-10 w-full rounded-md border border-input bg-muted px-3 py-2 text-sm opacity-50 cursor-not-allowed"
|
|
/>
|
|
</div>
|
|
|
|
{/* With Icon */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Search Input</label>
|
|
<div className="relative">
|
|
<span className="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground">🔍</span>
|
|
<input
|
|
type="text"
|
|
placeholder="Search..."
|
|
className="flex h-10 w-full rounded-md border border-input bg-background pl-10 pr-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Controlled */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Controlled Input</label>
|
|
<input
|
|
type="text"
|
|
value={value}
|
|
onChange={(e) => setValue(e.target.value)}
|
|
placeholder="Type something..."
|
|
className="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
<p className="text-xs text-muted-foreground">Value: {value || '(empty)'}</p>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Textarea */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium">Textarea</label>
|
|
<textarea
|
|
placeholder="Enter multi-line text..."
|
|
className="flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm focus:outline-none focus:ring-2 focus:ring-ring"
|
|
/>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|