Function Check

src/components/Sidebar.tsx:286–310

({ content }: { content: any })

}

function Check({ content }: { content: any }) {
  const [completed, setCompleted] = useState(
    content?.videoProgress?.markAsCompleted || false,
  );

  const handleCheck = useCallback(
    async (e: React.MouseEvent<HTMLInputElement>) => {
      e.stopPropagation();
      const newState = !completed;
      setCompleted(newState);
      await handleMarkAsCompleted(newState, content.id);
    },
    [completed, content.id],
  );

  return (
    <input
      checked={completed}
      onChange={() => {}} // Controlled component
      onClick={handleCheck}
      type="checkbox"
      className="focus:ring-none h-4 w-4 rounded-md border-primary/10"
    />
  );
}