css animation small refactor

This commit is contained in:
Hannah Park 2022-01-23 19:50:34 -05:00
parent 6401f9187d
commit 1e80e1c96f
2 changed files with 4 additions and 16 deletions

View file

@ -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>
}

View file

@ -2,10 +2,9 @@
@tailwind components;
@tailwind utilities;
.cellAnimation {
.cell-animation {
animation: revealCharCell linear;
animation-duration: 0.15s;
border-color: black;
}
@keyframes revealCharCell {