Tabs with badge

1import { Badge } from "@/components/ui/badge";
2import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
3 
4const tabs = [
5  {
6    name: "Profile",
7    value: "profile",
8  },
9  {
10    name: "Projects",
11    value: "projects",
12    count: "10",
13  },
14  {
15    name: "Messages",
16    value: "messages",
17    count: "5",
18  },
19  {
20    name: "Settings",
21    value: "settings",
22  },
23];
24 
25const TabsWithBadge = () => {
26  return (
27    <Tabs defaultValue={tabs[0].value}>
28      <TabsList>
29        {tabs.map((feature) => (
30          <TabsTrigger key={feature.value} value={feature.value}>
31            {feature.name}
32            {feature.count && (
33              <Badge className="min-w-5.5 px-1">{feature.count}</Badge>
34            )}
35          </TabsTrigger>
36        ))}
37      </TabsList>
38    </Tabs>
39  );
40};
41 
42export default TabsWithBadge;