uetchy/namae
1
0
Fork 0
mirror of https://github.com/uetchy/namae.git synced 2025-03-18 04:50:32 +09:00
Code Issues Releases Activity

feat: add hover animation on button

Browse Source
This commit is contained in:
uetchy 2020-02-13 15:00:41 +09:00
parent 679d786138
commit 5ba70749a2
3 changed files with 89 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
web/package.json
View File

@ -13,6 +13,7 @@
"dependencies": {
"@sentry/browser": "^5.12.1",
"fetch-suspense": "^1.2.0",
"framer-motion": "^1.8.4",
"i18next": ">=19.1.0",
"i18next-browser-languagedetector": "^4.0.1",
"i18next-chained-backend": "^2.0.1",

16
web/src/components/Suggestion.tsx
View File

@ -3,6 +3,7 @@ import styled from 'styled-components';
import {useTranslation} from 'react-i18next';
import fetch from 'isomorphic-unfetch';
import {TiArrowSync} from 'react-icons/ti';
import {motion} from 'framer-motion';
import {capitalize, stem, germanify, njoin, lower, upper} from '../util/text';
import {sampleFromArray, fillArray} from '../util/array';
@ -217,9 +218,9 @@ const Suggestion: React.FC<{
</Item>
))}
</Items>
<Icon onClick={shuffle}>
<Button onClick={shuffle}>
<TiArrowSync />
</Icon>
</Button>
</Container>
);
};
@ -264,8 +265,7 @@ const Items = styled.div`
`;
const Item = styled.div`
margin-top: 10px;
margin: 10px 12px 0;
margin: 10px 10px 0;
cursor: pointer;
font-weight: bold;
font-family: inherit;
@ -280,9 +280,12 @@ const Item = styled.div`
}
`;
const Icon = styled(Item)`
const Button = styled(motion.div).attrs({
whileHover: {scale: 1.1},
whileTap: {scale: 0.9},
})`
margin: 15px 0 0 0;
padding: 8px 9px;
padding: 8px 12px;
display: flex;
align-items: center;
border-bottom: none;
@ -292,6 +295,7 @@ const Icon = styled(Item)`
user-select: none;
background: #5610ff;
transition: background 0.1s ease-out;
cursor: pointer;
&:hover {
background: #723df3;

80
yarn.lock
View File

@ -943,7 +943,7 @@
resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.4.tgz#f14932887422c9056b15a8d222a9074a7dfa2831"
integrity sha512-fxfMSBMX3tlIbKUdtGKxqB1fyrH6gVrX39Gsv3y8lRYKUqlgDt3UMqQyGnR1bQMa2B8aGnhLZokZgg8vT0Le+A==
"@emotion/is-prop-valid@^0.8.3":
"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.3":
version "0.8.6"
resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.6.tgz#4757646f0a58e9dec614c47c838e7147d88c263c"
integrity sha512-mnZMho3Sq8BfzkYYRVc8ilQTnc8U02Ytp6J1AwM6taQStZ3AhsEJBX2LzhA/LJirNCwM2VtHL3VFIZ+sNJUgUQ==
@ -1194,6 +1194,22 @@
resolved "https://registry.yarnpkg.com/@nodelib/fs.stat/-/fs.stat-1.1.3.tgz#2b5a3ab3f918cca48a8c754c08168e3f03eba61b"
integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
"@popmotion/easing@^1.0.1", "@popmotion/easing@^1.0.2":
version "1.0.2"
resolved "https://registry.yarnpkg.com/@popmotion/easing/-/easing-1.0.2.tgz#17d925c45b4bf44189e5a38038d149df42d8c0b4"
integrity sha512-IkdW0TNmRnWTeWI7aGQIVDbKXPWHVEYdGgd5ZR4SH/Ty/61p63jCjrPxX1XrR7IGkl08bjhJROStD7j+RKgoIw==
"@popmotion/popcorn@^0.4.2", "@popmotion/popcorn@^0.4.4":
version "0.4.4"
resolved "https://registry.yarnpkg.com/@popmotion/popcorn/-/popcorn-0.4.4.tgz#a5f906fccdff84526e3fcb892712d7d8a98d6adc"
integrity sha512-jYO/8319fKoNLMlY4ZJPiPu8Ea8occYwRZhxpaNn/kZsK4QG2E7XFlXZMJBsTWDw7I1i0uaqyC4zn1nwEezLzg==
dependencies:
"@popmotion/easing" "^1.0.1"
framesync "^4.0.1"
hey-listen "^1.0.8"
style-value-types "^3.1.7"
tslib "^1.10.0"
"@sentry/browser@^5.12.1":
version "5.12.1"
resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-5.12.1.tgz#dc1f268595269fb7277f55eb625c7e92d76dc01b"
@ -4943,6 +4959,30 @@ fragment-cache@^0.2.1:
dependencies:
map-cache "^0.2.2"
framer-motion@^1.8.4:
version "1.8.4"
resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-1.8.4.tgz#5772ff9cbd3b9d154e2c242461893c04a5f0cb26"
integrity sha512-MMtJ3m0UpSb+val+aL8snz57p47LJS8lBSzvybhXjJgQHpufTZEzbp62eXNVdBlCHnC02J5+NmHRz4AAN6J9Qg==
dependencies:
"@popmotion/easing" "^1.0.2"
"@popmotion/popcorn" "^0.4.2"
framesync "^4.0.4"
hey-listen "^1.0.8"
popmotion "9.0.0-beta-8"
style-value-types "^3.1.6"
stylefire "^7.0.2"
tslib "^1.10.0"
optionalDependencies:
"@emotion/is-prop-valid" "^0.8.2"
framesync@^4.0.0, framesync@^4.0.1, framesync@^4.0.4:
version "4.0.4"
resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.0.4.tgz#79c42c0118f26821c078570db0ff81fb863516a2"
integrity sha512-mdP0WvVHe0/qA62KG2LFUAOiWLng5GLpscRlwzBxu2VXOp6B8hNs5C5XlFigsMgrfDrr2YbqTsgdWZTc4RXRMQ==
dependencies:
hey-listen "^1.0.8"
tslib "^1.10.0"
fresh@0.5.2:
version "0.5.2"
resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@ -5352,6 +5392,11 @@ hex-color-regex@^1.1.0:
resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
hey-listen@^1.0.8:
version "1.0.8"
resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
history@^4.9.0:
version "4.10.1"
resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@ -8374,6 +8419,18 @@ pnp-webpack-plugin@1.6.0:
dependencies:
ts-pnp "^1.1.2"
popmotion@9.0.0-beta-8:
version "9.0.0-beta-8"
resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.0-beta-8.tgz#f5a709f11737734e84f2a6b73f9bcf25ee30c388"
integrity sha512-6eQzqursPvnP7ePvdfPeY4wFHmS3OLzNP8rJRvmfFfEIfpFqrQgLsM50Gd9AOvGKJtYJOFknNG+dsnzCpgIdAA==
dependencies:
"@popmotion/easing" "^1.0.1"
"@popmotion/popcorn" "^0.4.2"
framesync "^4.0.4"
hey-listen "^1.0.8"
style-value-types "^3.1.6"
tslib "^1.10.0"
popper.js@^1.11.1:
version "1.16.1"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
@ -10796,6 +10853,14 @@ style-loader@1.1.3:
loader-utils "^1.2.3"
schema-utils "^2.6.4"
style-value-types@^3.1.6, style-value-types@^3.1.7:
version "3.1.7"
resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.7.tgz#3d7d3cf9cb9f9ee86c00e19ba65d6a181a0db33a"
integrity sha512-jPaG5HcAPs3vetSwOJozrBXxuHo9tjZVnbRyBjxqb00c2saIoeuBJc1/2MtvB8eRZy41u/BBDH0CpfzWixftKg==
dependencies:
hey-listen "^1.0.8"
tslib "^1.10.0"
styled-components@^5.0.1:
version "5.0.1"
resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.0.1.tgz#57782a6471031abefb2db5820a1876ae853bc619"
@ -10812,6 +10877,17 @@ styled-components@^5.0.1:
shallowequal "^1.1.0"
supports-color "^5.5.0"
stylefire@^7.0.2:
version "7.0.2"
resolved "https://registry.yarnpkg.com/stylefire/-/stylefire-7.0.2.tgz#874a82dd2bcada39c13e75e0c67b70009e06f556"
integrity sha512-LFIBP6fIA+EMqLSvM4V6zLa+O/iAcHoNJVuXkkZ5G8+T+Pd3KaQLqgxrpkeo1bwWQHqzgab8U3V3gudO231fZA==
dependencies:
"@popmotion/popcorn" "^0.4.4"
framesync "^4.0.0"
hey-listen "^1.0.8"
style-value-types "^3.1.7"
tslib "^1.10.0"
stylehacks@^4.0.0:
version "4.0.3"
resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5"
@ -11133,7 +11209,7 @@ ts-pnp@1.1.5, ts-pnp@^1.1.2:
resolved "https://registry.yarnpkg.com/ts-pnp/-/ts-pnp-1.1.5.tgz#840e0739c89fce5f3abd9037bb091dbff16d9dec"
integrity sha512-ti7OGMOUOzo66wLF3liskw6YQIaSsBgc4GOAlWRnIEj8htCxJUxskanMUoJOD6MDCRAXo36goXJZch+nOS0VMA==
tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
version "1.10.0"
resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.10.0.tgz#c3c19f95973fb0a62973fb09d90d961ee43e5c8a"
integrity sha512-qOebF53frne81cf0S9B41ByenJ3/IuH8yJKngAX35CmiZySA0khhkovshKK+jGCaMnVomla7gVlIcc3EvKPbTQ==