盖茨比的同位素过滤器

如何解决盖茨比的同位素过滤器

我一直在使用Gatsby开发我的投资组合。我有一个页面展示所有作品。我现在要有三个按钮，分别是“全部”，“设计”，“游戏”。单击这些按钮将过滤出适当的项目。 我以前使用同位素和jquery来构建这种功能，但是我无法弄清楚如何在Gatsby中实现它。

我的jquery和HTML的示例：

import pandas as pd
import numpy as np
df['Area']=np.where(df['Stage']=='X','P',df['Area'])

//Filtering the projects
  let btns = $(".project-area .button-group button");

  btns.click(function (e) {
    $(".project-area .button-group button").removeClass("active");
    e.target.classList.add("active");

    let selector = $(e.target).attr("data-filter");
    $(".project-area .grid").isotope({ filter: selector });
    return false;
  });

  $(".project-area .button-group #btn1").trigger("click");

关于如何在Gatsby中复制此内容或是否还有其他方法可以提出建议？