fdel/magic-card-valuator
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adding in framer-motion to animate in cards when in view, adding scroll to top button.

Browse Source
This commit is contained in:
Frank Delaguila
2022-11-11 02:23:14 -07:00
parent 86c0fa50a3
commit d9286b0c4c
4 changed files with 473 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
components/transition.tsx Normal file
View File

@@ -0,0 +1,31 @@
import { FC, ReactNode } from "react";
import { motion, AnimatePresence, useReducedMotion } from "framer-motion";
interface TransitionProps {
children?: ReactNode;
className?: string;
}
const Transition: FC<TransitionProps> = ({ children, className }) => {
const shouldReduceMotion = useReducedMotion();
return (
<AnimatePresence>
<motion.div
className={className}
initial={{
y: 100,
opacity: 0
}}
whileInView={{
y: 0,
opacity: 1
}}
viewport={{ once: true }}
>
{children}
</motion.div>
</AnimatePresence>
);
};
export default Transition;

475
package-lock.json generated
View File

@@ -8,12 +8,13 @@
"name": "card-valuator",
"version": "0.1.0",
"dependencies": {
"@tauri-apps/api": "^1.1.0",
"@tauri-apps/api": "^1.2.0",
"@types/lodash": "^4.14.187",
"@types/node": "18.11.9",
"@types/react": "18.0.24",
"@types/react-dom": "18.0.8",
"chart.js": "^3.9.1",
"framer-motion": "^7.6.5",
"lodash": "^4.17.21",
"next": "13.0.1",
"react": "18.2.0",
@@ -22,12 +23,85 @@
"typescript": "4.8.4"
},
"devDependencies": {
"@tauri-apps/cli": "^1.1.1",
"@tauri-apps/cli": "^1.2.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1"
}
},
"node_modules/@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"optional": true,
"dependencies": {
"@emotion/memoize": "0.7.4"
}
},
"node_modules/@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"optional": true
},
"node_modules/@motionone/animation": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz",
"integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==",
"dependencies": {
"@motionone/easing": "^10.14.0",
"@motionone/types": "^10.14.0",
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"node_modules/@motionone/dom": {
"version": "10.13.1",
"resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz",
"integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==",
"dependencies": {
"@motionone/animation": "^10.13.1",
"@motionone/generators": "^10.13.1",
"@motionone/types": "^10.13.0",
"@motionone/utils": "^10.13.1",
"hey-listen": "^1.0.8",
"tslib": "^2.3.1"
}
},
"node_modules/@motionone/easing": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz",
"integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==",
"dependencies": {
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"node_modules/@motionone/generators": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz",
"integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==",
"dependencies": {
"@motionone/types": "^10.14.0",
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"node_modules/@motionone/types": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz",
"integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ=="
},
"node_modules/@motionone/utils": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz",
"integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==",
"dependencies": {
"@motionone/types": "^10.14.0",
"hey-listen": "^1.0.8",
"tslib": "^2.3.1"
}
},
"node_modules/@next/env": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.1.tgz",
@@ -272,11 +346,11 @@
}
},
"node_modules/@tauri-apps/api": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.1.0.tgz",
"integrity": "sha512-n13pIqdPd3KtaMmmAcrU7BTfdMtIlGNnfZD0dNX8L4p8dgmuNyikm6JAA+yCpl9gqq6I8x5cV2Y0muqdgD0cWw==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.2.0.tgz",
"integrity": "sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw==",
"engines": {
"node": ">= 12.22.0",
"node": ">= 14.6.0",
"npm": ">= 6.6.0",
"yarn": ">= 1.19.1"
},
@@ -286,9 +360,9 @@
}
},
"node_modules/@tauri-apps/cli": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.1.1.tgz",
"integrity": "sha512-80kjMEMPBwLYCp0tTKSquy90PHHGGBvZsneNr3B/mWxNsvjzA1C0vOyGJGFrJuT2OmkvrdvuJZ5mch5hL8O1Xg==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.2.0.tgz",
"integrity": "sha512-DgUnk4p/atWHq2HUx9Vt+/LuRsx4iFlkzdZIUxtFWvpcZih2k0TzmHJbrhM1evh1/7a+SqiwDawmyf3Hz1HxXA==",
"dev": true,
"bin": {
"tauri": "tauri.js"
@@ -301,21 +375,21 @@
"url": "https://opencollective.com/tauri"
},
"optionalDependencies": {
"@tauri-apps/cli-darwin-arm64": "1.1.1",
"@tauri-apps/cli-darwin-x64": "1.1.1",
"@tauri-apps/cli-linux-arm-gnueabihf": "1.1.1",
"@tauri-apps/cli-linux-arm64-gnu": "1.1.1",
"@tauri-apps/cli-linux-arm64-musl": "1.1.1",
"@tauri-apps/cli-linux-x64-gnu": "1.1.1",
"@tauri-apps/cli-linux-x64-musl": "1.1.1",
"@tauri-apps/cli-win32-ia32-msvc": "1.1.1",
"@tauri-apps/cli-win32-x64-msvc": "1.1.1"
"@tauri-apps/cli-darwin-arm64": "1.2.0",
"@tauri-apps/cli-darwin-x64": "1.2.0",
"@tauri-apps/cli-linux-arm-gnueabihf": "1.2.0",
"@tauri-apps/cli-linux-arm64-gnu": "1.2.0",
"@tauri-apps/cli-linux-arm64-musl": "1.2.0",
"@tauri-apps/cli-linux-x64-gnu": "1.2.0",
"@tauri-apps/cli-linux-x64-musl": "1.2.0",
"@tauri-apps/cli-win32-ia32-msvc": "1.2.0",
"@tauri-apps/cli-win32-x64-msvc": "1.2.0"
}
},
"node_modules/@tauri-apps/cli-darwin-arm64": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.1.1.tgz",
"integrity": "sha512-qBG11ig525/qf0f5OQxn0ON3hT8YdpTfpa4Y4kVqBJhdW50R5fadPv6tv5Dpl2TS2X7nWh/zg5mEXYoCK3HZ9w==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.2.0.tgz",
"integrity": "sha512-f3LR2RvTU2ulxYdK9Nc3vKaSpDChu52pz0BMWNrSs3dxs4WTVioie98Ufz+GorifkUp3sYXcJte3HzX6wH/QxQ==",
"cpu": [
"arm64"
],
@@ -329,9 +403,9 @@
}
},
"node_modules/@tauri-apps/cli-darwin-x64": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.1.1.tgz",
"integrity": "sha512-M3dMsp78OdxisbTwAWGvy3jIb3uqThtQcUYVvqOu9LeEOHyldOBFDSht+6PTBpaJLAHFMQK2rmNxiWgigklJaA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.2.0.tgz",
"integrity": "sha512-m07QZaAZCtyobrjddfz/Rxf9GGutnBOpRMbNqVqCk0qKRJzHG1fIsLqkgZh6+qPv0zHpu7xi/FPcqTec72Cp8w==",
"cpu": [
"x64"
],
@@ -345,9 +419,9 @@
}
},
"node_modules/@tauri-apps/cli-linux-arm-gnueabihf": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.1.1.tgz",
"integrity": "sha512-LYlvdAd73cq+yTi6rw7j/DWIvDpeApwgQkIn+HYsNNeFhyFmABU7tmw+pekK3W3nHAkYAJ69Rl4ZdoxdNGKmHg==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.2.0.tgz",
"integrity": "sha512-Id9eF1JtthZRFVtXAAVtSlI3uMT8cJ7LYmCSIl3mAXEUeaPBxnUs1i9X6/J+2Ho3yLEuuOxJ7PaJd+4v8wnEeg==",
"cpu": [
"arm"
],
@@ -361,9 +435,9 @@
}
},
"node_modules/@tauri-apps/cli-linux-arm64-gnu": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.1.1.tgz",
"integrity": "sha512-o/hbMQIKuFI7cTNpeQBHD/OCNJOBIci78faKms/t6AstLXx0QJuRHDk477Rg6VVy/I3BBKbyATALbmcTq+ti0A==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.2.0.tgz",
"integrity": "sha512-NtfPkkpeMPl+i/tB/Fc8ST2rKO2vV8int/RkOvNGLCkhWcl4sbzKBol7tc4q8c8h0X7FXDcF1l/EOuGsZUAA5Q==",
"cpu": [
"arm64"
],
@@ -377,9 +451,9 @@
}
},
"node_modules/@tauri-apps/cli-linux-arm64-musl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.1.1.tgz",
"integrity": "sha512-8Ci4qlDnXIp93XqUrtzFCBDatUzPHpZq7L3bociUbWpvy/bnlzxp1C/C+vwdc4uS1MiAp9v3BFgrU4i0f0Z3QQ==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.2.0.tgz",
"integrity": "sha512-tz+mOOVsy/TMdq2WJVIJl/iwW3OCWCyD5Fls3fhyJ4XpLfjn4G+C+oU0awXD/0se0ko81aq4D+r8eDx6oBRi0A==",
"cpu": [
"arm64"
],
@@ -393,9 +467,9 @@
}
},
"node_modules/@tauri-apps/cli-linux-x64-gnu": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.1.1.tgz",
"integrity": "sha512-ES4Bkx2JAI8+dDNDJswhLS3yqt+yT/4C6UfGOPIHFxcXUh6fe36eUllrTt+HLRS9xTZbYnteJy7ebq2TqMkaxw==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.2.0.tgz",
"integrity": "sha512-FH/wU+OWZjRQvrq/oequScr72I84XgOuRuMEpt/GqGD341cBJ8ithpoyzuiKsvjS6K0qMyRFzy3eyhQ7gwX+4Q==",
"cpu": [
"x64"
],
@@ -409,9 +483,9 @@
}
},
"node_modules/@tauri-apps/cli-linux-x64-musl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.1.1.tgz",
"integrity": "sha512-qrN1WOMAaDl+LE8P8iO0+DYlrWNTc9jIu/CsnVY/LImTn79ZPxEkcVBo0UGeKRI7f10TfvkVmLCBLxTz8QhEyA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.2.0.tgz",
"integrity": "sha512-nLg30aBT9fI83sjIqaGPN7twbtE5LJy2DbKzxIlw59F+GT8HBdiM/2mZdTLB3AQb52yVHuGB1TVtWDsl0JHqCA==",
"cpu": [
"x64"
],
@@ -425,9 +499,9 @@
}
},
"node_modules/@tauri-apps/cli-win32-ia32-msvc": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.1.1.tgz",
"integrity": "sha512-vw7VOmrQlywHhFV3pf54udf2FRNj9dg9WP1gL0My55FnB+w+PWS9Ipm871kX5qepmChdnZHKq9fsqE2uTjX//Q==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.2.0.tgz",
"integrity": "sha512-eXtgIgY0fawgcOuUjH8Y6PxwPxbK87Zl9XmA7Q0m58T7pIz+gcbgvtH8Bb+liYHoRYItIhQxVm+ui7Y59rI7Cg==",
"cpu": [
"ia32"
],
@@ -441,9 +515,9 @@
}
},
"node_modules/@tauri-apps/cli-win32-x64-msvc": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.1.1.tgz",
"integrity": "sha512-OukxlLLi3AoCN4ABnqCDTiiC7xJGWukAjrKCIx7wFISrLjNfsrnH7/UOzuopfGpZChSe2c+AamVmcpBfVsEmJA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.2.0.tgz",
"integrity": "sha512-egyM66R05AIbkaUDptpHurFTIYp3VM4H5OrRd3O2b0oXf8SoiXiyrHbQsHVHHDYyytKmwkdNqjdy+Vev/Vq25Q==",
"cpu": [
"x64"
],
@@ -838,6 +912,44 @@
"url": "https://www.patreon.com/infusion"
}
},
"node_modules/framer-motion": {
"version": "7.6.5",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.6.5.tgz",
"integrity": "sha512-PhS5z9r1OuG6d9xy2B5paYvbWWsOhuPPCawcBwMN3AVzmiXKXZ2Ucizf8SqSE4On5xyCR+A2gmQZhBlYr/Gzjg==",
"dependencies": {
"@motionone/dom": "10.13.1",
"framesync": "6.1.2",
"hey-listen": "^1.0.8",
"popmotion": "11.0.5",
"style-value-types": "5.1.2",
"tslib": "2.4.0"
},
"optionalDependencies": {
"@emotion/is-prop-valid": "^0.8.2"
},
"peerDependencies": {
"react": "^18.0.0",
"react-dom": "^18.0.0"
}
},
"node_modules/framer-motion/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/framesync": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
"integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
"dependencies": {
"tslib": "2.4.0"
}
},
"node_modules/framesync/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -882,6 +994,11 @@
"node": ">= 0.4.0"
}
},
"node_modules/hey-listen": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
},
"node_modules/is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -1148,6 +1265,22 @@
"node": ">=0.10.0"
}
},
"node_modules/popmotion": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
"integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
"dependencies": {
"framesync": "6.1.2",
"hey-listen": "^1.0.8",
"style-value-types": "5.1.2",
"tslib": "2.4.0"
}
},
"node_modules/popmotion/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/postcss": {
"version": "8.4.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -1426,6 +1559,20 @@
"node": ">=0.10.0"
}
},
"node_modules/style-value-types": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
"integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
"dependencies": {
"hey-listen": "^1.0.8",
"tslib": "2.4.0"
}
},
"node_modules/style-value-types/node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/styled-jsx": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@@ -1590,6 +1737,79 @@
}
},
"dependencies": {
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"optional": true,
"requires": {
"@emotion/memoize": "0.7.4"
}
},
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"optional": true
},
"@motionone/animation": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/animation/-/animation-10.14.0.tgz",
"integrity": "sha512-h+1sdyBP8vbxEBW5gPFDnj+m2DCqdlAuf2g6Iafb1lcMnqjsRXWlPw1AXgvUMXmreyhqmPbJqoNfIKdytampRQ==",
"requires": {
"@motionone/easing": "^10.14.0",
"@motionone/types": "^10.14.0",
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"@motionone/dom": {
"version": "10.13.1",
"resolved": "https://registry.npmjs.org/@motionone/dom/-/dom-10.13.1.tgz",
"integrity": "sha512-zjfX+AGMIt/fIqd/SL1Lj93S6AiJsEA3oc5M9VkUr+Gz+juRmYN1vfvZd6MvEkSqEjwPQgcjN7rGZHrDB9APfQ==",
"requires": {
"@motionone/animation": "^10.13.1",
"@motionone/generators": "^10.13.1",
"@motionone/types": "^10.13.0",
"@motionone/utils": "^10.13.1",
"hey-listen": "^1.0.8",
"tslib": "^2.3.1"
}
},
"@motionone/easing": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/easing/-/easing-10.14.0.tgz",
"integrity": "sha512-2vUBdH9uWTlRbuErhcsMmt1jvMTTqvGmn9fHq8FleFDXBlHFs5jZzHJT9iw+4kR1h6a4SZQuCf72b9ji92qNYA==",
"requires": {
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"@motionone/generators": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/generators/-/generators-10.14.0.tgz",
"integrity": "sha512-6kRHezoFfIjFN7pPpaxmkdZXD36tQNcyJe3nwVqwJ+ZfC0e3rFmszR8kp9DEVFs9QL/akWjuGPSLBI1tvz+Vjg==",
"requires": {
"@motionone/types": "^10.14.0",
"@motionone/utils": "^10.14.0",
"tslib": "^2.3.1"
}
},
"@motionone/types": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/types/-/types-10.14.0.tgz",
"integrity": "sha512-3bNWyYBHtVd27KncnJLhksMFQ5o2MSdk1cA/IZqsHtA9DnRM1SYgN01CTcJ8Iw8pCXF5Ocp34tyAjY7WRpOJJQ=="
},
"@motionone/utils": {
"version": "10.14.0",
"resolved": "https://registry.npmjs.org/@motionone/utils/-/utils-10.14.0.tgz",
"integrity": "sha512-sLWBLPzRqkxmOTRzSaD3LFQXCPHvDzyHJ1a3VP9PRzBxyVd2pv51/gMOsdAcxQ9n+MIeGJnxzXBYplUHKj4jkw==",
"requires": {
"@motionone/types": "^10.14.0",
"hey-listen": "^1.0.8",
"tslib": "^2.3.1"
}
},
"@next/env": {
"version": "13.0.1",
"resolved": "https://registry.npmjs.org/@next/env/-/env-13.0.1.tgz",
@@ -1708,87 +1928,87 @@
}
},
"@tauri-apps/api": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.1.0.tgz",
"integrity": "sha512-n13pIqdPd3KtaMmmAcrU7BTfdMtIlGNnfZD0dNX8L4p8dgmuNyikm6JAA+yCpl9gqq6I8x5cV2Y0muqdgD0cWw=="
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-1.2.0.tgz",
"integrity": "sha512-lsI54KI6HGf7VImuf/T9pnoejfgkNoXveP14pVV7XarrQ46rOejIVJLFqHI9sRReJMGdh2YuCoI3cc/yCWCsrw=="
},
"@tauri-apps/cli": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.1.1.tgz",
"integrity": "sha512-80kjMEMPBwLYCp0tTKSquy90PHHGGBvZsneNr3B/mWxNsvjzA1C0vOyGJGFrJuT2OmkvrdvuJZ5mch5hL8O1Xg==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli/-/cli-1.2.0.tgz",
"integrity": "sha512-DgUnk4p/atWHq2HUx9Vt+/LuRsx4iFlkzdZIUxtFWvpcZih2k0TzmHJbrhM1evh1/7a+SqiwDawmyf3Hz1HxXA==",
"dev": true,
"requires": {
"@tauri-apps/cli-darwin-arm64": "1.1.1",
"@tauri-apps/cli-darwin-x64": "1.1.1",
"@tauri-apps/cli-linux-arm-gnueabihf": "1.1.1",
"@tauri-apps/cli-linux-arm64-gnu": "1.1.1",
"@tauri-apps/cli-linux-arm64-musl": "1.1.1",
"@tauri-apps/cli-linux-x64-gnu": "1.1.1",
"@tauri-apps/cli-linux-x64-musl": "1.1.1",
"@tauri-apps/cli-win32-ia32-msvc": "1.1.1",
"@tauri-apps/cli-win32-x64-msvc": "1.1.1"
"@tauri-apps/cli-darwin-arm64": "1.2.0",
"@tauri-apps/cli-darwin-x64": "1.2.0",
"@tauri-apps/cli-linux-arm-gnueabihf": "1.2.0",
"@tauri-apps/cli-linux-arm64-gnu": "1.2.0",
"@tauri-apps/cli-linux-arm64-musl": "1.2.0",
"@tauri-apps/cli-linux-x64-gnu": "1.2.0",
"@tauri-apps/cli-linux-x64-musl": "1.2.0",
"@tauri-apps/cli-win32-ia32-msvc": "1.2.0",
"@tauri-apps/cli-win32-x64-msvc": "1.2.0"
}
},
"@tauri-apps/cli-darwin-arm64": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.1.1.tgz",
"integrity": "sha512-qBG11ig525/qf0f5OQxn0ON3hT8YdpTfpa4Y4kVqBJhdW50R5fadPv6tv5Dpl2TS2X7nWh/zg5mEXYoCK3HZ9w==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-arm64/-/cli-darwin-arm64-1.2.0.tgz",
"integrity": "sha512-f3LR2RvTU2ulxYdK9Nc3vKaSpDChu52pz0BMWNrSs3dxs4WTVioie98Ufz+GorifkUp3sYXcJte3HzX6wH/QxQ==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-darwin-x64": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.1.1.tgz",
"integrity": "sha512-M3dMsp78OdxisbTwAWGvy3jIb3uqThtQcUYVvqOu9LeEOHyldOBFDSht+6PTBpaJLAHFMQK2rmNxiWgigklJaA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-darwin-x64/-/cli-darwin-x64-1.2.0.tgz",
"integrity": "sha512-m07QZaAZCtyobrjddfz/Rxf9GGutnBOpRMbNqVqCk0qKRJzHG1fIsLqkgZh6+qPv0zHpu7xi/FPcqTec72Cp8w==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-linux-arm-gnueabihf": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.1.1.tgz",
"integrity": "sha512-LYlvdAd73cq+yTi6rw7j/DWIvDpeApwgQkIn+HYsNNeFhyFmABU7tmw+pekK3W3nHAkYAJ69Rl4ZdoxdNGKmHg==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm-gnueabihf/-/cli-linux-arm-gnueabihf-1.2.0.tgz",
"integrity": "sha512-Id9eF1JtthZRFVtXAAVtSlI3uMT8cJ7LYmCSIl3mAXEUeaPBxnUs1i9X6/J+2Ho3yLEuuOxJ7PaJd+4v8wnEeg==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-linux-arm64-gnu": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.1.1.tgz",
"integrity": "sha512-o/hbMQIKuFI7cTNpeQBHD/OCNJOBIci78faKms/t6AstLXx0QJuRHDk477Rg6VVy/I3BBKbyATALbmcTq+ti0A==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-gnu/-/cli-linux-arm64-gnu-1.2.0.tgz",
"integrity": "sha512-NtfPkkpeMPl+i/tB/Fc8ST2rKO2vV8int/RkOvNGLCkhWcl4sbzKBol7tc4q8c8h0X7FXDcF1l/EOuGsZUAA5Q==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-linux-arm64-musl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.1.1.tgz",
"integrity": "sha512-8Ci4qlDnXIp93XqUrtzFCBDatUzPHpZq7L3bociUbWpvy/bnlzxp1C/C+vwdc4uS1MiAp9v3BFgrU4i0f0Z3QQ==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-arm64-musl/-/cli-linux-arm64-musl-1.2.0.tgz",
"integrity": "sha512-tz+mOOVsy/TMdq2WJVIJl/iwW3OCWCyD5Fls3fhyJ4XpLfjn4G+C+oU0awXD/0se0ko81aq4D+r8eDx6oBRi0A==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-linux-x64-gnu": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.1.1.tgz",
"integrity": "sha512-ES4Bkx2JAI8+dDNDJswhLS3yqt+yT/4C6UfGOPIHFxcXUh6fe36eUllrTt+HLRS9xTZbYnteJy7ebq2TqMkaxw==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-gnu/-/cli-linux-x64-gnu-1.2.0.tgz",
"integrity": "sha512-FH/wU+OWZjRQvrq/oequScr72I84XgOuRuMEpt/GqGD341cBJ8ithpoyzuiKsvjS6K0qMyRFzy3eyhQ7gwX+4Q==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-linux-x64-musl": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.1.1.tgz",
"integrity": "sha512-qrN1WOMAaDl+LE8P8iO0+DYlrWNTc9jIu/CsnVY/LImTn79ZPxEkcVBo0UGeKRI7f10TfvkVmLCBLxTz8QhEyA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-linux-x64-musl/-/cli-linux-x64-musl-1.2.0.tgz",
"integrity": "sha512-nLg30aBT9fI83sjIqaGPN7twbtE5LJy2DbKzxIlw59F+GT8HBdiM/2mZdTLB3AQb52yVHuGB1TVtWDsl0JHqCA==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-win32-ia32-msvc": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.1.1.tgz",
"integrity": "sha512-vw7VOmrQlywHhFV3pf54udf2FRNj9dg9WP1gL0My55FnB+w+PWS9Ipm871kX5qepmChdnZHKq9fsqE2uTjX//Q==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-ia32-msvc/-/cli-win32-ia32-msvc-1.2.0.tgz",
"integrity": "sha512-eXtgIgY0fawgcOuUjH8Y6PxwPxbK87Zl9XmA7Q0m58T7pIz+gcbgvtH8Bb+liYHoRYItIhQxVm+ui7Y59rI7Cg==",
"dev": true,
"optional": true
},
"@tauri-apps/cli-win32-x64-msvc": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.1.1.tgz",
"integrity": "sha512-OukxlLLi3AoCN4ABnqCDTiiC7xJGWukAjrKCIx7wFISrLjNfsrnH7/UOzuopfGpZChSe2c+AamVmcpBfVsEmJA==",
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@tauri-apps/cli-win32-x64-msvc/-/cli-win32-x64-msvc-1.2.0.tgz",
"integrity": "sha512-egyM66R05AIbkaUDptpHurFTIYp3VM4H5OrRd3O2b0oXf8SoiXiyrHbQsHVHHDYyytKmwkdNqjdy+Vev/Vq25Q==",
"dev": true,
"optional": true
},
@@ -2064,6 +2284,42 @@
"integrity": "sha512-MhLuK+2gUcnZe8ZHlaaINnQLl0xRIGRfcGk2yl8xoQAfHrSsL3rYu6FCmBdkdbhc9EPlwyGHewaRsvwRMJtAlA==",
"dev": true
},
"framer-motion": {
"version": "7.6.5",
"resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-7.6.5.tgz",
"integrity": "sha512-PhS5z9r1OuG6d9xy2B5paYvbWWsOhuPPCawcBwMN3AVzmiXKXZ2Ucizf8SqSE4On5xyCR+A2gmQZhBlYr/Gzjg==",
"requires": {
"@emotion/is-prop-valid": "^0.8.2",
"@motionone/dom": "10.13.1",
"framesync": "6.1.2",
"hey-listen": "^1.0.8",
"popmotion": "11.0.5",
"style-value-types": "5.1.2",
"tslib": "2.4.0"
},
"dependencies": {
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},
"framesync": {
"version": "6.1.2",
"resolved": "https://registry.npmjs.org/framesync/-/framesync-6.1.2.tgz",
"integrity": "sha512-jBTqhX6KaQVDyus8muwZbBeGGP0XgujBRbQ7gM7BRdS3CadCZIHiawyzYLnafYcvZIh5j8WE7cxZKFn7dXhu9g==",
"requires": {
"tslib": "2.4.0"
},
"dependencies": {
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},
"fsevents": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -2095,6 +2351,11 @@
"function-bind": "^1.1.1"
}
},
"hey-listen": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/hey-listen/-/hey-listen-1.0.8.tgz",
"integrity": "sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q=="
},
"is-binary-path": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -2270,6 +2531,24 @@
"integrity": "sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==",
"dev": true
},
"popmotion": {
"version": "11.0.5",
"resolved": "https://registry.npmjs.org/popmotion/-/popmotion-11.0.5.tgz",
"integrity": "sha512-la8gPM1WYeFznb/JqF4GiTkRRPZsfaj2+kCxqQgr2MJylMmIKUwBfWW8Wa5fml/8gmtlD5yI01MP1QCZPWmppA==",
"requires": {
"framesync": "6.1.2",
"hey-listen": "^1.0.8",
"style-value-types": "5.1.2",
"tslib": "2.4.0"
},
"dependencies": {
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},
"postcss": {
"version": "8.4.18",
"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.18.tgz",
@@ -2359,8 +2638,7 @@
"react-chartjs-2": {
"version": "4.3.1",
"resolved": "https://registry.npmjs.org/react-chartjs-2/-/react-chartjs-2-4.3.1.tgz",
"integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA==",
"requires": {}
"integrity": "sha512-5i3mjP6tU7QSn0jvb8I4hudTzHJqS8l00ORJnVwI2sYu0ihpj83Lv2YzfxunfxTZkscKvZu2F2w9LkwNBhj6xA=="
},
"react-dom": {
"version": "18.2.0",
@@ -2428,6 +2706,22 @@
"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw=="
},
"style-value-types": {
"version": "5.1.2",
"resolved": "https://registry.npmjs.org/style-value-types/-/style-value-types-5.1.2.tgz",
"integrity": "sha512-Vs9fNreYF9j6W2VvuDTP7kepALi7sk0xtk2Tu8Yxi9UoajJdEVpNpCov0HsLTqXvNGKX+Uv09pkozVITi1jf3Q==",
"requires": {
"hey-listen": "^1.0.8",
"tslib": "2.4.0"
},
"dependencies": {
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
}
}
},
"styled-jsx": {
"version": "5.1.0",
"resolved": "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.1.0.tgz",
@@ -2505,8 +2799,7 @@
"use-sync-external-store": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz",
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==",
"requires": {}
"integrity": "sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA=="
},
"util-deprecate": {
"version": "1.0.2",

5
package.json
View File

@@ -11,12 +11,13 @@
"lint": "next lint"
},
"dependencies": {
"@tauri-apps/api": "^1.1.0",
"@tauri-apps/api": "^1.2.0",
"@types/lodash": "^4.14.187",
"@types/node": "18.11.9",
"@types/react": "18.0.24",
"@types/react-dom": "18.0.8",
"chart.js": "^3.9.1",
"framer-motion": "^7.6.5",
"lodash": "^4.17.21",
"next": "13.0.1",
"react": "18.2.0",
@@ -25,7 +26,7 @@
"typescript": "4.8.4"
},
"devDependencies": {
"@tauri-apps/cli": "^1.1.1",
"@tauri-apps/cli": "^1.2.0",
"autoprefixer": "^10.4.13",
"postcss": "^8.4.18",
"tailwindcss": "^3.2.1"

28
pages/index.tsx
View File

@@ -2,10 +2,12 @@ import Head from 'next/head';
import { invoke } from '@tauri-apps/api/tauri';
import Image from 'next/image';
import styles from '../styles/Home.module.css';
import { useEffect, useState, useMemo, useRef, MutableRefObject, RefObject } from 'react';
import { useEffect, useState, useMemo, useRef } from 'react';
import { debounce } from 'lodash';
import { motion } from 'framer-motion';
import Modal from '../components/modal';
import Transition from '../components/transition';
export async function getStaticProps(context) {
@@ -23,11 +25,10 @@ export default function Home(props) {
const [search, setSearch] = useState('');
const [selectedCard, setSelectedCard] = useState({});
const [cards, setCards] = useState<any>([]);
const [cardRow, setCardRow] = useState<any>([]);
const [loading, setLoading] = useState(false);
const [error, setError] = useState(false);
const [errorMessage, setErrorMessage] = useState("");
const [queryParams, setQueryParams] = useState('');
const [modalOpen, setModalOpen] = useState(false);
const modalRef = useRef<HTMLDivElement>(null);
@@ -42,7 +43,11 @@ export default function Home(props) {
.then( res => res.json() )
.then( (res) => {
if( res.data ) {
setCards(res.data);
let cardMatrix = [];
for(let i = 0; i < res.data.length; i += 4) {
cardMatrix.push(res.data.slice(i, i + 4))
}
setCardRow(cardMatrix);
setLoading(false);
} else {
setLoading(false);
@@ -88,7 +93,7 @@ export default function Home(props) {
</div>
<main className="container my-4">
{ cards.length === 0 ?
{ cardRow.length === 0 ?
<div className="text-center search-placeholder">
<div className="card-container h-48 relative">
{props.initialCards.map( (card: any) =>
@@ -106,7 +111,9 @@ export default function Home(props) {
{loading && search !== "" ?
<div className="spinner mx-auto"></div>
:
cards && cards.map( (card: any) =>
cardRow && cardRow.map( (row: any, i: number) =>
<Transition className="flex">
{row.map( (card: any, i: number) =>
<Image onClick={() => {
setSelectedCard(card);
setModalOpen(true);
@@ -115,6 +122,8 @@ export default function Home(props) {
className="cursor-pointer hover:scale-110 transition-transform duration-150 ease-in-out w-1/2 md:w-1/3 lg:w-1/4 p-2"
key={card.id}
alt={`${card.name} Card`} src={card.image_uris?.png || "https://via.placeholder.com/150" } width={100} height={100} />
)}
</Transition>
)
}
</section>
@@ -130,11 +139,16 @@ export default function Home(props) {
</a>
</footer>
<div title="Back to top" aria-label="Scrool back to the top of the page" className="rounded-full">
{ !modalOpen &&
<div
title="Back to top"
aria-label="Scrool back to the top of the page"
className="bg-red-600 bottom-4 cursor-pointer fixed flex justify-center items-center right-4 rounded-full p-4" onClick={() => window.scrollTo(0, 0)}>
<span className="material-symbols-outlined">
arrow_upward
</span>
</div>
}
<Modal ref={modalRef} modalOpen={modalOpen} toggleModal={setModalOpen} card={selectedCard} />