From ef99e9b2a098b2ec514cefce97cfad2b395cf83e Mon Sep 17 00:00:00 2001
From: francesco <francesco@camberi.com>
Date: Tue, 3 Aug 2021 11:55:09 +0200
Subject: [PATCH] Updated home page cards

---
 .../custom_schema_view/BlogEntryPreview.tsx   | 60 +++++++++++++++++++
 src/core/internal/HomeRoute.tsx               | 54 ++++++++---------
 2 files changed, 87 insertions(+), 27 deletions(-)
 create mode 100644 example/src/SampleApp/custom_schema_view/BlogEntryPreview.tsx

diff --git a/example/src/SampleApp/custom_schema_view/BlogEntryPreview.tsx b/example/src/SampleApp/custom_schema_view/BlogEntryPreview.tsx
new file mode 100644
index 0000000..2f5724a
--- /dev/null
+++ b/example/src/SampleApp/custom_schema_view/BlogEntryPreview.tsx
@@ -0,0 +1,60 @@
+import React from "react";
+import { Box, Button } from "@material-ui/core";
+import { Entity, EntityValues, useSnackbarController } from "@camberi/firecms";
+import { blogSchema } from "../schemas/blog_schema";
+
+export function SampleProductsView({ entity, modifiedValues }: {
+    entity?: Entity<typeof blogSchema>;
+    modifiedValues?: EntityValues<typeof blogSchema>;
+}) {
+
+    const snackbarContext = useSnackbarController();
+
+    const onClick = (event: React.MouseEvent) => {
+        snackbarContext.open({
+            type: "success",
+            message: `Custom action for ${modifiedValues?.name}`
+        });
+    };
+
+    return (
+        <Box
+            display="flex"
+            width={"100%"}
+            height={"100%"}>
+
+            <Box m="auto"
+                 display="flex"
+                 flexDirection={"column"}
+                 alignItems={"center"}
+                 justifyItems={"center"}>
+
+                <Box p={2}>
+                    <p>
+                        This is an example of a custom view added
+                        as a panel to an entity schema.
+                    </p>
+                    <p>
+                        Values in the form:
+                    </p>
+                    <p style={{
+                        color: "#fff",
+                        padding: "8px",
+                        fontSize: ".85em",
+                        fontFamily: "monospace",
+                        borderRadius: "4px",
+                        backgroundColor: "#4e482f"
+                    }}>
+                        {modifiedValues && JSON.stringify(modifiedValues, null, 2)}
+                    </p>
+                </Box>
+
+                <Button onClick={onClick} color="primary">
+                    Your action
+                </Button>
+
+            </Box>
+        </Box>
+    );
+
+}
diff --git a/src/core/internal/HomeRoute.tsx b/src/core/internal/HomeRoute.tsx
index 4951b0b..81b4da9 100644
--- a/src/core/internal/HomeRoute.tsx
+++ b/src/core/internal/HomeRoute.tsx
@@ -82,38 +82,38 @@ function HomeRoute({
         return (
             <Grid item xs={12} sm={6} md={4}
                   key={`nav_${entry.group}_${entry.name}`}>
-                <Card elevation={0}
-                      className={classes.card}>
-
-                    <CardContent
-                        className={classes.flexGrow}>
-
-                        <PlaylistPlayIcon color={"disabled"}/>
-                        <Typography gutterBottom variant="h5"
-                                    component="h2">
-                            {entry.name}
-                        </Typography>
-
-                        {entry.description && <Typography variant="body2"
-                                                          color="textSecondary"
-                                                          component="div">
-                            <ReactMarkdown>{entry.description}</ReactMarkdown>
-                        </Typography>}
-                    </CardContent>
+                <Card elevation={0}>
 
                     <CardActionArea
-                        style={{
-                            display: "flex",
-                            backgroundColor: "rgb(0 0 0 / 2%)",
-                            flexDirection: "column",
-                            alignItems: "flex-end"
-                        }}
+                        className={classes.card}
                         component={ReactLink}
                         to={entry.url}>
+                        <CardContent
+                            className={classes.flexGrow}>
+
+                            <PlaylistPlayIcon color={"disabled"}/>
+                            <Typography gutterBottom variant="h5"
+                                        component="h2">
+                                {entry.name}
+                            </Typography>
+
+                            {entry.description && <Typography variant="body2"
+                                                              color="textSecondary"
+                                                              component="div">
+                                <ReactMarkdown
+                                    components={{
+                                        a: (props) => <a {...props}
+                                                         onClick={(e) => e.stopPropagation()}
+                                                         target="_blank">{props.children}</a>
+                                    }}
+                                >{entry.description}</ReactMarkdown>
+                            </Typography>}
+                        </CardContent>
+
                         <CardActions style={{ alignSelf: "flex-end" }}>
-                            <IconButton color="primary">
-                                <ArrowForwardIcon/>
-                            </IconButton>
+                            <Box p={1} >
+                                <ArrowForwardIcon color="primary" />
+                            </Box>
                         </CardActions>
 
                     </CardActionArea>