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