students list layout

src/pages/lesson-details.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState, useRef, useMemo } from 'react'
 import { useParams, Link } from 'react-router-dom'
 import dayjs from 'dayjs'
 import QRCode from 'qrcode'
+import { sha256 } from 'js-sha256'
 import { getConfigValue, getNavigationsValue } from '@ijl/cli'
 import {
   Box,
@@ -21,10 +22,20 @@ import {
   AddMissedButton,
   UnorderList,
   BreadcrumbsWrapper,
+  Avatar,
 } from './style'
 import { api } from '../__data__/api/api'
 import { User } from '../__data__/model'
 
+export function getGravatarURL(email, user) {
+  if (!email) return void 0
+  const address = String(email).trim().toLowerCase()
+  const hash = sha256(address)
+
+  // Grab the actual image URL
+  return `https://www.gravatar.com/avatar/${hash}?d=robohash`
+}
+
 const LessonDetail = () => {
   const { lessonId, courseId } = useParams()
   const canvRef = useRef(null)
@@ -83,7 +94,7 @@ const LessonDetail = () => {
       }
     }
 
-    return allStudents
+    return allStudents.sort((a, b) => (a.present ? -1 : 1))
   }, [accessCode?.body, AllStudents.data])
 
   return (
@@ -110,7 +121,7 @@ const LessonDetail = () => {
           </BreadcrumbItem>
         </Breadcrumb>
       </BreadcrumbsWrapper>
-      <Container maxW="container.xl" centerContent px="200">
+      <Container maxW="2280px">
         <VStack align="left">
           <Heading as="h3" mt="4" mb="3">
             Тема занятия:
@@ -125,7 +136,7 @@ const LessonDetail = () => {
             человек
           </Box>
         </VStack>
-        <HStack spacing="8">
+        <HStack spacing="8" sx={{ flexDirection: { sm: 'column', md: 'row' }}} >
           <a href={userUrl}>
             <QRCanvas ref={canvRef} />
           </a>
@@ -133,7 +144,12 @@ const LessonDetail = () => {
             {studentsArr.map((student) => (
               <LessonItem key={student.sub} warn={!student.present}>
                 <Lessonname>
-                  {student.name || student.preferred_username}{' '}
+                  <Avatar
+                    src={student.picture || getGravatarURL(student.email, null)}
+                  />
+                  <p style={{ marginTop: 6 }}>
+                    {student.name || student.preferred_username}{' '}
+                  </p>
                   {!student.present && (
                     <AddMissedButton
                       onClick={() => manualAdd({ lessonId, user: student })}