[~] Because animating is fun.

This commit is contained in:
Charles Le Maux 2024-09-27 20:00:48 +02:00
parent 26302e5d88
commit c153a4ff42
3 changed files with 11 additions and 2 deletions

7
package-lock.json generated
View File

@ -16,6 +16,7 @@
"@testing-library/react": "^16.0.0", "@testing-library/react": "^16.0.0",
"@types/jest": "^29.5.12", "@types/jest": "^29.5.12",
"@types/node": "^20.14.9", "@types/node": "^20.14.9",
"animate.css": "^4.1.1",
"firebase": "^10.12.2", "firebase": "^10.12.2",
"jest": "^29.7.0", "jest": "^29.7.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",
@ -4038,6 +4039,12 @@
"url": "https://github.com/sponsors/epoberezkin" "url": "https://github.com/sponsors/epoberezkin"
} }
}, },
"node_modules/animate.css": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/animate.css/-/animate.css-4.1.1.tgz",
"integrity": "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ==",
"license": "MIT"
},
"node_modules/ansi-colors": { "node_modules/ansi-colors": {
"version": "4.1.3", "version": "4.1.3",
"resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz", "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.3.tgz",

View File

@ -19,6 +19,7 @@
"@testing-library/react": "^16.0.0", "@testing-library/react": "^16.0.0",
"@types/jest": "^29.5.12", "@types/jest": "^29.5.12",
"@types/node": "^20.14.9", "@types/node": "^20.14.9",
"animate.css": "^4.1.1",
"firebase": "^10.12.2", "firebase": "^10.12.2",
"jest": "^29.7.0", "jest": "^29.7.0",
"prop-types": "^15.8.1", "prop-types": "^15.8.1",

View File

@ -5,6 +5,7 @@ import fabric from '../../assets/frameworks/fabric.png';
import forge from '../../assets/frameworks/forge.png'; import forge from '../../assets/frameworks/forge.png';
import PropTypes from "prop-types"; import PropTypes from "prop-types";
import { FaTrash } from 'react-icons/fa'; import { FaTrash } from 'react-icons/fa';
import 'animate.css/animate.min.css';
const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => { const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick, onDeleteClick, countPlayers, maxPlayers, favoriteServer }) => {
@ -51,7 +52,7 @@ const ServerCard = ({ status, version, name, framework, onRunClick, onStopClick,
return ( return (
<Link <Link
to={`/server/${name}/options`} to={`/server/${name}/options`}
className={favoriteServer ? styles.favoriteserverCard : styles.serverCard} className={`${favoriteServer ? styles.favoriteserverCard : styles.serverCard} animate__animated animate__zoomInDown`}
state={{ status }}> state={{ status }}>
<div className={styles.header}> <div className={styles.header}>
<div className={styles.serverInfo}> <div className={styles.serverInfo}>