"use client";

import { cn } from "@/lib/utils";

interface StackTool {
  id: string;
  name: string;
  icon: string;
  color?: string;
}

interface StackBadgeProps {
  className?: string;
  tools?: StackTool[];
  label?: string;
}

const DEFAULT_TOOLS: StackTool[] = [
  { id: "1", name: "Superwhisper", icon: "\u26A1", color: "#000000" },
  { id: "2", name: "Notion", icon: "\uD83D\uDCDD", color: "#E16259" },
  { id: "3", name: "Figma", icon: "\uD83C\uDFA8", color: "#A259FF" },
  { id: "4", name: "Linear", icon: "\uD83D\uDCCA", color: "#5E6AD2" },
];

export function StackBadge({ className, tools = DEFAULT_TOOLS, label = "Your Stack" }: StackBadgeProps) {
  return (
    <div
      className={cn(
        "inline-flex items-center gap-3 px-4 py-3",
        "bg-white",
        "border border-neutral-200/60",
        className
      )}
    >
      <span className="text-[10px] uppercase tracking-[0.12em] text-neutral-400 font-medium font-mono whitespace-nowrap">
        {label}
      </span>
      <div className="flex items-center -space-x-1.5">
        {tools.slice(0, 4).map((tool, index) => (
          <div
            key={tool.id}
            className={cn(
              "w-8 h-8 flex items-center justify-center",
              "border-2 border-white",
              "text-sm"
            )}
            style={{
              backgroundColor: tool.color || "#f5f5f5",
              zIndex: tools.length - index,
            }}
            title={tool.name}
          >
            {tool.icon.startsWith("http") ? (
              <img
                src={tool.icon}
                alt={tool.name}
                className="w-4 h-4 object-contain"
              />
            ) : (
              <span className="text-white">{tool.icon}</span>
            )}
          </div>
        ))}
        {tools.length > 4 && (
          <div
            className={cn(
              "w-8 h-8 flex items-center justify-center",
              "bg-neutral-100 border-2 border-white",
              "text-[10px] font-medium text-neutral-500"
            )}
            style={{ zIndex: 0 }}
          >
            +{tools.length - 4}
          </div>
        )}
      </div>
    </div>
  );
}
Prop	Type	Default	Description

tools	`{ id: string; name: string; icon: string; color?: string }[]`	—	Array of tools to display
label	`string`	`"Your Stack"`	Label text
className	`string`	—	Additional CSS classes
StackBadge

API Reference

Source Code
