first commit

components/dashboard/DashboardHeader.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { ArrowLeft } from 'lucide-react'
+import { motion } from 'framer-motion'
+import Link from 'next/link'
+import { ReactNode } from 'react'
+
+interface DashboardHeaderProps {
+  title: string
+  description?: string
+  icon?: ReactNode
+  backHref?: string
+  actions?: ReactNode
+}
+
+export function DashboardHeader({ 
+  title, 
+  description, 
+  icon, 
+  backHref = "/dashboard",
+  actions 
+}: DashboardHeaderProps) {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: -20 }}
+      animate={{ opacity: 1, y: 0 }}
+      className="bg-white rounded-2xl shadow-lg border border-gray-200 p-8"
+    >
+      <div className="flex flex-col lg:flex-row items-start lg:items-center justify-between gap-6">
+        <div className="flex items-center space-x-4">
+          <Button 
+            variant="ghost" 
+            asChild 
+            className="w-10 h-10 rounded-full bg-gray-100 p-0 hover:bg-gray-200"
+          >
+            <Link href={backHref}>
+              <ArrowLeft className="h-4 w-4" />
+            </Link>
+          </Button>
+          <div className="flex items-center space-x-4">
+            <div className="w-12 h-12 bg-gradient-to-r from-blue-500 to-purple-600 rounded-xl flex items-center justify-center">
+              {icon}
+            </div>
+            <div>
+              <h1 className="text-3xl font-bold text-gray-900">
+                {title}
+              </h1>
+              {description && (
+                <p className="text-gray-600 text-sm">{description}</p>
+              )}
+            </div>
+          </div>
+        </div>
+        
+        {actions && (
+          <div className="flex items-center space-x-3">
+            {actions}
+          </div>
+        )}
+      </div>
+    </motion.div>
+  )
+}
+
+export { DashboardHeader as default }