ui changes

components/page-header.tsx

@@ -0,0 +1,30 @@
+"use client"
+
+import { LucideIcon } from "lucide-react"
+
+interface PageHeaderProps {
+    title: string
+    description: string
+    icon?: LucideIcon
+    children?: React.ReactNode
+}
+
+export function PageHeader({ title, description, icon: Icon, children }: PageHeaderProps) {
+    return (
+        <div className="flex items-center gap-5">
+            <div className="p-3 rounded-lg bg-blue-gradient flex items-center justify-center relative overflow-hidden">
+
+                {Icon && <Icon className="h-8 w-8 text-white relative z-10" />}
+                {children}
+            </div>
+            <div className="flex flex-col">
+                <h1 className="text-3xl font-bold heading-blue-gradient">
+                    {title}
+                </h1>
+                <p className="text-gray-500 dark:text-gray-400 mt-1 text-sm font-medium">
+                    {description}
+                </p>
+            </div>
+        </div>
+    )
+}