feat(#vil-471): sidebar droite

src/components/Base.tsx

@@ -34,15 +34,17 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
           {children}
         </Box>
         {rightNav && (
-          <Grid item xs={12} sm={4} lg={3} xl={2}>
-            <aside
-              style={{
-                marginLeft: '20px',
-                marginBottom: '20px',
-              }}
-            >
-              {rightNav}
-            </aside>
+          <Grid
+            item
+            xs={12}
+            md={4}
+            lg={3}
+            xl={2}
+            sx={{
+              marginTop: '20px',
+            }}
+          >
+            {rightNav}
           </Grid>
         )}
       </Grid>
@@ -94,15 +96,16 @@ export const Base = ({ children, rightNav, hideLeftNav = false, showSubHeader =
         </Grid>
 
         {rightNav && (
-          <Grid item md={4} lg={3} xl={2}>
-            <aside
-              style={{
-                marginLeft: '20px',
-                marginBottom: '20px',
-              }}
-            >
-              {rightNav}
-            </aside>
+          <Grid
+            item
+            md={4}
+            lg={3}
+            xl={2}
+            sx={{
+              paddingLeft: '20px',
+            }}
+          >
+            {rightNav}
           </Grid>
         )}
       </Grid>

src/components/accueil/LastActivities.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import { Button } from '@mui/material';
+
+import { CommentIcon } from '../activities/ActivityCard/CommentIcon';
+import { icons, DESC } from 'src/components/activities/utils';
+import { useActivities } from 'src/services/useActivities';
+import { primaryColor } from 'src/styles/variables.const';
+import { toDate } from 'src/utils';
+import { ActivityType } from 'types/activity.type';
+import type { User } from 'types/user.type';
+
+interface Props {
+  title: string;
+  activityUser: User;
+}
+
+export const LastActivities: React.FC<Props> = ({ title, activityUser }) => {
+  const { activities } = useActivities({
+    limit: 200,
+    page: 0,
+    type: [],
+    userId: activityUser?.id ?? 0,
+  });
+
+  return (
+    <div
+      className="bg-secondary vertical-bottom-margin"
+      style={{ padding: '1rem', borderRadius: '10px', display: 'flex', justifyContent: 'center', flexDirection: 'column' }}
+    >
+      <h3>
+        <b>{title}</b>
+      </h3>
+      {activities.slice(0, 3).map((activity, index) => {
+        const ActivityIcon = icons[activity.type] || null;
+        return (
+          <div key={index}>
+            {activity.type !== ActivityType.GAME && (
+              <>
+                <div style={{ fontSize: 'smaller', paddingBottom: '1rem' }}>
+                  <strong>{DESC[activity.type]},&nbsp;</strong>
+                  le {toDate(activity.createDate as string)}
+                  {ActivityIcon && (
+                    <ActivityIcon
+                      style={{
+                        float: 'right',
+                        fill: primaryColor,
+                        margin: '1.5rem 0.65rem 0 0',
+                        width: '2rem',
+                        height: 'auto',
+                        alignSelf: 'center',
+                      }}
+                    />
+                  )}
+                </div>
+                <div style={{ paddingBottom: '1rem' }}>
+                  <CommentIcon count={activity.commentCount} activityId={activity.id} />
+                  <Button component="a" color="primary" variant="outlined" href={`/activite/${activity.id}`}>
+                    {"Voir l'activité"}
+                  </Button>
+                </div>
+              </>
+            )}
+          </div>
+        );
+      })}
+    </div>
+  );
+};