// Plaaayground v2 — SortIndicator
// Blueprint: 05 — Arrow direction icon for sortable headers

import { motion, AnimatePresence } from "framer-motion";
import { ArrowUp, ArrowDown, ArrowUpDown } from "lucide-react";
import { spring } from "@/lib/motion";
import { cn } from "@/lib/utils";

export interface SortIndicatorProps {
  direction: "asc" | "desc" | "none";
  className?: string;
}

export function SortIndicator({ direction, className }: SortIndicatorProps) {
  const isActive = direction !== "none";

  return (
    <span
      className={cn(
        "inline-flex items-center justify-center w-4 h-4",
        isActive ? "text-foreground" : "text-muted-foreground/50",
        className
      )}
      aria-label={direction === "asc" ? "Sorted ascending" : direction === "desc" ? "Sorted descending" : "Not sorted"}
    >
      <AnimatePresence mode="wait" initial={false}>
        <motion.span
          key={direction}
          initial={{ opacity: 0, y: direction === "asc" ? 4 : -4 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0 }}
          transition={spring.snappy}
        >
          {direction === "asc" && <ArrowUp className="w-3.5 h-3.5" />}
          {direction === "desc" && <ArrowDown className="w-3.5 h-3.5" />}
          {direction === "none" && <ArrowUpDown className="w-3.5 h-3.5" />}
        </motion.span>
      </AnimatePresence>
    </span>
  );
}
SortIndicator

Source Code
