44 lines
1.1 KiB
TypeScript
44 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { motion } from "framer-motion";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
interface AgentSectionHeaderProps {
|
|
title: string;
|
|
count?: number;
|
|
icon?: React.ReactNode;
|
|
className?: string;
|
|
delay?: number;
|
|
}
|
|
|
|
export function AgentSectionHeader({
|
|
title,
|
|
count,
|
|
icon,
|
|
className,
|
|
delay = 0,
|
|
}: AgentSectionHeaderProps) {
|
|
return (
|
|
<motion.div
|
|
className={cn("flex items-center gap-2", className)}
|
|
initial={{ opacity: 0, x: -10 }}
|
|
animate={{ opacity: 1, x: 0 }}
|
|
transition={{ duration: 0.3, delay }}
|
|
>
|
|
{icon && (
|
|
<div className="flex h-5 w-5 items-center justify-center rounded-md bg-slate-100 text-slate-600 dark:bg-slate-800 dark:text-slate-400">
|
|
{icon}
|
|
</div>
|
|
)}
|
|
<h3 className="text-sm font-semibold text-slate-800 dark:text-slate-200">
|
|
{title}
|
|
</h3>
|
|
{count !== undefined && (
|
|
<span className="rounded-full bg-slate-100 px-2 py-0.5 text-[10px] font-medium text-slate-600 dark:bg-slate-800 dark:text-slate-400">
|
|
{count}
|
|
</span>
|
|
)}
|
|
</motion.div>
|
|
);
|
|
}
|