diff options
Diffstat (limited to 'src/components/shared')
| -rw-r--r-- | src/components/shared/RotateIcon.module.css | 16 | ||||
| -rw-r--r-- | src/components/shared/RotateIcon.tsx | 16 |
2 files changed, 32 insertions, 0 deletions
diff --git a/src/components/shared/RotateIcon.module.css b/src/components/shared/RotateIcon.module.css new file mode 100644 index 0000000..60748de --- /dev/null +++ b/src/components/shared/RotateIcon.module.css @@ -0,0 +1,16 @@ +.rotate { + display: inline-flex; +} +.isRotating { + animation: rotating 3s infinite linear; + animation-fill-mode: forwards; +} + +@keyframes rotating { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/src/components/shared/RotateIcon.tsx b/src/components/shared/RotateIcon.tsx new file mode 100644 index 0000000..e2d4ad8 --- /dev/null +++ b/src/components/shared/RotateIcon.tsx @@ -0,0 +1,16 @@ +import cx from 'clsx'; +import * as React from 'react'; +import { RotateCw } from 'react-feather'; + +import s from './RotateIcon.module.css'; + +export function RotateIcon({ isRotating }: { isRotating: boolean }) { + const cls = cx(s.rotate, { + [s.isRotating]: isRotating, + }); + return ( + <span className={cls}> + <RotateCw width={16} /> + </span> + ); +} |
