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.
80 lines
2.8 KiB
TypeScript
80 lines
2.8 KiB
TypeScript
/**
|
|
* Checkbox Variants Demo
|
|
* Shows different checkbox states
|
|
*/
|
|
import React, { useState } from 'react'
|
|
|
|
export default function CheckboxVariantsDemo() {
|
|
const [checked, setChecked] = useState({ a: true, b: false, c: true })
|
|
|
|
return (
|
|
<div className="p-6 bg-background space-y-6">
|
|
<h3 className="text-sm font-semibold">Checkbox States</h3>
|
|
|
|
<div className="space-y-4">
|
|
{/* Checked */}
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked.a}
|
|
onChange={(e) => setChecked({ ...checked, a: e.target.checked })}
|
|
className="h-4 w-4 rounded border border-primary accent-primary"
|
|
/>
|
|
<span className="text-sm">Checked checkbox</span>
|
|
</label>
|
|
|
|
{/* Unchecked */}
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input
|
|
type="checkbox"
|
|
checked={checked.b}
|
|
onChange={(e) => setChecked({ ...checked, b: e.target.checked })}
|
|
className="h-4 w-4 rounded border border-primary accent-primary"
|
|
/>
|
|
<span className="text-sm">Unchecked checkbox</span>
|
|
</label>
|
|
|
|
{/* Disabled */}
|
|
<label className="flex items-center gap-3 cursor-not-allowed opacity-50">
|
|
<input
|
|
type="checkbox"
|
|
disabled
|
|
className="h-4 w-4 rounded border border-primary"
|
|
/>
|
|
<span className="text-sm">Disabled checkbox</span>
|
|
</label>
|
|
|
|
{/* Disabled Checked */}
|
|
<label className="flex items-center gap-3 cursor-not-allowed opacity-50">
|
|
<input
|
|
type="checkbox"
|
|
disabled
|
|
defaultChecked
|
|
className="h-4 w-4 rounded border border-primary accent-primary"
|
|
/>
|
|
<span className="text-sm">Disabled checked checkbox</span>
|
|
</label>
|
|
</div>
|
|
|
|
{/* Usage Example */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">Usage Example</h4>
|
|
<div className="p-4 border rounded-lg space-y-2">
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" className="h-4 w-4 rounded border accent-primary" />
|
|
<span className="text-sm">Accept terms and conditions</span>
|
|
</label>
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" className="h-4 w-4 rounded border accent-primary" />
|
|
<span className="text-sm">Subscribe to newsletter</span>
|
|
</label>
|
|
<label className="flex items-center gap-3 cursor-pointer">
|
|
<input type="checkbox" className="h-4 w-4 rounded border accent-primary" />
|
|
<span className="text-sm">Remember me</span>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|