components/sort.tsx

import classNames from "classnames";
import { TiHeartFullOutline } from "react-icons/ti";
import { MdCalendarToday } from "react-icons/md";

interface Props {
  value: "likes" | "createdAt" | "trending";
  onChange: (s: "createdAt" | "likes" | "trending") => void;
}
export const Sort = ({ value, onChange }: Props) => {
  return (
    <div className="flex items-center justify-center border-[3px] rounded-full border-gray-50 drop-shadow-sm bg-gray-100 dark:bg-slate-900 dark:border-slate-800 ring-[1px] ring-gray-200 dark:ring-slate-700 gap-1">
      <button
        className={classNames(
          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
          {
            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
              value === "trending",
          }
        )}
        onClick={() => onChange("trending")}
      >
        <TiHeartFullOutline className="w-3.5 h-3.5" />
        Trending
      </button>
      <button
        className={classNames(
          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
          {
            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
              value === "likes",
          }
        )}
        onClick={() => onChange("likes")}
      >
        <TiHeartFullOutline className="w-3.5 h-3.5" />
        Likes
      </button>
      <button
        className={classNames(
          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
          {
            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
              value === "createdAt",
          }
        )}
        onClick={() => onChange("createdAt")}
      >
        <MdCalendarToday className="w-3.5 h-3.5" />
        Date
      </button>
    </div>
  );
};