fix add student
This commit is contained in:
parent
f6edca8c75
commit
688337f778
@ -159,7 +159,6 @@ export const StudentCard: React.FC<StudentCardProps> = ({
|
|||||||
student={student}
|
student={student}
|
||||||
present={student.present}
|
present={student.present}
|
||||||
recentlyPresent={student.recentlyPresent}
|
recentlyPresent={student.recentlyPresent}
|
||||||
onAddUser={onAddUser}
|
|
||||||
reaction={reaction}
|
reaction={reaction}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
@ -168,7 +167,7 @@ export const StudentCard: React.FC<StudentCardProps> = ({
|
|||||||
</Box>
|
</Box>
|
||||||
|
|
||||||
{/* Back side */}
|
{/* Back side */}
|
||||||
<StudentCardBack student={student} />
|
<StudentCardBack onAddUser={onAddUser} student={student} />
|
||||||
</Box>
|
</Box>
|
||||||
</motion.li>
|
</motion.li>
|
||||||
)
|
)
|
||||||
|
@ -2,12 +2,15 @@ import React from 'react'
|
|||||||
import { Box, Flex, useColorMode } from '@chakra-ui/react'
|
import { Box, Flex, useColorMode } from '@chakra-ui/react'
|
||||||
import { useTranslation } from 'react-i18next'
|
import { useTranslation } from 'react-i18next'
|
||||||
import { User } from '../../__data__/model'
|
import { User } from '../../__data__/model'
|
||||||
|
import { AddMissedButton } from './sstyle'
|
||||||
|
import { AddIcon } from '@chakra-ui/icons'
|
||||||
|
|
||||||
interface StudentCardBackProps {
|
interface StudentCardBackProps {
|
||||||
student: User & { present?: boolean; recentlyPresent?: boolean }
|
student: User & { present?: boolean; recentlyPresent?: boolean }
|
||||||
|
onAddUser?: (user: User) => void
|
||||||
}
|
}
|
||||||
|
|
||||||
export const StudentCardBack: React.FC<StudentCardBackProps> = ({ student }) => {
|
export const StudentCardBack: React.FC<StudentCardBackProps> = ({ student, onAddUser }) => {
|
||||||
const { colorMode } = useColorMode()
|
const { colorMode } = useColorMode()
|
||||||
const { t } = useTranslation()
|
const { t } = useTranslation()
|
||||||
|
|
||||||
@ -165,6 +168,9 @@ export const StudentCardBack: React.FC<StudentCardBackProps> = ({ student }) =>
|
|||||||
aspectRatio: "1"
|
aspectRatio: "1"
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
|
||||||
|
<AddIcon boxSize={3} />
|
||||||
|
</AddMissedButton>
|
||||||
<Box
|
<Box
|
||||||
position="absolute"
|
position="absolute"
|
||||||
top="0"
|
top="0"
|
||||||
|
29
src/components/lesson/sstyle.ts
Normal file
29
src/components/lesson/sstyle.ts
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import styled from '@emotion/styled'
|
||||||
|
|
||||||
|
export const AddMissedButton = styled.button`
|
||||||
|
position: absolute;
|
||||||
|
bottom: 8px;
|
||||||
|
right: 8px;
|
||||||
|
border: none;
|
||||||
|
background-color: var(--chakra-colors-blue-500);
|
||||||
|
color: white;
|
||||||
|
width: 26px;
|
||||||
|
height: 26px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
z-index: 2;
|
||||||
|
opacity: 0.8;
|
||||||
|
transition: opacity 0.3s ease, transform 0.3s ease;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
opacity: 1;
|
||||||
|
transform: scale(1.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.chakra-ui-dark & {
|
||||||
|
background-color: var(--chakra-colors-blue-400);
|
||||||
|
}
|
||||||
|
`
|
@ -113,31 +113,3 @@ export const Wrapper = styled.div<{ warn?: boolean; width?: string | number; pos
|
|||||||
`
|
`
|
||||||
: ''}
|
: ''}
|
||||||
`
|
`
|
||||||
|
|
||||||
export const AddMissedButton = styled.button`
|
|
||||||
position: absolute;
|
|
||||||
bottom: 8px;
|
|
||||||
right: 8px;
|
|
||||||
border: none;
|
|
||||||
background-color: var(--chakra-colors-blue-500);
|
|
||||||
color: white;
|
|
||||||
width: 26px;
|
|
||||||
height: 26px;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 2;
|
|
||||||
opacity: 0.8;
|
|
||||||
transition: opacity 0.3s ease, transform 0.3s ease;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
cursor: pointer;
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.chakra-ui-dark & {
|
|
||||||
background-color: var(--chakra-colors-blue-400);
|
|
||||||
}
|
|
||||||
`
|
|
@ -8,7 +8,7 @@ import { useTranslation } from 'react-i18next'
|
|||||||
|
|
||||||
import { Reaction, User } from '../../__data__/model'
|
import { Reaction, User } from '../../__data__/model'
|
||||||
|
|
||||||
import { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'
|
import { Avatar, Wrapper, NameOverlay } from './style'
|
||||||
|
|
||||||
// Map of reaction types to emojis
|
// Map of reaction types to emojis
|
||||||
const REACTION_EMOJIS = {
|
const REACTION_EMOJIS = {
|
||||||
@ -30,7 +30,6 @@ export function getGravatarURL(email) {
|
|||||||
export const UserCard = ({
|
export const UserCard = ({
|
||||||
student,
|
student,
|
||||||
present,
|
present,
|
||||||
onAddUser = undefined,
|
|
||||||
wrapperAS = 'div',
|
wrapperAS = 'div',
|
||||||
width,
|
width,
|
||||||
recentlyPresent = false,
|
recentlyPresent = false,
|
||||||
@ -39,7 +38,6 @@ export const UserCard = ({
|
|||||||
student: User
|
student: User
|
||||||
present: boolean
|
present: boolean
|
||||||
width?: string | number
|
width?: string | number
|
||||||
onAddUser?: (user: User) => void
|
|
||||||
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
|
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
|
||||||
recentlyPresent?: boolean
|
recentlyPresent?: boolean
|
||||||
reaction?: Reaction
|
reaction?: Reaction
|
||||||
@ -100,11 +98,6 @@ export const UserCard = ({
|
|||||||
</Box>
|
</Box>
|
||||||
)}
|
)}
|
||||||
</NameOverlay>
|
</NameOverlay>
|
||||||
{onAddUser && !present && (
|
|
||||||
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
|
|
||||||
<AddIcon boxSize={3} />
|
|
||||||
</AddMissedButton>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Анимация реакции */}
|
{/* Анимация реакции */}
|
||||||
<AnimatePresence>
|
<AnimatePresence>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user