From cca6f44b8e49b1439710f3e1e9cbff8a7a0f6c94 Mon Sep 17 00:00:00 2001
From: Nikolaj Frey <nikolaj@dotdev.com.au>
Date: Mon, 10 Jul 2023 10:37:50 +1000
Subject: [PATCH] feat: feature/rainbow-component Added Ode

---
 remix/app/components/Thingtime/Thingtime.tsx |  9 ++--
 remix/app/routes/index.tsx                   |  1 +
 remix/app/routes/ode.tsx                     | 47 ++++++++++++++++++++
 3 files changed, 54 insertions(+), 3 deletions(-)
 create mode 100644 remix/app/routes/ode.tsx

diff --git a/remix/app/components/Thingtime/Thingtime.tsx b/remix/app/components/Thingtime/Thingtime.tsx
index a280b77..0447cd7 100644
--- a/remix/app/components/Thingtime/Thingtime.tsx
+++ b/remix/app/components/Thingtime/Thingtime.tsx
@@ -64,10 +64,12 @@ export const Thingtime = (props) => {
 
   const renderableValue = React.useMemo(() => {
     if (type === "string") {
-      if (!thing) {
+      const trimmed = thing.trim()
+
+      if (!trimmed) {
         return "Empty string"
       }
-      return thing
+      return trimmed
     } else if (type === "number") {
       return thing
     } else if (type === "boolean") {
@@ -257,7 +259,8 @@ export const Thingtime = (props) => {
       <Flex
         position="relative"
         flexDirection="column"
-        width="500px"
+        // width="500px"
+        width={props?.width || props?.w || "100%"}
         maxWidth="100%"
         paddingRight={pr}
         onMouseEnter={handleMouseEvent}
diff --git a/remix/app/routes/index.tsx b/remix/app/routes/index.tsx
index 3bcd08b..edb3988 100644
--- a/remix/app/routes/index.tsx
+++ b/remix/app/routes/index.tsx
@@ -21,6 +21,7 @@ export default function Index() {
       <Splash></Splash>
       <Thingtime
         marginBottom={200}
+        width="500px"
         path="Content"
         valuePl={0}
         thing={thingtime["Content"]}
diff --git a/remix/app/routes/ode.tsx b/remix/app/routes/ode.tsx
new file mode 100644
index 0000000..60a1932
--- /dev/null
+++ b/remix/app/routes/ode.tsx
@@ -0,0 +1,47 @@
+import { Box, Center, Flex } from "@chakra-ui/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 { thingtime } = useThingtime()
+
+  const ode = {
+    "Ode to Thingtime": `
+    
+      In the infinite expanses of the digital universe, there exists a radiant realm, a pixel paradise known as Thing Time. Here, a cosmic canvas unfurls, inviting explorers from far and wide to etch their ideas, thoughts, and dreams into its ever-changing tapestry.
+
+      As you step into Thing Time, you find yourself in a world of binary bliss, where every pixel pulses with possibility. The air thrums with the hum of shared thought, each byte bending and reshaping to mirror the collective wisdom of countless minds.
+
+      The landscape morphs and molds to the whims of its inhabitants, each creating, collaborating, and curating their unique contributions. Trees of code reach their branches high into the cloud, blooming with arrays of astral ideas, their roots deep in the fertile ground of shared understanding.
+
+      Time here does not tick in minutes or hours, but in the rhythm of creation, inspiration, and exploration. And it's not just about your time - it's about our time, a communal clock synchronizing the heartbeats of thinkers, dreamers, and doers.
+
+      In Thing Time, we don't just observe - we participate, contribute, and shape. We paint with the brush of JavaScript, sketching out our thoughts in lines of lucid links and hyper harmonies. Together, we weave stories and knowledge into a vivid, ever-evolving tapestry of shared experience.
+
+      That's Thing Time - a dance of data, a symphony of syntax, a carnival of creation. An epic element of the digital era, forever inviting you to join in the melody of shared imagination. This is your call to the creative, a beacon in the binary, your invite to the infinite. This is Thing Time. Welcome.
+      
+      - ChatGPT 4.0
+    
+    `,
+  }
+
+  return (
+    <Flex
+      alignItems="center"
+      justifyContent="center"
+      flexDirection="column"
+      maxWidth="100%"
+    >
+      {/* <Box paddingTop={200}></Box> */}
+      {/* <Splash></Splash> */}
+      <Center width="100vw" maxWidth="100%" minHeight="100vh" paddingY={200}>
+        <Thingtime width="800px" valuePl={0} thing={ode}></Thingtime>
+      </Center>
+    </Flex>
+  )
+}