Flatten

packages/leafcutter-common/components/Trends.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { FC } from "react";
+import { Grid, Box } from "@mui/material";
+import { useTranslate } from "react-polyglot";
+import { PageHeader } from "./PageHeader";
+import { VisualizationCard } from "./VisualizationCard";
+import { useAppContext } from "../../../apps/leafcutter/app/_components/AppProvider";
+
+type TrendsProps = {
+  visualizations: any;
+};
+
+export const Trends: FC<TrendsProps> = ({ visualizations }) => {
+  const t = useTranslate();
+  const {
+    colors: { cdrLinkOrange },
+    typography: { h1, h4, p },
+  } = useAppContext();
+
+  return (
+    <>
+      <PageHeader backgroundColor={cdrLinkOrange}>
+        <Grid
+          container
+          direction="row"
+          spacing={2}
+          justifyContent="space-between"
+          alignItems="center"
+        >
+          {/*      <Grid item xs={3} sx={{ textAlign: "center" }}>
+            <Image src={SearchCreateHeader} width={200} height={200} alt="" />
+          </Grid> */}
+          <Grid item container direction="column" xs={12}>
+            <Grid item>
+              <Box component="h1" sx={{ ...h1 }}>
+                {t("trendsTitle")}
+              </Box>
+            </Grid>
+            <Grid item>
+              <Box component="h4" sx={{ ...h4, mt: 1, mb: 1 }}>
+                {t("trendsSubtitle")}
+              </Box>
+            </Grid>
+            <Grid>
+              <Box component="p" sx={{ ...p }}>
+                {t("trendsDescription")}
+              </Box>
+            </Grid>
+          </Grid>
+        </Grid>
+      </PageHeader>
+      <Grid
+        container
+        direction="row"
+        wrap="wrap"
+        spacing={3}
+        justifyContent="space-between"
+      >
+        {visualizations.map((visualization: any, index: number) => (
+          <VisualizationCard
+            key={index}
+            id={visualization.id}
+            title={visualization.title}
+            description={visualization.description}
+            url={visualization.url}
+          />
+        ))}
+      </Grid>
+    </>
+  );
+};