|
import React from 'react';
|
|
import { Flex } from '@chakra-ui/react';
|
|
import { useLocation } from '@remix-run/react';
|
|
|
|
import { Splash } from '~/components/Splash/Splash';
|
|
import { useThingtime } from '~/components/Thingtime/useThingtime';
|
|
|
|
export default function Index() {
|
|
const location = useLocation();
|
|
const { pathname } = location;
|
|
|
|
const strippedPathname = React.useMemo(() => {
|
|
// modify /rainbow/* to just *
|
|
|
|
const ret = pathname.split('/')[2];
|
|
|
|
if (ret) {
|
|
return decodeURI(ret);
|
|
}
|
|
|
|
return 'rainbow';
|
|
}, [pathname]);
|
|
|
|
const texts = React.useMemo(() => {
|
|
const ret = [strippedPathname];
|
|
|
|
return ret;
|
|
}, [strippedPathname]);
|
|
|
|
console.log('texts', texts);
|
|
|
|
return (
|
|
<Flex
|
|
sx={{
|
|
'::selection': {
|
|
background: 'transparent'
|
|
},
|
|
'::-moz-selection': {
|
|
background: 'transparent'
|
|
},
|
|
'*': {
|
|
'::selection': {
|
|
background: 'transparent'
|
|
},
|
|
'::-moz-selection': {
|
|
background: 'transparent'
|
|
}
|
|
},
|
|
'* grammarly-extension': {
|
|
display: 'none !important'
|
|
}
|
|
}}
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
flexDirection="column"
|
|
maxWidth="100%"
|
|
>
|
|
<Splash texts={texts} ce={true}></Splash>
|
|
</Flex>
|
|
);
|
|
}
|