✨(demo) add a footer

Add a footer to display some useful links

README.md

@@ -23,7 +23,7 @@
 <div align="center">
 
 [![CircleCI](https://circleci.com/gh/openfun/cunningham/tree/main.svg?style=svg)](https://circleci.com/gh/openfun/cunningham/tree/main)
-[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/3qjUJjp)
+[![Discord](https://img.shields.io/discord/1082704478463082496?style=flat&logo=discord&label=discord&labelColor=5b61f1&logoColor=white&color=313338)](https://discord.gg/TXPSCMeDzd)
 
 </div>
 

apps/demo/src/Home.tsx

@@ -54,8 +54,8 @@ export const Home = ({ modal }: { modal: PageProps }) => {
   }, [pagination.page, sortModel, modal.isOpen, refresh]);
 
   return (
-    <div className="page__home">
+    <main className="page__home">
-      <div className="page__home__title">
+      <header className="page__home__title">
         <h1 className="clr-greyscale-900">
           {/* eslint-disable-next-line react/no-unescaped-entities */}
           🍿Cunningham's <span className="clr-primary-400">Cast</span>
@@ -76,82 +76,145 @@ export const Home = ({ modal }: { modal: PageProps }) => {
         >
           Add character
         </Button>
-      </div>
+      </header>
-      <div className="card">
+      <section>
-        <DataGrid
+        <div className="card">
-          columns={[
+          <DataGrid
-            {
+            columns={[
-              field: "name",
+              {
-              headerName: "Name",
+                field: "name",
-            },
+                headerName: "Name",
-            {
-              id: "sex",
-              headerName: "Sex",
-              renderCell: (params) => {
-                return (
-                  <span className="material-icons">{params.row.sex}</span>
-                );
               },
-            },
+              {
-            {
+                id: "sex",
-              id: "birthDate",
+                headerName: "Sex",
-              headerName: "Birth Date",
+                renderCell: (params) => {
-              renderCell: (params) => {
+                  return (
-                return params.row.birthDate.toLocaleDateString();
+                    <span className="material-icons">{params.row.sex}</span>
+                  );
+                },
               },
-            },
+              {
-            {
+                id: "birthDate",
-              id: "firstAppearanceDate",
+                headerName: "Birth Date",
-              headerName: "First Appearance",
+                renderCell: (params) => {
-              renderCell: (params) => {
+                  return params.row.birthDate.toLocaleDateString();
-                return params.row.firstAppearanceDate.toLocaleDateString();
+                },
               },
-            },
+              {
-            {
+                id: "firstAppearanceDate",
-              id: "isGuest",
+                headerName: "First Appearance",
-              headerName: "Is Guest",
+                renderCell: (params) => {
-              renderCell: (params) => {
+                  return params.row.firstAppearanceDate.toLocaleDateString();
-                return params.row.isGuest ? (
+                },
-                  <span className="material-icons ml-s">check_box</span>
-                ) : (
-                  <span className="material-icons ml-s">
-                    check_box_outline_blank
-                  </span>
-                );
               },
-            },
+              {
-            {
+                id: "isGuest",
-              id: "actions",
+                headerName: "Is Guest",
-              renderCell: (params) => (
+                renderCell: (params) => {
-                <Button
+                  return params.row.isGuest ? (
-                  color="tertiary-text"
+                    <span className="material-icons ml-s">check_box</span>
-                  size="small"
+                  ) : (
-                  onClick={() => {
+                    <span className="material-icons ml-s">
-                    const index = database.findIndex(
+                      check_box_outline_blank
-                      (character) => character.id === params.row.id,
+                    </span>
-                    );
+                  );
-                    database.splice(index, 1);
+                },
-                    setRefresh(refresh + 1);
+              },
-                    toast(
+              {
-                      "Character deleted successfully",
+                id: "actions",
-                      VariantType.WARNING,
+                renderCell: (params) => (
-                    );
+                  <Button
-                  }}
+                    color="tertiary-text"
-                  icon={<span className="material-icons">delete</span>}
+                    size="small"
-                />
+                    onClick={() => {
-              ),
+                      const index = database.findIndex(
-            },
+                        (character) => character.id === params.row.id,
-          ]}
+                      );
-          rows={rows}
+                      database.splice(index, 1);
-          pagination={pagination}
+                      setRefresh(refresh + 1);
-          sortModel={sortModel}
+                      toast(
-          onSortModelChange={setSortModel}
+                        "Character deleted successfully",
-          isLoading={isLoading}
+                        VariantType.WARNING,
-          enableRowSelection={true}
+                      );
-          rowSelection={rowSelection}
+                    }}
-          onRowSelectionChange={setRowSelection}
+                    icon={<span className="material-icons">delete</span>}
-        />
+                  />
-      </div>
+                ),
-    </div>
+              },
+            ]}
+            rows={rows}
+            pagination={pagination}
+            sortModel={sortModel}
+            onSortModelChange={setSortModel}
+            isLoading={isLoading}
+            enableRowSelection={true}
+            rowSelection={rowSelection}
+            onRowSelectionChange={setRowSelection}
+          />
+        </div>
+      </section>
+      <footer className="links">
+        <ul>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.france-universite-numerique.fr/en/"
+            >
+              France Université Numérique
+            </Button>
+          </li>
+        </ul>
+        <ul>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://discord.gg/TXPSCMeDzd"
+            >
+              Discord
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://github.com/openfun/cunningham"
+            >
+              Github
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://openfun.github.io/cunningham/storybook"
+            >
+              Documentation
+            </Button>
+          </li>
+          <li>
+            <Button
+              size="small"
+              color="tertiary-text"
+              target="_blank"
+              rel="noopener noreferrer"
+              href="https://www.figma.com/file/JbPT1R6YUFW4oH8jHvH960/DS-Cunningham---PUBLIC?type=design"
+            >
+              UI Kit
+            </Button>
+          </li>
+        </ul>
+      </footer>
+    </main>
   );
 };

apps/demo/src/index.scss

@@ -23,10 +23,15 @@ a {
 
 // App
 html {
-  min-height: 100vh;
   background: linear-gradient(153deg, var(--c--theme--colors--greyscale-100) 0%, var(--c--theme--colors--greyscale-000) 100%);
 }
 
+html, body, #root {
+  width: 100%;
+  height: 100%;
+  margin: 0;
+}
+
 .pattern {
   position: absolute;
   z-index: -1;
@@ -65,6 +70,7 @@ html {
 .container {
   margin: auto;
   position: relative;
+  height: 100%;
 
   width: 1100px;
   @media (max-width: 1200px) {
@@ -75,6 +81,10 @@ html {
 
 // Home
 .page__home {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+
   &__title {
     gap: 1.5rem;
     margin: 4rem 0;
@@ -86,6 +96,10 @@ html {
       margin-top: 1.5rem;
     }
   }
+
+  section {
+    flex: 1;
+  }
 }
 
 html[data-theme="redflux"] {
@@ -150,3 +164,21 @@ html[data-theme="blueney"] {
     justify-content: center;
   }
 }
+
+// links
+.links {
+  border-top: thin solid var(--c--theme--colors--greyscale-300);
+  display: flex;
+  justify-content: space-between;
+  gap: 0.5rem;
+
+  ul {
+    text-align: right;
+    padding: 0;
+  }
+  ul li {
+    display: inline-block;
+    padding: 0 0.5rem;
+    white-space: nowrap;
+  }
+}