Animated Tab Component

import { SlideTabs } from "@/components/ui/animated-tab-component";



 const tabs = [
    {
      value: "Reports",
      label: (
        <div className="flex items-center gap-2 ">
          <div className="text-xs bg-green-500 px-2 py-1 rounded-full">New</div>
          Reports
        </div>
      ),
      content: (
        <div className="flex items-center">
     A Big Report
        </div>
      )
    },
    {
      value: "Directory",
      label: (
        <div className="flex items-center gap-2">Directory</div>
      ),
      content: (
        <div className="">
         A Big Directory
        </div>
      ),
    },
  ];
export default function DemoOne() {
  return  <SlideTabs
              tabs={tabs}
              defaultValue="Reports"
              onValueChange={(value) =>
                console.log(value)
              }
              className="w-full"
            />;
}