67 lines
2.4 KiB
TypeScript
67 lines
2.4 KiB
TypeScript
'use client'
|
||
|
||
import { useThemeStyles, useTheme, cn } from '@/lib/ui-styles'
|
||
|
||
interface TemplateManagerHeaderProps {
|
||
searchTerm: string
|
||
onSearchChange: (value: string) => void
|
||
}
|
||
|
||
export default function TemplateManagerHeader({
|
||
searchTerm,
|
||
onSearchChange,
|
||
}: TemplateManagerHeaderProps) {
|
||
const styles = useThemeStyles()
|
||
const theme = useTheme()
|
||
const textTitle = theme === 'dark' ? 'text-white' : 'text-slate-900'
|
||
const textDesc = theme === 'dark' ? 'text-slate-400' : 'text-slate-500'
|
||
|
||
return (
|
||
<section
|
||
className={cn(
|
||
'mb-4 border-b px-1 pb-4',
|
||
theme === 'dark'
|
||
? 'border-slate-800 text-white'
|
||
: 'border-slate-200 text-slate-900'
|
||
)}
|
||
>
|
||
<div className="flex flex-col gap-4 lg:flex-row lg:items-end lg:justify-between">
|
||
<div className="space-y-1">
|
||
<h2 className={cn('text-lg font-semibold', textTitle)}>模板管理</h2>
|
||
<p className={cn('text-sm', textDesc)}>
|
||
预制模板可预览和启用，自定义模板按许可证开放。
|
||
</p>
|
||
</div>
|
||
<div className="relative w-full md:w-[320px] lg:w-[360px]">
|
||
<input
|
||
type="text"
|
||
value={searchTerm}
|
||
onChange={(e) => onSearchChange(e.target.value)}
|
||
placeholder="搜索模板名称..."
|
||
className={cn(styles.inputStyles.base, 'pl-11 pr-10')}
|
||
/>
|
||
<svg className={cn('absolute left-4 top-3 w-5 h-5', theme === 'dark' ? 'text-slate-500' : 'text-slate-400')} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
|
||
</svg>
|
||
{searchTerm && (
|
||
<button
|
||
type="button"
|
||
onClick={() => onSearchChange('')}
|
||
className={cn(
|
||
styles.buttonStyles.ghost,
|
||
styles.buttonModifiers.icon,
|
||
'absolute right-2 top-2 text-slate-500 dark:text-slate-400 hover:text-slate-700 dark:hover:text-slate-200',
|
||
)}
|
||
aria-label="清空模板搜索"
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</section>
|
||
)
|
||
}
|