67 lines
1.8 KiB
TypeScript
67 lines
1.8 KiB
TypeScript
'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 }
|