64 lines
1.9 KiB
TypeScript
64 lines
1.9 KiB
TypeScript
import React from "react";
|
|
|
|
interface ModuleHeaderProps {
|
|
title: string;
|
|
breadcrumbs?: Array<{
|
|
name: string;
|
|
href?: string;
|
|
}>;
|
|
}
|
|
|
|
const ModuleHeader: React.FC<ModuleHeaderProps> = ({
|
|
title,
|
|
breadcrumbs = [],
|
|
}) => {
|
|
return (
|
|
<div className="bg-white border-b border-gray-200 px-4 py-3">
|
|
{/* Breadcrumb Navigation */}
|
|
<nav className="flex" aria-label="Breadcrumb">
|
|
<ol className="flex items-center space-x-1 text-sm">
|
|
<li>
|
|
<div className="flex items-center">
|
|
<svg
|
|
className="h-4 w-4 text-gray-400"
|
|
fill="none"
|
|
viewBox="0 0 24 24"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
|
|
/>
|
|
</svg>
|
|
<span className="ml-1 font-medium text-gray-500">Anasayfa</span>
|
|
</div>
|
|
</li>
|
|
|
|
{breadcrumbs.map((breadcrumb, index) => (
|
|
<li key={index}>
|
|
<div className="flex items-center">
|
|
<span className="text-gray-400 mx-2">/</span>
|
|
<span className="font-medium text-gray-500">
|
|
{breadcrumb.name}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
))}
|
|
|
|
<li>
|
|
<div className="flex items-center">
|
|
<span className="text-gray-400 mx-2">/</span>
|
|
<span className="font-medium text-gray-900" aria-current="page">
|
|
{title}
|
|
</span>
|
|
</div>
|
|
</li>
|
|
</ol>
|
|
</nav>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ModuleHeader;
|