Emojy reactions

src/pages/user-page.tsx

@@ -17,17 +17,31 @@ import {
   Badge,
   Flex,
   useColorMode,
+  IconButton,
+  Tooltip,
+  HStack,
 } from '@chakra-ui/react'
 import { UserCard } from '../components/user-card'
 import { StudentListView } from './style'
 import { useSetBreadcrumbs } from '../components'
 
+// Reaction emojis with their string values
+const REACTIONS = [
+  { emoji: '👍', value: 'thumbs_up' },
+  { emoji: '❤️', value: 'heart' },
+  { emoji: '😂', value: 'laugh' },
+  { emoji: '😮', value: 'wow' },
+  { emoji: '👏', value: 'clap' },
+]
+
 const UserPage = () => {
   const { lessonId, accessId } = useParams()
   const { t } = useTranslation()
   const { colorMode } = useColorMode()
   const acc = api.useGetAccessQuery({ accessCode: accessId })
   const [animatedStudents, setAnimatedStudents] = useState([])
+  const [sendReaction] = api.useSendReactionMutation()
+  const [activeReaction, setActiveReaction] = useState(null)
 
   const ls = api.useLessonByIdQuery(lessonId, {
     pollingInterval: 1000,
@@ -85,6 +99,19 @@ const UserPage = () => {
     }
   }, [animatedStudents])
 
+  // Обработчик отправки реакции
+  const handleReaction = (reaction) => {
+    if (lessonId) {
+      sendReaction({ lessonId, reaction })
+      setActiveReaction(reaction)
+      
+      // Сбрасываем активную реакцию через 1 секунду
+      setTimeout(() => {
+        setActiveReaction(null)
+      }, 1000)
+    }
+  }
+
   if (acc.isLoading) {
     return (
       <Container maxW="container.xl">
@@ -168,6 +195,49 @@ const UserPage = () => {
         </Box>
       </motion.div>
 
+      {/* Реакции на занятие */}
+      <motion.div
+        initial={{ opacity: 0, y: 20 }}
+        animate={{ opacity: 1, y: 0 }}
+        transition={{ duration: 0.4, delay: 0.3 }}
+      >
+        <Box 
+          mb={6} 
+          p={5} 
+          borderRadius="xl" 
+          bg={colorMode === "light" ? "gray.50" : "gray.700"}
+          boxShadow="md"
+        >
+          <Text mb={3} fontWeight="medium">{t('journal.pl.lesson.reactions')}</Text>
+          
+          <HStack spacing={3} justify="center">
+            {REACTIONS.map((reaction) => (
+              <Tooltip key={reaction.value} label={t(`journal.pl.reactions.${reaction.value}`)} placement="top">
+                <IconButton
+                  aria-label={t(`journal.pl.reactions.${reaction.value}`)}
+                  icon={<Text fontSize="24px">{reaction.emoji}</Text>}
+                  size="lg"
+                  variant={activeReaction === reaction.value ? "solid" : "outline"}
+                  colorScheme={activeReaction === reaction.value ? "blue" : "gray"}
+                  onClick={() => handleReaction(reaction.value)}
+                  transition="all 0.2s"
+                  _hover={{ transform: "scale(1.1)" }}
+                  sx={{
+                    animation: activeReaction === reaction.value 
+                      ? "pulse 0.5s ease-in-out" : "none",
+                    "@keyframes pulse": {
+                      "0%": { transform: "scale(1)" },
+                      "50%": { transform: "scale(1.2)" },
+                      "100%": { transform: "scale(1)" }
+                    }
+                  }}
+                />
+              </Tooltip>
+            ))}
+          </HStack>
+        </Box>
+      </motion.div>
+
       <motion.div
         initial={{ opacity: 0 }}
         animate={{ opacity: 1 }}
@@ -207,6 +277,7 @@ const UserPage = () => {
                     student={student}
                     present={true}
                     recentlyPresent={student.isNew}
+                    reactions={ls.data?.body?.reactions?.filter(r => r.sub === student.sub) || []}
                   />
                 </motion.li>
               ))}