feat: main

remix/app/components/Nav/Nav.tsx

@@ -18,8 +18,8 @@ export const Nav = props => {
         py={4}
         px={4}
       >
-        <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
-        <RainbowSkeleton></RainbowSkeleton>
+        {/* <RainbowSkeleton w='40px' ml='auto' mr={"4px"}></RainbowSkeleton>
+        <RainbowSkeleton></RainbowSkeleton> */}
       </Flex>
     </>
   )

remix/app/components/Splash/Splash.tsx

@@ -0,0 +1,11 @@
+import { TextAnimation1 } from '~/components/textAnimation1'
+import { Flex } from '@chakra-ui/react'
+
+export const Splash = props => {
+
+  return <Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
+
+    <TextAnimation1></TextAnimation1>
+    </Flex>
+  
+}

remix/app/components/Thingtime/Thingtime.tsx

@@ -0,0 +1,16 @@
+import React from "react"
+import { Box, Flex } from "@chakra-ui/react"
+
+export const Thingtime = props => {
+
+  const thing = React.useMemo(() => {
+    return props.thing
+  }, [props.thing])
+
+  return <Flex flexDir="column">
+    <pre>
+      {JSON.stringify(thing, null, 2)}
+    </pre>
+  </Flex>
+  
+}

remix/app/components/Thingtime/ThingtimeDemo.tsx

@@ -0,0 +1,20 @@
+import React from "react"
+import { Thingtime } from "./Thingtime"
+
+export const ThingtimeDemo = props => {
+
+  const thing = {
+    name: 'thing',
+    description: 'thing description',
+    image: 'thing image',
+    price: 100,
+    quantity: 1,
+    id: 1
+  }
+
+  const [demoThing, setDemoThing] = React.useState(thing)
+  
+  
+  return <Thingtime thing={demoThing}></Thingtime>
+
+}

remix/app/routes/index.tsx

@@ -1,9 +1,12 @@
 import { Flex } from '@chakra-ui/react'
-import { TextAnimation1 } from '~/components/textAnimation1'
+import { Splash } from '~/components/Splash/Splash'
+import { ThingtimeDemo } from '~/components/Thingtime/ThingtimeDemo'
+
 export default function Index () {
   return (
-    <Flex w='100vw' h='100vh' alignItems='center' justifyContent='center'>
-      <TextAnimation1 />
+    <Flex flexDir="column" alignItems='center' justifyContent='center'>
+      <Splash></Splash>
+      {/* <ThingtimeDemo></ThingtimeDemo> */}
     </Flex>
   )
 }

remix/package.json

@@ -3,7 +3,7 @@
   "sideEffects": false,
   "scripts": {
     "build": "remix build",
-    "dev": "remix dev --port 9000"
+    "dev": "remix dev --port 9999"
   },
   "dependencies": {
     "@chakra-ui/react": "^2.7.1",