diff options
| author |  Nate Moore <natemoo-re@users.noreply.github.com>
| 2021-05-03 12:15:13 -0500 |
|---|---|---|
| committer |  GitHub <noreply@github.com>
| 2021-05-03 12:15:13 -0500 |
| commit | ed631329e731d31e384dacc1ec399ba60b7c906b (patch) | |
| tree | 0c998bb642c1feab773cb0e751dbb0ece1e59d64 /packages/create-astro/src/components/Spinner.tsx | |
| parent | 467820996f71b0c78f2000294cb6f3c0a8f3aca4 (diff) | |
| download | astro-ed631329e731d31e384dacc1ec399ba60b7c906b.tar.gz astro-ed631329e731d31e384dacc1ec399ba60b7c906b.tar.zst astro-ed631329e731d31e384dacc1ec399ba60b7c906b.zip | |
`create-astro` UI (#164)
* refactor: improve create-astro layout, build script
* feat(create-astro): v0.1.0
* docs(create-astro): add README
* feat(create-astro): add meta files to starter templates
Diffstat (limited to 'packages/create-astro/src/components/Spinner.tsx')
| -rw-r--r-- | packages/create-astro/src/components/Spinner.tsx | 200 |
1 files changed, 200 insertions, 0 deletions
diff --git a/packages/create-astro/src/components/Spinner.tsx b/packages/create-astro/src/components/Spinner.tsx new file mode 100644 index 000000000..2d3335e1c --- /dev/null +++ b/packages/create-astro/src/components/Spinner.tsx @@ -0,0 +1,200 @@ +import React, { FC, useEffect, useState } from 'react'; +import { Box, Text } from 'ink'; + +const Spinner: FC<{ type?: keyof typeof spinners }> = ({ type = 'countdown' }) => { + const { interval, frames } = spinners[type]; + const [i, setI] = useState(0); + useEffect(() => { + const _ = setInterval(() => { + setI(v => (v < frames.length - 1) ? v + 1 : 0) + }, interval) + + return () => clearInterval(_); + }, []) + + return frames[i] +} + +const spinners = { + countdown: { + interval: 80, + frames: [ + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + <Text backgroundColor="#17C083">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + <Text backgroundColor="#23B1AF">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + <Text backgroundColor="#2CA5D2">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + <Text backgroundColor="#3894FF">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + <Text backgroundColor="#5076F9">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + <Text backgroundColor="#6858F1">{' '}</Text> + </Box>, + <Box display="flex"> + <Text backgroundColor="#882DE7">{' '}</Text> + </Box>, + ] + } +} + +export default Spinner; |