feat: Add reusable filter/search components for consistency
NEW COMPONENTS in PremiumTable.tsx: 1. SearchInput - Consistent search box styling across all pages - Left-aligned search icon - Clear button (X) when text entered - Props: value, onChange, placeholder, onClear 2. TabBar - Consistent tab styling with counts - Support for accent/warning/default colors - Optional icons - Wraps on mobile - Props: tabs[], activeTab, onChange 3. FilterBar - Simple flex container for filter rows - Responsive: stacks on mobile, row on desktop - Props: children 4. SelectDropdown - Consistent select styling - Custom chevron icon - Props: value, onChange, options[] 5. ActionButton - Consistent button styling - Variants: primary (accent), secondary (outlined), ghost - Sizes: default, small - Optional icon - Props: children, onClick, disabled, variant, size, icon These components ensure visual consistency across all Command Center pages for search, filtering, and actions.
This commit is contained in:
yves.gugger
@ -432,3 +432,201 @@ export function SectionHeader({
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SEARCH INPUT (consistent search styling)
|
||||
// ============================================================================
|
||||
|
||||
import { Search, X } from 'lucide-react'
|
||||
|
||||
export function SearchInput({
|
||||
value,
|
||||
onChange,
|
||||
placeholder = 'Search...',
|
||||
onClear,
|
||||
className,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
placeholder?: string
|
||||
onClear?: () => void
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("relative", className)}>
|
||||
<Search className="absolute left-3.5 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted" />
|
||||
<input
|
||||
type="text"
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
placeholder={placeholder}
|
||||
className="w-full h-10 pl-10 pr-9 bg-background-secondary/50 border border-border/40 rounded-xl
|
||||
text-sm text-foreground placeholder:text-foreground-subtle
|
||||
focus:outline-none focus:border-accent/50 focus:bg-background-secondary/80 transition-all"
|
||||
/>
|
||||
{value && (onClear || onChange) && (
|
||||
<button
|
||||
onClick={() => onClear ? onClear() : onChange('')}
|
||||
className="absolute right-3 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground transition-colors"
|
||||
>
|
||||
<X className="w-4 h-4" />
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// TAB BAR (consistent tab styling)
|
||||
// ============================================================================
|
||||
|
||||
interface TabItem {
|
||||
id: string
|
||||
label: string
|
||||
icon?: React.ComponentType<{ className?: string }>
|
||||
count?: number
|
||||
color?: 'default' | 'accent' | 'warning'
|
||||
}
|
||||
|
||||
export function TabBar({
|
||||
tabs,
|
||||
activeTab,
|
||||
onChange,
|
||||
className,
|
||||
}: {
|
||||
tabs: TabItem[]
|
||||
activeTab: string
|
||||
onChange: (id: string) => void
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("flex flex-wrap items-center gap-1.5 p-1.5 bg-background-secondary/30 border border-border/30 rounded-xl w-fit", className)}>
|
||||
{tabs.map((tab) => {
|
||||
const isActive = activeTab === tab.id
|
||||
const Icon = tab.icon
|
||||
|
||||
return (
|
||||
<button
|
||||
key={tab.id}
|
||||
onClick={() => onChange(tab.id)}
|
||||
className={clsx(
|
||||
"flex items-center gap-2 px-3.5 py-2 text-sm font-medium rounded-lg transition-all",
|
||||
isActive
|
||||
? tab.color === 'warning'
|
||||
? "bg-amber-500 text-background shadow-md"
|
||||
: tab.color === 'accent'
|
||||
? "bg-accent text-background shadow-md shadow-accent/20"
|
||||
: "bg-foreground/10 text-foreground"
|
||||
: "text-foreground-muted hover:text-foreground hover:bg-foreground/5"
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className="w-4 h-4" />}
|
||||
<span className="hidden sm:inline">{tab.label}</span>
|
||||
{tab.count !== undefined && (
|
||||
<span className={clsx(
|
||||
"text-xs px-1.5 py-0.5 rounded-md tabular-nums",
|
||||
isActive ? "bg-background/20" : "bg-foreground/10"
|
||||
)}>
|
||||
{tab.count}
|
||||
</span>
|
||||
)}
|
||||
</button>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// FILTER BAR (row of filters: search + select + buttons)
|
||||
// ============================================================================
|
||||
|
||||
export function FilterBar({
|
||||
children,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("flex flex-col sm:flex-row gap-3 sm:items-center", className)}>
|
||||
{children}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// SELECT DROPDOWN (consistent select styling)
|
||||
// ============================================================================
|
||||
|
||||
import { ChevronDown } from 'lucide-react'
|
||||
|
||||
export function SelectDropdown({
|
||||
value,
|
||||
onChange,
|
||||
options,
|
||||
className,
|
||||
}: {
|
||||
value: string
|
||||
onChange: (value: string) => void
|
||||
options: { value: string; label: string }[]
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<div className={clsx("relative", className)}>
|
||||
<select
|
||||
value={value}
|
||||
onChange={(e) => onChange(e.target.value)}
|
||||
className="h-10 pl-3.5 pr-9 bg-background-secondary/50 border border-border/40 rounded-xl
|
||||
text-sm text-foreground appearance-none cursor-pointer
|
||||
focus:outline-none focus:border-accent/50 focus:bg-background-secondary/80 transition-all"
|
||||
>
|
||||
{options.map((opt) => (
|
||||
<option key={opt.value} value={opt.value}>{opt.label}</option>
|
||||
))}
|
||||
</select>
|
||||
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-foreground-muted pointer-events-none" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
// ============================================================================
|
||||
// ACTION BUTTON (consistent button styling)
|
||||
// ============================================================================
|
||||
|
||||
export function ActionButton({
|
||||
children,
|
||||
onClick,
|
||||
disabled,
|
||||
variant = 'primary',
|
||||
size = 'default',
|
||||
icon: Icon,
|
||||
className,
|
||||
}: {
|
||||
children: ReactNode
|
||||
onClick?: () => void
|
||||
disabled?: boolean
|
||||
variant?: 'primary' | 'secondary' | 'ghost'
|
||||
size?: 'small' | 'default'
|
||||
icon?: React.ComponentType<{ className?: string }>
|
||||
className?: string
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={clsx(
|
||||
"flex items-center justify-center gap-2 font-medium rounded-xl transition-all",
|
||||
"disabled:opacity-50 disabled:cursor-not-allowed",
|
||||
size === 'small' ? "h-8 px-3 text-xs" : "h-10 px-4 text-sm",
|
||||
variant === 'primary' && "bg-accent text-background hover:bg-accent-hover shadow-lg shadow-accent/20",
|
||||
variant === 'secondary' && "bg-foreground/10 text-foreground hover:bg-foreground/15 border border-border/40",
|
||||
variant === 'ghost' && "text-foreground-muted hover:text-foreground hover:bg-foreground/5",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{Icon && <Icon className={size === 'small' ? "w-3.5 h-3.5" : "w-4 h-4"} />}
|
||||
{children}
|
||||
</button>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user