summaryrefslogtreecommitdiff
path: root/packages/create-astro/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'packages/create-astro/src/components')
-rw-r--r--packages/create-astro/src/components/App.tsx149
-rw-r--r--packages/create-astro/src/components/Confirm.tsx2
-rw-r--r--packages/create-astro/src/components/Emoji.tsx2
-rw-r--r--packages/create-astro/src/components/Exit.tsx11
-rw-r--r--packages/create-astro/src/components/Finalize.tsx19
-rw-r--r--packages/create-astro/src/components/Header.tsx34
-rw-r--r--packages/create-astro/src/components/Help.tsx124
-rw-r--r--packages/create-astro/src/components/Install.tsx12
-rw-r--r--packages/create-astro/src/components/ProjectName.tsx8
-rw-r--r--packages/create-astro/src/components/Select.tsx34
-rw-r--r--packages/create-astro/src/components/Spacer.tsx2
-rw-r--r--packages/create-astro/src/components/Spinner.tsx170
-rw-r--r--packages/create-astro/src/components/Template.tsx2
13 files changed, 307 insertions, 262 deletions
diff --git a/packages/create-astro/src/components/App.tsx b/packages/create-astro/src/components/App.tsx
index fd9192bb6..deb9b252a 100644
--- a/packages/create-astro/src/components/App.tsx
+++ b/packages/create-astro/src/components/App.tsx
@@ -1,4 +1,4 @@
-import React, {FC, useEffect} from 'react';
+import React, { FC, useEffect } from 'react';
import { prepareTemplate, isEmpty, emptyDir } from '../utils';
import Header from './Header';
import Install from './Install';
@@ -8,86 +8,91 @@ import Confirm from './Confirm';
import Finalize from './Finalize';
interface Context {
- use: 'npm'|'yarn';
- run: boolean;
- projectExists?: boolean;
- force?: boolean;
- projectName?: string;
- template?: string;
- templates: string[];
- ready?: boolean;
+ use: 'npm' | 'yarn';
+ run: boolean;
+ projectExists?: boolean;
+ force?: boolean;
+ projectName?: string;
+ template?: string;
+ templates: string[];
+ ready?: boolean;
}
const getStep = ({ projectName, projectExists: exists, template, force, ready }: Context) => {
- switch (true) {
- case !projectName: return {
- key: 'projectName',
- Component: ProjectName
- };
- case projectName && exists === true && typeof force === 'undefined': return {
- key: 'force',
- Component: Confirm
- }
- case (exists === false || force) && !template: return {
- key: 'template',
- Component: Template
- };
- case !ready: return {
- key: 'install',
- Component: Install
- };
- default: return {
- key: 'final',
- Component: Finalize
- }
- }
-}
+ switch (true) {
+ case !projectName:
+ return {
+ key: 'projectName',
+ Component: ProjectName,
+ };
+ case projectName && exists === true && typeof force === 'undefined':
+ return {
+ key: 'force',
+ Component: Confirm,
+ };
+ case (exists === false || force) && !template:
+ return {
+ key: 'template',
+ Component: Template,
+ };
+ case !ready:
+ return {
+ key: 'install',
+ Component: Install,
+ };
+ default:
+ return {
+ key: 'final',
+ Component: Finalize,
+ };
+ }
+};
const App: FC<{ context: Context }> = ({ context }) => {
- const [state, setState] = React.useState(context);
- const step = React.useRef(getStep(context));
- const onSubmit = (value: string|boolean) => {
- const { key } = step.current;
- const newState = { ...state, [key]: value };
- step.current = getStep(newState)
- setState(newState)
- }
+ const [state, setState] = React.useState(context);
+ const step = React.useRef(getStep(context));
+ const onSubmit = (value: string | boolean) => {
+ const { key } = step.current;
+ const newState = { ...state, [key]: value };
+ step.current = getStep(newState);
+ setState(newState);
+ };
- useEffect(() => {
- let isSubscribed = true
- if (state.projectName && typeof state.projectExists === 'undefined') {
- const newState = { ...state, projectExists: !isEmpty(state.projectName) };
- step.current = getStep(newState)
- if (isSubscribed) {
- setState(newState);
- }
- }
+ useEffect(() => {
+ let isSubscribed = true;
+ if (state.projectName && typeof state.projectExists === 'undefined') {
+ const newState = { ...state, projectExists: !isEmpty(state.projectName) };
+ step.current = getStep(newState);
+ if (isSubscribed) {
+ setState(newState);
+ }
+ }
- if (state.projectName && (state.projectExists === false || state.force) && state.template) {
- if (state.force) emptyDir(state.projectName);
- prepareTemplate(context.use, state.template, state.projectName).then(() => {
- if (isSubscribed) {
- setState(v => {
- const newState = {...v, ready: true };
- step.current = getStep(newState);
- return newState;
- });
- }
- });
- }
+ if (state.projectName && (state.projectExists === false || state.force) && state.template) {
+ if (state.force) emptyDir(state.projectName);
+ prepareTemplate(context.use, state.template, state.projectName).then(() => {
+ if (isSubscribed) {
+ setState((v) => {
+ const newState = { ...v, ready: true };
+ step.current = getStep(newState);
+ return newState;
+ });
+ }
+ });
+ }
- return () => {
- isSubscribed = false;
- }
- }, [state]);
- const { Component } = step.current;
+ return () => {
+ isSubscribed = false;
+ };
+ }, [state]);
+ const { Component } = step.current;
- return (
- <>
- <Header context={state}/>
- <Component context={state} onSubmit={onSubmit} />
- </>
- )
+ return (
+ <>
+ <Header context={state} />
+ <Component context={state} onSubmit={onSubmit} />
+ </>
+ );
};
export default App;
diff --git a/packages/create-astro/src/components/Confirm.tsx b/packages/create-astro/src/components/Confirm.tsx
index 1fd1aa862..84d83ed8f 100644
--- a/packages/create-astro/src/components/Confirm.tsx
+++ b/packages/create-astro/src/components/Confirm.tsx
@@ -31,7 +31,7 @@ const Confirm: FC<{ message?: any; context: any; onSubmit: (value: boolean) => v
items={[
{
value: false,
- label: 'no'
+ label: 'no',
},
{
value: true,
diff --git a/packages/create-astro/src/components/Emoji.tsx b/packages/create-astro/src/components/Emoji.tsx
index 3af9ae508..4a294f5db 100644
--- a/packages/create-astro/src/components/Emoji.tsx
+++ b/packages/create-astro/src/components/Emoji.tsx
@@ -2,4 +2,4 @@ import React from 'react';
import { Text } from 'ink';
import { isWin } from '../utils';
-export default ({ children }) => isWin() ? null : <Text>{children}</Text>
+export default ({ children }) => (isWin() ? null : <Text>{children}</Text>);
diff --git a/packages/create-astro/src/components/Exit.tsx b/packages/create-astro/src/components/Exit.tsx
index cc3096705..b108fb36f 100644
--- a/packages/create-astro/src/components/Exit.tsx
+++ b/packages/create-astro/src/components/Exit.tsx
@@ -2,8 +2,11 @@ import React, { FC } from 'react';
import { Box, Text } from 'ink';
import { isDone } from '../utils';
-const Exit: FC<{ didError?: boolean }> = ({ didError }) => isDone ? null : <Box marginTop={1} display="flex">
- <Text color={didError ? "#FF1639" : "#FFBE2D"}>[abort]</Text>
- <Text> astro cancelled</Text>
-</Box>
+const Exit: FC<{ didError?: boolean }> = ({ didError }) =>
+ isDone ? null : (
+ <Box marginTop={1} display="flex">
+ <Text color={didError ? '#FF1639' : '#FFBE2D'}>[abort]</Text>
+ <Text> astro cancelled</Text>
+ </Box>
+ );
export default Exit;
diff --git a/packages/create-astro/src/components/Finalize.tsx b/packages/create-astro/src/components/Finalize.tsx
index 8d2a2103a..933a8844e 100644
--- a/packages/create-astro/src/components/Finalize.tsx
+++ b/packages/create-astro/src/components/Finalize.tsx
@@ -7,21 +7,26 @@ const Finalize: FC<{ context: any }> = ({ context: { use, projectName } }) => {
cancelProcessListeners();
process.exit(0);
}, []);
-
- return <>
+
+ return (
+ <>
<Box display="flex">
<Text color="#17C083">{'[ yes ]'}</Text>
- <Text> Project initialized at <Text color="#3894FF">./{projectName}</Text></Text>
+ <Text>
+ {' '}
+ Project initialized at <Text color="#3894FF">./{projectName}</Text>
+ </Text>
</Box>
<Box display="flex" marginY={1}>
<Text dimColor>{'[ tip ]'}</Text>
<Box display="flex" marginLeft={1} flexDirection="column">
- <Text>Get started by running</Text>
- <Text color="#3894FF">cd ./{projectName}</Text>
- <Text color="#3894FF">{use} start</Text>
+ <Text>Get started by running</Text>
+ <Text color="#3894FF">cd ./{projectName}</Text>
+ <Text color="#3894FF">{use} start</Text>
</Box>
</Box>
- </>;
+ </>
+ );
};
export default Finalize;
diff --git a/packages/create-astro/src/components/Header.tsx b/packages/create-astro/src/components/Header.tsx
index 1d894a60e..0684d1b3c 100644
--- a/packages/create-astro/src/components/Header.tsx
+++ b/packages/create-astro/src/components/Header.tsx
@@ -2,19 +2,27 @@ import React from 'react';
import { Box, Text } from 'ink';
const getMessage = ({ projectName, template }) => {
- switch (true) {
- case !projectName: return <Text dimColor>Gathering mission details</Text>;
- case !template: return <Text dimColor>Optimizing navigational system</Text>;
- default: return <Text color="black" backgroundColor="white"> {projectName} </Text>
- }
-}
+ switch (true) {
+ case !projectName:
+ return <Text dimColor>Gathering mission details</Text>;
+ case !template:
+ return <Text dimColor>Optimizing navigational system</Text>;
+ default:
+ return (
+ <Text color="black" backgroundColor="white">
+ {' '}
+ {projectName}{' '}
+ </Text>
+ );
+ }
+};
const Header: React.FC<{ context: any }> = ({ context }) => (
- <Box width={48} display="flex" marginY={1}>
- <Text backgroundColor="#882DE7" color="white">{' astro '}</Text>
- <Box marginLeft={1}>
- {getMessage(context)}
- </Box>
- </Box>
-)
+ <Box width={48} display="flex" marginY={1}>
+ <Text backgroundColor="#882DE7" color="white">
+ {' astro '}
+ </Text>
+ <Box marginLeft={1}>{getMessage(context)}</Box>
+ </Box>
+);
export default Header;
diff --git a/packages/create-astro/src/components/Help.tsx b/packages/create-astro/src/components/Help.tsx
index 88fcf5633..5991664f1 100644
--- a/packages/create-astro/src/components/Help.tsx
+++ b/packages/create-astro/src/components/Help.tsx
@@ -2,61 +2,79 @@ import React, { FC } from 'react';
import { Box, Text } from 'ink';
import { ARGS, ARG } from '../config';
-const Type: FC<{ type: any, enum?: string[] }> = ({ type, enum: e }) => {
- if (type === Boolean) {
- return <>
- <Text color="#3894FF">true</Text>
- <Text dimColor>|</Text>
- <Text color="#3894FF">false</Text>
- </>
- }
- if (e?.length > 0) {
- return <>
- {e.map((item, i, { length: len}) => {
- if (i !== len - 1) {
- return <Box key={item}>
- <Text color="#17C083">{item}</Text>
- <Text dimColor>|</Text>
- </Box>
- }
-
- return <Text color="#17C083" key={item}>{item}</Text>
- })}
- </>
- }
-
- return <Text color="#3894FF">string</Text>;
-}
-
-const Command: FC<{ name: string, info: ARG }> = ({ name, info: { alias, description, type, enum: e } }) => {
+const Type: FC<{ type: any; enum?: string[] }> = ({ type, enum: e }) => {
+ if (type === Boolean) {
return (
- <Box display="flex" alignItems="flex-start">
- <Box width={24} display="flex" flexGrow={0}>
- <Text color="whiteBright">--{name}</Text>{alias && <Text dimColor> -{alias}</Text>}
- </Box>
- <Box width={24}>
- <Type type={type} enum={e} />
- </Box>
- <Box>
- <Text>{description}</Text>
- </Box>
- </Box>
+ <>
+ <Text color="#3894FF">true</Text>
+ <Text dimColor>|</Text>
+ <Text color="#3894FF">false</Text>
+ </>
);
-}
-
-const Help: FC<{ context: any }> = ({ context: { templates }}) => {
+ }
+ if (e?.length > 0) {
return (
- <>
- <Box width={48} display="flex" marginY={1}>
- <Text backgroundColor="#882DE7" color="white">{' astro '}</Text>
- <Box marginLeft={1}>
- <Text color="black" backgroundColor="white"> help </Text>
- </Box>
- </Box>
- <Box marginBottom={1} marginLeft={2} display="flex" flexDirection="column">
- {Object.entries(ARGS).map(([name, info]) => <Command key={name} name={name} info={name === 'template' ? { ...info, enum: templates.map(({ value }) => value) } : info} /> )}
- </Box>
- </>
- )
+ <>
+ {e.map((item, i, { length: len }) => {
+ if (i !== len - 1) {
+ return (
+ <Box key={item}>
+ <Text color="#17C083">{item}</Text>
+ <Text dimColor>|</Text>
+ </Box>
+ );
+ }
+
+ return (
+ <Text color="#17C083" key={item}>
+ {item}
+ </Text>
+ );
+ })}
+ </>
+ );
+ }
+
+ return <Text color="#3894FF">string</Text>;
+};
+
+const Command: FC<{ name: string; info: ARG }> = ({ name, info: { alias, description, type, enum: e } }) => {
+ return (
+ <Box display="flex" alignItems="flex-start">
+ <Box width={24} display="flex" flexGrow={0}>
+ <Text color="whiteBright">--{name}</Text>
+ {alias && <Text dimColor> -{alias}</Text>}
+ </Box>
+ <Box width={24}>
+ <Type type={type} enum={e} />
+ </Box>
+ <Box>
+ <Text>{description}</Text>
+ </Box>
+ </Box>
+ );
+};
+
+const Help: FC<{ context: any }> = ({ context: { templates } }) => {
+ return (
+ <>
+ <Box width={48} display="flex" marginY={1}>
+ <Text backgroundColor="#882DE7" color="white">
+ {' astro '}
+ </Text>
+ <Box marginLeft={1}>
+ <Text color="black" backgroundColor="white">
+ {' '}
+ help{' '}
+ </Text>
+ </Box>
+ </Box>
+ <Box marginBottom={1} marginLeft={2} display="flex" flexDirection="column">
+ {Object.entries(ARGS).map(([name, info]) => (
+ <Command key={name} name={name} info={name === 'template' ? { ...info, enum: templates.map(({ value }) => value) } : info} />
+ ))}
+ </Box>
+ </>
+ );
};
export default Help;
diff --git a/packages/create-astro/src/components/Install.tsx b/packages/create-astro/src/components/Install.tsx
index d9d2bc9b6..776c0cc34 100644
--- a/packages/create-astro/src/components/Install.tsx
+++ b/packages/create-astro/src/components/Install.tsx
@@ -4,16 +4,20 @@ import Spacer from './Spacer';
import Spinner from './Spinner';
const Install: FC<{ context: any }> = ({ context: { use } }) => {
- return <>
+ return (
+ <>
<Box display="flex">
- <Spinner/>
+ <Spinner />
<Text> Initiating launch sequence...</Text>
</Box>
<Box>
<Spacer />
- <Text color="white" dimColor>(aka running <Text color="#17C083">{use === 'npm' ? 'npm install' : 'yarn'}</Text>)</Text>
+ <Text color="white" dimColor>
+ (aka running <Text color="#17C083">{use === 'npm' ? 'npm install' : 'yarn'}</Text>)
+ </Text>
</Box>
- </>;
+ </>
+ );
};
export default Install;
diff --git a/packages/create-astro/src/components/ProjectName.tsx b/packages/create-astro/src/components/ProjectName.tsx
index 87b976494..d09a33d82 100644
--- a/packages/create-astro/src/components/ProjectName.tsx
+++ b/packages/create-astro/src/components/ProjectName.tsx
@@ -8,8 +8,9 @@ const { default: Input } = TextInput;
const ProjectName: FC<{ onSubmit: (value: string) => void }> = ({ onSubmit }) => {
const [value, setValue] = React.useState('');
const handleSubmit = (v: string) => onSubmit(v);
-
- return <>
+
+ return (
+ <>
<Box display="flex">
<Text color="#17C083">{'[query]'}</Text>
<Text> What is your project name?</Text>
@@ -18,7 +19,8 @@ const ProjectName: FC<{ onSubmit: (value: string) => void }> = ({ onSubmit }) =>
<Spacer />
<Input value={value} onChange={setValue} onSubmit={handleSubmit} placeholder="my-project" />
</Box>
- </>;
+ </>
+ );
};
export default ProjectName;
diff --git a/packages/create-astro/src/components/Select.tsx b/packages/create-astro/src/components/Select.tsx
index acf8eb29f..08d588f4f 100644
--- a/packages/create-astro/src/components/Select.tsx
+++ b/packages/create-astro/src/components/Select.tsx
@@ -5,28 +5,28 @@ import { Text, Box } from 'ink';
const { default: Select } = SelectInput;
interface Props {
- isSelected?: boolean;
- label: string;
- description?: string;
+ isSelected?: boolean;
+ label: string;
+ description?: string;
}
-const Indicator: FC<Props> = ({ isSelected }) => isSelected ? <Text color="#3894FF">[ </Text> : <Text> </Text>
-const Item: FC<Props> = ({isSelected = false, label, description }) => (
- <Box display="flex">
- <Text color={isSelected ? '#3894FF' : 'white'} dimColor={!isSelected}>{label}</Text>
- {isSelected && description && typeof description === 'string' && <Text> {description}</Text>}
- {isSelected && description && typeof description !== 'string' && <Box marginLeft={1}>{description}</Box>}
- </Box>
+const Indicator: FC<Props> = ({ isSelected }) => (isSelected ? <Text color="#3894FF">[ </Text> : <Text> </Text>);
+const Item: FC<Props> = ({ isSelected = false, label, description }) => (
+ <Box display="flex">
+ <Text color={isSelected ? '#3894FF' : 'white'} dimColor={!isSelected}>
+ {label}
+ </Text>
+ {isSelected && description && typeof description === 'string' && <Text> {description}</Text>}
+ {isSelected && description && typeof description !== 'string' && <Box marginLeft={1}>{description}</Box>}
+ </Box>
);
interface SelectProps {
- items: { value: string|number|boolean, label: string, description?: any }[]
- onSelect(value: string|number|boolean): void;
+ items: { value: string | number | boolean; label: string; description?: any }[];
+ onSelect(value: string | number | boolean): void;
}
const CustomSelect: FC<SelectProps> = ({ items, onSelect }) => {
- const handleSelect = ({ value }) => onSelect(value);
- return (
- <Select indicatorComponent={Indicator} itemComponent={Item} items={items} onSelect={handleSelect} />
- )
-}
+ const handleSelect = ({ value }) => onSelect(value);
+ return <Select indicatorComponent={Indicator} itemComponent={Item} items={items} onSelect={handleSelect} />;
+};
export default CustomSelect;
diff --git a/packages/create-astro/src/components/Spacer.tsx b/packages/create-astro/src/components/Spacer.tsx
index 1e4e14561..15ef71d7c 100644
--- a/packages/create-astro/src/components/Spacer.tsx
+++ b/packages/create-astro/src/components/Spacer.tsx
@@ -1,5 +1,5 @@
import React, { FC } from 'react';
import { Box } from 'ink';
-const Spacer: FC<{ width?: number }> = ({ width = 8 }) => <Box width={width} />
+const Spacer: FC<{ width?: number }> = ({ width = 8 }) => <Box width={width} />;
export default Spacer;
diff --git a/packages/create-astro/src/components/Spinner.tsx b/packages/create-astro/src/components/Spinner.tsx
index 2d3335e1c..fa62b614f 100644
--- a/packages/create-astro/src/components/Spinner.tsx
+++ b/packages/create-astro/src/components/Spinner.tsx
@@ -6,14 +6,14 @@ const Spinner: FC<{ type?: keyof typeof spinners }> = ({ type = 'countdown' }) =
const [i, setI] = useState(0);
useEffect(() => {
const _ = setInterval(() => {
- setI(v => (v < frames.length - 1) ? v + 1 : 0)
- }, interval)
+ setI((v) => (v < frames.length - 1 ? v + 1 : 0));
+ }, interval);
return () => clearInterval(_);
- }, [])
+ }, []);
- return frames[i]
-}
+ return frames[i];
+};
const spinners = {
countdown: {
@@ -35,73 +35,73 @@ const spinners = {
<Text backgroundColor="#882DE7">{' '}</Text>
</Box>,
<Box display="flex">
- <Text backgroundColor="#6858F1">{' '}</Text>
+ <Text backgroundColor="#6858F1"> </Text>
<Text backgroundColor="#882DE7">{' '}</Text>
</Box>,
<Box display="flex">
- <Text backgroundColor="#5076F9">{' '}</Text>
- <Text backgroundColor="#6858F1">{' '}</Text>
+ <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="#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="#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="#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 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">
+ <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="#23B1AF"> </Text>
+ <Text backgroundColor="#2CA5D2"> </Text>
+ <Text backgroundColor="#3894FF"> </Text>
+ <Text backgroundColor="#5076F9"> </Text>
+ <Text backgroundColor="#6858F1"> </Text>
</Box>,
- <Box display="flex">
+ <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="#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>
+ <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>
+ <Text backgroundColor="#23B1AF"> </Text>
+ <Text backgroundColor="#2CA5D2"> </Text>
</Box>,
<Box display="flex">
<Text backgroundColor="#17C083">{' '}</Text>
- <Text backgroundColor="#23B1AF">{' '}</Text>
+ <Text backgroundColor="#23B1AF"> </Text>
</Box>,
<Box display="flex">
<Text backgroundColor="#17C083">{' '}</Text>
@@ -122,79 +122,79 @@ const spinners = {
<Text backgroundColor="#17C083">{' '}</Text>
</Box>,
<Box display="flex">
- <Text backgroundColor="#23B1AF">{' '}</Text>
+ <Text backgroundColor="#23B1AF"> </Text>
<Text backgroundColor="#17C083">{' '}</Text>
</Box>,
<Box display="flex">
- <Text backgroundColor="#2CA5D2">{' '}</Text>
- <Text backgroundColor="#23B1AF">{' '}</Text>
+ <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="#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="#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="#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>
+ <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>
+ <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>
+ <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>
+ <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>
+ <Text backgroundColor="#6858F1"> </Text>
+ <Text backgroundColor="#5076F9"> </Text>
</Box>,
<Box display="flex">
<Text backgroundColor="#882DE7">{' '}</Text>
- <Text backgroundColor="#6858F1">{' '}</Text>
+ <Text backgroundColor="#6858F1"> </Text>
</Box>,
<Box display="flex">
<Text backgroundColor="#882DE7">{' '}</Text>
</Box>,
- ]
- }
-}
+ ],
+ },
+};
export default Spinner;
diff --git a/packages/create-astro/src/components/Template.tsx b/packages/create-astro/src/components/Template.tsx
index 7fbab035d..23ff905f2 100644
--- a/packages/create-astro/src/components/Template.tsx
+++ b/packages/create-astro/src/components/Template.tsx
@@ -3,7 +3,7 @@ import { Box, Text } from 'ink';
import Spacer from './Spacer';
import Select from './Select';
-const Template: FC<{ context: any, onSubmit: (value: string) => void }> = ({ context: { templates }, onSubmit }) => {
+const Template: FC<{ context: any; onSubmit: (value: string) => void }> = ({ context: { templates }, onSubmit }) => {
const items = templates.map(({ title: label, ...rest }) => ({ ...rest, label }));
return (
generated by cgit v1.2.3 (git 2.46.0) at 2025-08-10 06:13:27 +0000