enzostvs/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" | "trending";7  onChange: (s: "createdAt" | "likes" | "trending") => 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 === "trending",18          }19        )}20        onClick={() => onChange("trending")}21      >22        <TiHeartFullOutline className="w-3.5 h-3.5" />23        Trending24      </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 === "likes",31          }32        )}33        onClick={() => onChange("likes")}34      >35        <TiHeartFullOutline className="w-3.5 h-3.5" />36        Likes37      </button>38      <button39        className={classNames(40          "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",41          {42            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":43              value === "createdAt",44          }45        )}46        onClick={() => onChange("createdAt")}47      >48        <MdCalendarToday className="w-3.5 h-3.5" />49        Date50      </button>51    </div>52  );53};54