LULDev/zero-gpu-spaces

1import classNames from "classnames";2import { TiHeartFullOutline } from "react-icons/ti";3import { MdCalendarToday } from "react-icons/md";4 5interface Props {6  value: "likes" | "createdAt";7  onChange: (s: "createdAt" | "likes") => void;8}9export const Sort = ({ value, onChange }: Props) => {10  return (11    <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">12      <button13        className={classNames(14          "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",15          {16            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":17              value === "likes",18          }19        )}20        onClick={() => onChange("likes")}21      >22        <TiHeartFullOutline className="w-3.5 h-3.5" />23        Likes24      </button>25      <button26        className={classNames(27          "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",28          {29            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":30              value === "createdAt",31          }32        )}33        onClick={() => onChange("createdAt")}34      >35        <MdCalendarToday className="w-3.5 h-3.5" />36        Date37      </button>38    </div>39  );40};41