fix add student
This commit is contained in:
parent
f6edca8c75
commit
688337f778
@ -159,7 +159,6 @@ export const StudentCard: React.FC<StudentCardProps> = ({
|
||||
student={student}
|
||||
present={student.present}
|
||||
recentlyPresent={student.recentlyPresent}
|
||||
onAddUser={onAddUser}
|
||||
reaction={reaction}
|
||||
/>
|
||||
|
||||
@ -168,7 +167,7 @@ export const StudentCard: React.FC<StudentCardProps> = ({
|
||||
</Box>
|
||||
|
||||
{/* Back side */}
|
||||
<StudentCardBack student={student} />
|
||||
<StudentCardBack onAddUser={onAddUser} student={student} />
|
||||
</Box>
|
||||
</motion.li>
|
||||
)
|
||||
|
@ -2,12 +2,15 @@ import React from 'react'
|
||||
import { Box, Flex, useColorMode } from '@chakra-ui/react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { User } from '../../__data__/model'
|
||||
import { AddMissedButton } from './sstyle'
|
||||
import { AddIcon } from '@chakra-ui/icons'
|
||||
|
||||
interface StudentCardBackProps {
|
||||
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 { t } = useTranslation()
|
||||
|
||||
@ -165,6 +168,9 @@ export const StudentCardBack: React.FC<StudentCardBackProps> = ({ student }) =>
|
||||
aspectRatio: "1"
|
||||
}}
|
||||
>
|
||||
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
|
||||
<AddIcon boxSize={3} />
|
||||
</AddMissedButton>
|
||||
<Box
|
||||
position="absolute"
|
||||
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 { AddMissedButton, Avatar, Wrapper, NameOverlay } from './style'
|
||||
import { Avatar, Wrapper, NameOverlay } from './style'
|
||||
|
||||
// Map of reaction types to emojis
|
||||
const REACTION_EMOJIS = {
|
||||
@ -30,7 +30,6 @@ export function getGravatarURL(email) {
|
||||
export const UserCard = ({
|
||||
student,
|
||||
present,
|
||||
onAddUser = undefined,
|
||||
wrapperAS = 'div',
|
||||
width,
|
||||
recentlyPresent = false,
|
||||
@ -39,7 +38,6 @@ export const UserCard = ({
|
||||
student: User
|
||||
present: boolean
|
||||
width?: string | number
|
||||
onAddUser?: (user: User) => void
|
||||
wrapperAS?: React.ElementType<any, keyof React.JSX.IntrinsicElements>
|
||||
recentlyPresent?: boolean
|
||||
reaction?: Reaction
|
||||
@ -100,11 +98,6 @@ export const UserCard = ({
|
||||
</Box>
|
||||
)}
|
||||
</NameOverlay>
|
||||
{onAddUser && !present && (
|
||||
<AddMissedButton onClick={() => onAddUser(student)} aria-label={t('journal.pl.common.add')}>
|
||||
<AddIcon boxSize={3} />
|
||||
</AddMissedButton>
|
||||
)}
|
||||
|
||||
{/* Анимация реакции */}
|
||||
<AnimatePresence>
|
||||
|
Loading…
x
Reference in New Issue
Block a user