56 lines
1.9 KiB
TypeScript
56 lines
1.9 KiB
TypeScript
import { Box, MantineSize, Text, SimpleGrid } from "@mantine/core";
|
|
import classes from './TextChain.module.css'
|
|
import { useState, useEffect } from "react";
|
|
|
|
interface TextChainProps {
|
|
text: string;
|
|
mt?: MantineSize;
|
|
}
|
|
|
|
export function TextChain(props : TextChainProps) {
|
|
const text = props.text;
|
|
const [mounted, setMounted] = useState<boolean[]>([]);
|
|
|
|
useEffect(() => {
|
|
const words = text.split(" ");
|
|
setMounted(new Array(words.length).fill(false));
|
|
|
|
words.forEach((_, index) => {
|
|
setTimeout(() => {
|
|
setMounted(prev => {
|
|
const newMounted = [...prev];
|
|
newMounted[index] = true;
|
|
return newMounted;
|
|
});
|
|
}, index * 50);
|
|
});
|
|
}, [text]);
|
|
|
|
return (
|
|
<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>
|
|
</Box>
|
|
</Box>
|
|
)
|
|
} |