56 lines
2.4 KiB
TypeScript
56 lines
2.4 KiB
TypeScript
/**
|
|
* ╔══════════════════════════════════════════════════════════════════╗
|
|
* ║ ║
|
|
* ║ ░█▀▀░█▀█░█▀▄░█▀▀░█░█ ░█▀▄░█▀▀░█░█░█▀▀ ║
|
|
* ║ ░█░░░█░█░█░█░█▀▀░▄▀▄ ░█░█░█▀▀░▀▄▀░▀▀█ ║
|
|
* ║ ░▀▀▀░▀▀▀░▀▀░░▀▀▀░▀░▀ ░▀▀░░▀▀▀░░▀░░▀▀▀ ║
|
|
* ║ ║
|
|
* ║ © 2026 CodeX Devs — All Rights Reserved ║
|
|
* ║ ║
|
|
* ║ discord ── https://discord.gg/codexdev ║
|
|
* ║ youtube ── https://youtube.com/@CodeXDevs ║
|
|
* ║ github ── https://github.com/RayExo ║
|
|
* ║ ║
|
|
* ╚══════════════════════════════════════════════════════════════════╝
|
|
*/
|
|
|
|
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface PageHeaderProps {
|
|
title: string;
|
|
description?: string;
|
|
children?: React.ReactNode;
|
|
icon?: React.ElementType;
|
|
className?: string;
|
|
}
|
|
|
|
export const PageHeader = ({
|
|
title,
|
|
description,
|
|
children,
|
|
icon: Icon,
|
|
className
|
|
}: PageHeaderProps) => {
|
|
return (
|
|
<div className={cn("flex flex-col md:flex-row md:items-center justify-between gap-6 mb-8", className)}>
|
|
<div>
|
|
<h1 className="text-3xl font-black text-white flex items-center gap-3 tracking-tight">
|
|
{Icon && <Icon className="h-8 w-8 text-primary shrink-0" />}
|
|
{title}
|
|
</h1>
|
|
{description && (
|
|
<p className="text-slate-400 mt-1 font-medium italic">
|
|
{description}
|
|
</p>
|
|
)}
|
|
</div>
|
|
{children && (
|
|
<div className="flex items-center gap-4">
|
|
{children}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|