Spaces:
Running
Running
File size: 2,141 Bytes
92c8d86 118829c 92c8d86 900e2e7 92c8d86 118829c 900e2e7 92c8d86 900e2e7 92c8d86 900e2e7 92c8d86 900e2e7 92c8d86 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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>
);
};
|