import { Gauge, Download } from "lucide-react"
import {
Card,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card"
import { Button } from "@/components/ui/button";
export function Header1() {
return (
<div className="pb-4">
<Card className="flex flex-row flex-wrap items-center justify-between space-y-0 bg-secondary">
<CardHeader className="flex-row flex-wrap gap-6">
<div className="hidden md:flex items-center justify-center w-16 h-16 bg-secondary border rounded-md">
<Gauge />
</div>
<div>
<CardTitle className="text-2xl">Analytics Dashboard</CardTitle>
<CardDescription className="text-sm">Monitor key metrics, check reporting and review insights</CardDescription>
</div>
</CardHeader>
<CardContent className="flex flex-wrap items-center gap-3 md:pb-0">
<Button variant="outline" size="sm" className="text-xs">
<Download/> Download
</Button>
<Button variant="outline" size="sm" className="text-xs">Settings</Button>
<Button size="sm" className="text-xs">Download Report</Button>
</CardContent>
</Card>
</div>
)
}
Can't find the right component?
Describe it and Shuffle AI builds it in seconds, ready to edit and export.
Free to start
Generate with AI
