Implement rank_user_replies in web

website/src/components/Sortable/Sortable.tsx

@@ -0,0 +1,48 @@
+import { ReactNode, useEffect, useState } from "react";
+import { SortableItem } from "./SortableItem";
+
+export interface SortableProps {
+  items: ReactNode[];
+  onChange: (newSortedIndices: number[]) => void;
+}
+
+export const Sortable = ({ items, onChange }) => {
+  const [sortOrder, setSortOrder] = useState<number[]>([]);
+
+  const update = (newRanking: number[]) => {
+    setSortOrder(newRanking);
+    onChange(newRanking);
+  };
+
+  useEffect(() => {
+    const indices = Array.from({ length: items.length }).map((_, i) => i);
+    setSortOrder(indices);
+    onChange(indices);
+  }, [items, onChange]);
+
+  return (
+    <ul className="flex flex-col gap-4">
+      {sortOrder.map((rank, i) => (
+        <SortableItem
+          key={`${rank}`}
+          canIncrement={i > 0}
+          onIncrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i - 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+          canDecrement={i < sortOrder.length - 1}
+          onDecrement={() => {
+            const newRanking = sortOrder.slice();
+            const newIdx = i + 1;
+            [newRanking[i], newRanking[newIdx]] = [newRanking[newIdx], newRanking[i]];
+            update(newRanking);
+          }}
+        >
+          {items[rank]}
+        </SortableItem>
+      ))}
+    </ul>
+  );
+};

website/src/components/Sortable/SortableItem.tsx

@@ -0,0 +1,44 @@
+import { ArrowUpIcon, ArrowDownIcon } from "@heroicons/react/20/solid";
+import { Button } from "src/components/Button";
+import clsx from "clsx";
+
+export interface SortableItemProps {
+  canIncrement: boolean;
+  canDecrement: boolean;
+  onIncrement: () => void;
+  onDecrement: () => void;
+  children: React.ReactNode;
+}
+
+export const SortableItem = ({ canIncrement, canDecrement, onIncrement, onDecrement, children }: SortableItemProps) => {
+  return (
+    <li className="grid grid-cols-[min-content_1fr] items-center rounded-lg shadow-md gap-x-2 p-2">
+      <ArrowButton active={canIncrement} onClick={onIncrement}>
+        <ArrowUpIcon width={28} />
+      </ArrowButton>
+      <span style={{ gridRow: "span 2" }}>{children}</span>
+
+      <ArrowButton active={canDecrement} onClick={onDecrement}>
+        <ArrowDownIcon width={28} />
+      </ArrowButton>
+    </li>
+  );
+};
+
+interface ArrowButtonProps {
+  active: boolean;
+  onClick: () => void;
+  children: React.ReactNode;
+}
+
+const ArrowButton = ({ children, active, onClick }: ArrowButtonProps) => {
+  return (
+    <Button
+      className={clsx("justify-center", active ? "hover:bg-indigo-200" : "opacity-10")}
+      onClick={onClick}
+      disabled={!active}
+    >
+      {children}
+    </Button>
+  );
+};