Change the claim list page layout

AletheiaFact · Jun 7, 2024 · 2deddd8 · 2deddd8
1 parent a09f950
commit 2deddd8
Show file tree

Hide file tree

Showing 5 changed files with 24 additions and 19 deletions.
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/src/components/Claim/ClaimList.tsx b/src/components/Claim/ClaimList.tsx
@@ -9,7 +9,7 @@ import { currentNameSpace } from "../../atoms/namespace";
 import { useAtom } from "jotai";
 import ClaimListEmptyFallBack from "./ClaimListEmptyFallBack";
 
-const ClaimList = ({ personality }) => {
+const ClaimList = ({ personality, columns = 2 }) => {
     const { i18n, t } = useTranslation();
     const [nameSpace] = useAtom(currentNameSpace);
 
@@ -23,10 +23,10 @@ const ClaimList = ({ personality }) => {
             grid={{
                 gutter: 20,
                 // sizes not declared will show 1 column (xs and sm)
-                md: 2,
-                lg: 2,
-                xl: 2,
-                xxl: 2,
+                md: columns,
+                lg: columns,
+                xl: columns,
+                xxl: columns,
             }}
             emptyFallback={<ClaimListEmptyFallBack personality={personality} />}
             renderItem={(claim) =>

diff --git a/src/components/Claim/ClaimListView.tsx b/src/components/Claim/ClaimListView.tsx
@@ -1,25 +1,17 @@
 import { Row, Col } from "antd";
-import { useTranslation } from "next-i18next";
 import React from "react";
-import Seo from "../Seo";
 import ClaimList from "./ClaimList";
 import SourceList from "../Source/SourceList";
 
 const ClaimListView = () => {
-    const { t } = useTranslation();
-
     return (
         <>
-            <Seo
-                title={t("seo:claimListTitle")}
-                description={t("seo:claimListDescription")}
-            />
             <Row justify="center" style={{ marginTop: "64px" }}>
                 <Col sm={22} md={14} lg={12}>
-                    <ClaimList personality={{ _id: null }} />
+                    <SourceList />
                 </Col>
                 <Col offset={1} sm={22} md={14} lg={8}>
-                    <SourceList />
+                    <ClaimList columns={1} personality={{ _id: null }} />
                 </Col>
             </Row>
         </>

diff --git a/src/components/Source/SourceList.tsx b/src/components/Source/SourceList.tsx
@@ -50,8 +50,8 @@ const SourceList = ({ footer = false }) => {
             grid={{
                 gutter: 20,
                 md: 2,
-                lg: 1,
-                xl: 1,
+                lg: 2,
+                xl: 2,
                 xxl: 2,
             }}
             skeleton={<SourceSkeleton />}

diff --git a/src/pages/claim-list-page.tsx b/src/pages/claim-list-page.tsx
@@ -2,16 +2,29 @@ import { NextPage } from "next";
 import { serverSideTranslations } from "next-i18next/serverSideTranslations";
 import React from "react";
 import { GetLocale } from "../utils/GetLocale";
-
+import Seo from "../components/Seo";
 import ClaimListView from "../components/Claim/ClaimListView";
 import { NameSpaceEnum } from "../types/Namespace";
 import { useSetAtom } from "jotai";
 import { currentNameSpace } from "../atoms/namespace";
+import { useTranslation } from "react-i18next";
+import AffixButton from "../components/AffixButton/AffixButton";
 
 const ImageClaimsPage: NextPage<any> = (props) => {
+    const { t } = useTranslation();
     const setCurrentNameSpace = useSetAtom(currentNameSpace);
     setCurrentNameSpace(props.nameSpace);
-    return <ClaimListView />;
+
+    return (
+        <>
+            <Seo
+                title={t("seo:claimListTitle")}
+                description={t("seo:claimListDescription")}
+            />
+            <ClaimListView />
+            <AffixButton />
+        </>
+    );
 };
 
 export async function getServerSideProps({ query, locale, locales, req }) {