55 lines
1.8 KiB
TypeScript
55 lines
1.8 KiB
TypeScript
import { Button } from '@/components/ui/button'
|
||
import { Template } from '@/type/template'
|
||
import { ArrowLeft, FileText, Settings, Wrench } from 'lucide-react'
|
||
import React from 'react'
|
||
import { useNavigate } from 'react-router-dom'
|
||
|
||
interface HeaderBarProps {
|
||
template: Template
|
||
onBack: () => void
|
||
}
|
||
|
||
export const HeaderBar: React.FC<HeaderBarProps> = ({ template, onBack }) => {
|
||
const navigate = useNavigate()
|
||
|
||
return (
|
||
<div className="flex-shrink-0 border-b bg-card px-4 py-1">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-3">
|
||
<Button variant="ghost" size="icon" onClick={onBack}>
|
||
<ArrowLeft className="h-4 w-4" />
|
||
</Button>
|
||
<div className="flex items-center space-x-2">
|
||
<Settings className="h-5 w-5" />
|
||
<h1 className="text-lg font-semibold">Редактор шаблонов</h1>
|
||
<span className="text-sm text-muted-foreground">—</span>
|
||
<span className="text-sm text-muted-foreground">
|
||
{template.name}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => navigate(`/templates/${template.id}/elements`)}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<Wrench className="h-3.5 w-3.5" />
|
||
Элементы интерфейса
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="sm"
|
||
onClick={() => navigate(`/templates/${template.id}/protocols`)}
|
||
className="flex items-center gap-2"
|
||
>
|
||
<FileText className="h-3.5 w-3.5" />
|
||
Создать протокол
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|