[Glitch] Rewrite `<LoadingIndicator/>` as FC and TS (#25364)
Port a86886b1fd
to glitch-soc
Signed-off-by: Claire <claire.github-309c@sitedethib.com>
local
parent
0a212cfa7f
commit
9bf63257fb
24 changed files with 55 additions and 53 deletions
@ -0,0 +1,27 @@ |
|||||||
|
interface Props { |
||||||
|
size: number; |
||||||
|
strokeWidth: number; |
||||||
|
} |
||||||
|
|
||||||
|
export const CircularProgress: React.FC<Props> = ({ size, strokeWidth }) => { |
||||||
|
const viewBox = `0 0 ${size} ${size}`; |
||||||
|
const radius = (size - strokeWidth) / 2; |
||||||
|
|
||||||
|
return ( |
||||||
|
<svg |
||||||
|
width={size} |
||||||
|
height={size} |
||||||
|
viewBox={viewBox} |
||||||
|
className='circular-progress' |
||||||
|
role='progressbar' |
||||||
|
> |
||||||
|
<circle |
||||||
|
fill='none' |
||||||
|
cx={size / 2} |
||||||
|
cy={size / 2} |
||||||
|
r={radius} |
||||||
|
strokeWidth={`${strokeWidth}px`} |
||||||
|
/> |
||||||
|
</svg> |
||||||
|
); |
||||||
|
}; |
@ -1,31 +0,0 @@ |
|||||||
import PropTypes from 'prop-types'; |
|
||||||
|
|
||||||
export const CircularProgress = ({ size, strokeWidth }) => { |
|
||||||
const viewBox = `0 0 ${size} ${size}`; |
|
||||||
const radius = (size - strokeWidth) / 2; |
|
||||||
|
|
||||||
return ( |
|
||||||
<svg width={size} heigh={size} viewBox={viewBox} className='circular-progress' role='progressbar'> |
|
||||||
<circle |
|
||||||
fill='none' |
|
||||||
cx={size / 2} |
|
||||||
cy={size / 2} |
|
||||||
r={radius} |
|
||||||
strokeWidth={`${strokeWidth}px`} |
|
||||||
/> |
|
||||||
</svg> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
CircularProgress.propTypes = { |
|
||||||
size: PropTypes.number.isRequired, |
|
||||||
strokeWidth: PropTypes.number.isRequired, |
|
||||||
}; |
|
||||||
|
|
||||||
const LoadingIndicator = () => ( |
|
||||||
<div className='loading-indicator'> |
|
||||||
<CircularProgress size={50} strokeWidth={6} /> |
|
||||||
</div> |
|
||||||
); |
|
||||||
|
|
||||||
export default LoadingIndicator; |
|
@ -0,0 +1,7 @@ |
|||||||
|
import { CircularProgress } from './circular_progress'; |
||||||
|
|
||||||
|
export const LoadingIndicator: React.FC = () => ( |
||||||
|
<div className='loading-indicator'> |
||||||
|
<CircularProgress size={50} strokeWidth={6} /> |
||||||
|
</div> |
||||||
|
); |
Loading…
Reference in new issue