diff --git a/src/components/grid/Cell.tsx b/src/components/grid/Cell.tsx index edfcde0..0461527 100644 --- a/src/components/grid/Cell.tsx +++ b/src/components/grid/Cell.tsx @@ -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 ( - <> -
{value}
- - ) + return
{value}
} diff --git a/src/index.css b/src/index.css index bc42849..eec6fc2 100644 --- a/src/index.css +++ b/src/index.css @@ -2,10 +2,9 @@ @tailwind components; @tailwind utilities; -.cellAnimation { +.cell-animation { animation: revealCharCell linear; animation-duration: 0.15s; - border-color: black; } @keyframes revealCharCell {