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.
58 lines
2.2 KiB
TypeScript
58 lines
2.2 KiB
TypeScript
/**
|
|
* Badge Variants Demo
|
|
* Shows all available badge variants
|
|
*/
|
|
import React from 'react'
|
|
|
|
export default function BadgeVariantsDemo() {
|
|
const variants = [
|
|
{ name: 'default', class: 'bg-primary text-primary-foreground' },
|
|
{ name: 'secondary', class: 'bg-secondary text-secondary-foreground' },
|
|
{ name: 'destructive', class: 'bg-destructive text-destructive-foreground' },
|
|
{ name: 'outline', class: 'border text-foreground' },
|
|
{ name: 'success', class: 'bg-success text-white' },
|
|
{ name: 'warning', class: 'bg-warning text-white' },
|
|
{ name: 'info', class: 'bg-info text-white' },
|
|
{ name: 'review', class: 'bg-purple-500 text-white' },
|
|
{ name: 'gradient', class: 'bg-gradient-to-r from-blue-500 to-purple-500 text-white' },
|
|
]
|
|
|
|
return (
|
|
<div className="p-6 bg-background space-y-6">
|
|
<h3 className="text-sm font-semibold">Badge Variants</h3>
|
|
|
|
<div className="space-y-4">
|
|
<div className="flex flex-wrap gap-3">
|
|
{variants.map((v) => (
|
|
<span
|
|
key={v.name}
|
|
className={`inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold ${v.class}`}
|
|
>
|
|
{v.name}
|
|
</span>
|
|
))}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Usage Examples */}
|
|
<div className="space-y-3">
|
|
<h4 className="text-sm font-medium">Usage Examples</h4>
|
|
<div className="space-y-2">
|
|
<div className="flex items-center gap-2 p-2 border rounded">
|
|
<span className="font-medium">Status:</span>
|
|
<span className="inline-flex items-center rounded-full bg-success px-2 py-0.5 text-xs text-white">Active</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-2 border rounded">
|
|
<span className="font-medium">Priority:</span>
|
|
<span className="inline-flex items-center rounded-full bg-destructive px-2 py-0.5 text-xs text-white">High</span>
|
|
</div>
|
|
<div className="flex items-center gap-2 p-2 border rounded">
|
|
<span className="font-medium">Type:</span>
|
|
<span className="inline-flex items-center rounded-full bg-info px-2 py-0.5 text-xs text-white">Feature</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|