feat(web): add latest cases to court page

web/src/components/LatestCases.tsx

@@ -0,0 +1,40 @@
+import React, { useMemo } from "react";
+import styled from "styled-components";
+import { Dispute_Filter } from "../graphql/graphql";
+import { DisputeDetailsFragment, useCasesQuery } from "queries/useCasesQuery";
+import DisputeCard from "components/DisputeCard";
+import { StyledSkeleton } from "components/StyledSkeleton";
+import { isUndefined } from "utils/index";
+
+const Container = styled.div`
+  margin-top: calc(64px + (80 - 64) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const Title = styled.h1`
+  margin-bottom: calc(16px + (48 - 16) * (min(max(100vw, 375px), 1250px) - 375px) / 875);
+`;
+
+const DisputeContainer = styled.div`
+  display: flex;
+  gap: 24px;
+  flex-wrap: wrap;
+  justify-content: center;
+`;
+
+const LatestCases: React.FC<{ filters?: Dispute_Filter }> = ({ filters }) => {
+  const { data } = useCasesQuery(0, 3, filters);
+  const disputes: DisputeDetailsFragment[] = useMemo(() => data?.disputes as DisputeDetailsFragment[], [data]);
+
+  return isUndefined(disputes) || disputes.length > 0 ? (
+    <Container>
+      <Title>Latest Cases</Title>
+      <DisputeContainer>
+        {isUndefined(disputes)
+          ? Array.from({ length: 3 }).map((_, index) => <StyledSkeleton key={index} width={312} height={260} />)
+          : disputes.map((dispute) => <DisputeCard key={dispute.id} {...dispute} overrideIsList />)}
+      </DisputeContainer>
+    </Container>
+  ) : null;
+};
+
+export default LatestCases;

web/src/pages/Courts/CourtDetails/index.tsx

@@ -11,6 +11,7 @@ import { usePNKFaucetAddress } from "hooks/useContractAddress";
 import { wrapWithToast } from "utils/wrapWithToast";
 import { isUndefined } from "utils/index";
 import { StyledSkeleton } from "components/StyledSkeleton";
+import LatestCases from "components/LatestCases";
 import Stats from "./Stats";
 import Description from "./Description";
 import StakePanel from "./StakePanel";
@@ -115,6 +116,7 @@ const CourtDetails: React.FC = () => {
       <StyledCard>
         <Description />
       </StyledCard>
+      <LatestCases filters={{ court: id }} />
     </Container>
   );
 };

web/src/pages/Home/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import styled from "styled-components";
+import LatestCases from "components/LatestCases";
 import CourtOverview from "./CourtOverview";
-import LatestCases from "./LatestCases";
 import Community from "./Community";
 import HeroImage from "./HeroImage";
 import { HomePageProvider } from "hooks/useHomePageContext";