css animation small refactor
This commit is contained in:
parent
6401f9187d
commit
1e80e1c96f
2 changed files with 4 additions and 16 deletions
|
@ -1,4 +1,3 @@
|
|||
import { useState, useEffect } from 'react'
|
||||
import { CharStatus } from '../../lib/statuses'
|
||||
import classnames from 'classnames'
|
||||
|
||||
|
@ -8,27 +7,17 @@ type Props = {
|
|||
}
|
||||
|
||||
export const Cell = ({ value, status }: Props) => {
|
||||
const [cellAnimation, setCellAnimation] = useState('')
|
||||
|
||||
useEffect(() => {
|
||||
if (value !== undefined) {
|
||||
setCellAnimation('cellAnimation')
|
||||
}
|
||||
}, [value])
|
||||
|
||||
const classes = classnames(
|
||||
'w-14 h-14 border-solid border-2 flex items-center justify-center mx-0.5 text-lg font-bold rounded',
|
||||
{
|
||||
'bg-white border-slate-200': !status,
|
||||
'border-black': value && !status,
|
||||
'bg-slate-400 text-white border-slate-400': status === 'absent',
|
||||
'bg-green-500 text-white border-green-500': status === 'correct',
|
||||
'bg-yellow-500 text-white border-yellow-500': status === 'present',
|
||||
'cell-animation': !!value,
|
||||
}
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className={`${classes} ${cellAnimation}`}>{value}</div>
|
||||
</>
|
||||
)
|
||||
return <div className={classes}>{value}</div>
|
||||
}
|
||||
|
|
|
@ -2,10 +2,9 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
.cellAnimation {
|
||||
.cell-animation {
|
||||
animation: revealCharCell linear;
|
||||
animation-duration: 0.15s;
|
||||
border-color: black;
|
||||
}
|
||||
|
||||
@keyframes revealCharCell {
|
||||
|
|
Loading…
Add table
Reference in a new issue