mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-01 15:03:57 +08:00
2fb93d20e0
- 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.
55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import React from 'react'
|
|
import { Button } from '@/components/ui/Button'
|
|
|
|
/**
|
|
* Button Variants Demo
|
|
* Shows all 8 visual variants and 4 sizes of the Button component
|
|
*
|
|
* Variants include:
|
|
* - default: Primary brand color button
|
|
* - destructive: Red danger button
|
|
* - outline: Bordered light button
|
|
* - secondary: Gray secondary button
|
|
* - ghost: Transparent hover button
|
|
* - link: Link-style button
|
|
* - gradient: Brand gradient button
|
|
* - gradientPrimary: Primary gradient button
|
|
*
|
|
* Sizes include:
|
|
* - default: Standard size (h-10)
|
|
* - sm: Small size (h-9)
|
|
* - lg: Large size (h-11)
|
|
* - icon: Square icon size (h-10 w-10)
|
|
*/
|
|
export default function ButtonVariants() {
|
|
return (
|
|
<div className="flex flex-col gap-6 p-4">
|
|
{/* Variants Section */}
|
|
<div>
|
|
<h3 className="text-sm font-semibold mb-3 text-muted-foreground">Variants</h3>
|
|
<div className="flex flex-wrap gap-3">
|
|
<Button variant="default">Default</Button>
|
|
<Button variant="destructive">Destructive</Button>
|
|
<Button variant="outline">Outline</Button>
|
|
<Button variant="secondary">Secondary</Button>
|
|
<Button variant="ghost">Ghost</Button>
|
|
<Button variant="link">Link</Button>
|
|
<Button variant="gradient">Gradient</Button>
|
|
<Button variant="gradientPrimary">Gradient Primary</Button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Sizes Section */}
|
|
<div>
|
|
<h3 className="text-sm font-semibold mb-3 text-muted-foreground">Sizes</h3>
|
|
<div className="flex flex-wrap items-center gap-3">
|
|
<Button size="sm">Small</Button>
|
|
<Button size="default">Default</Button>
|
|
<Button size="lg">Large</Button>
|
|
<Button size="icon">🔍</Button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|