52 lines
1.3 KiB
TypeScript
52 lines
1.3 KiB
TypeScript
|
import React from "react"
|
||
|
|
import { Box, Flex } from "@chakra-ui/react"
|
||
|
|
import { useMatches } from "@remix-run/react"
|
||
|
|
|
||
|
|
import { ProfileDrawer } from "~/components/Nav/ProfileDrawer"
|
||
|
|
import { Splash } from "~/components/Splash/Splash"
|
||
|
|
import { Thingtime } from "~/components/Thingtime/Thingtime"
|
||
|
|
import { ThingtimeDemo } from "~/components/Thingtime/ThingtimeDemo"
|
||
|
|
import { useThingtime } from "~/components/Thingtime/useThingtime"
|
||
|
|
import { GradientPath } from "~/gp/GradientPath"
|
||
|
|
|
||
|
|
export default function Index() {
|
||
|
|
const { getThingtime } = useThingtime()
|
||
|
|
|
||
|
|
const matches = useMatches()
|
||
|
|
const location = React.useMemo(() => {
|
||
|
|
return matches[matches.length - 1]
|
||
|
|
}, [matches])
|
||
|
|
|
||
|
|
const path = React.useMemo(() => {
|
||
|
|
const pathStepOne = location?.pathname?.replace("/things/", "")
|
||
|
|
|
||
|
|
const path = pathStepOne?.replace(/\//g, ".")
|
||
|
|
return path
|
||
|
|
}, [location?.pathname])
|
||
|
|
|
||
|
|
const thing = React.useMemo(() => {
|
||
|
|
// remove /things/ from path
|
||
|
|
|
||
|
|
const ret = getThingtime(path)
|
||
|
|
|
||
|
|
return ret
|
||
|
|
}, [path, getThingtime])
|
||
|
|
|
||
|
|
return (
|
||
|
|
<Flex
|
||
|
|
alignItems="center"
|
||
|
|
justifyContent="center"
|
||
|
|
flexDirection="column"
|
||
|
|
maxWidth="100%"
|
||
|
|
>
|
||
|
|
<Thingtime
|
||
|
|
path={path}
|
||
|
|
thing={thing}
|
||
|
|
chakras={{ marginY: 200 }}
|
||
|
|
width="600px"
|
||
|
|
></Thingtime>
|
||
|
|
<ProfileDrawer></ProfileDrawer>
|
||
|
|
</Flex>
|
||
|
|
)
|
||
|
|
}
|