Фикс верстки на экране Backup
This commit is contained in:
@@ -5,6 +5,7 @@ import { useState, useEffect } from "react";
|
||||
interface TextChainProps {
|
||||
text: string;
|
||||
mt?: MantineSize;
|
||||
withoutPaper?: boolean;
|
||||
}
|
||||
|
||||
export function TextChain(props : TextChainProps) {
|
||||
@@ -26,31 +27,41 @@ export function TextChain(props : TextChainProps) {
|
||||
});
|
||||
}, [text]);
|
||||
|
||||
const grid = (
|
||||
<SimpleGrid cols={3} spacing="xs">
|
||||
{text.split(" ").map((v, i) => {
|
||||
return (
|
||||
<Box
|
||||
key={i}
|
||||
className={classes.wordBox}
|
||||
style={{
|
||||
opacity: mounted[i] ? 1 : 0,
|
||||
transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
|
||||
transition: 'opacity 300ms ease, transform 300ms ease',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
|
||||
<Text size="sm" fw={500}>{v}</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
);
|
||||
|
||||
return (
|
||||
!props.withoutPaper ? (
|
||||
<Box mt={props.mt}>
|
||||
<Box className={classes.displayArea}>
|
||||
<Text size="sm" mb="md" c="dimmed">
|
||||
Your seed phrase:
|
||||
</Text>
|
||||
<SimpleGrid cols={3} spacing="xs">
|
||||
{text.split(" ").map((v, i) => {
|
||||
return (
|
||||
<Box
|
||||
key={i}
|
||||
className={classes.wordBox}
|
||||
style={{
|
||||
opacity: mounted[i] ? 1 : 0,
|
||||
transform: mounted[i] ? 'scale(1)' : 'scale(0.9)',
|
||||
transition: 'opacity 300ms ease, transform 300ms ease',
|
||||
}}
|
||||
>
|
||||
<Text size="xs" c="dimmed" mr={4}>{i + 1}.</Text>
|
||||
<Text size="sm" fw={500}>{v}</Text>
|
||||
</Box>
|
||||
);
|
||||
})}
|
||||
</SimpleGrid>
|
||||
{grid}
|
||||
</Box>
|
||||
</Box>
|
||||
) : (
|
||||
<Box mt={props.mt}>
|
||||
{grid}
|
||||
</Box>
|
||||
)
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user