feat: main

remix/app/components/Thingtime/ThingtimeDemo.tsx

@@ -1,40 +1,41 @@
-import React from 'react'
-import { Thingtime } from './Thingtime'
-import { Flex } from '@chakra-ui/react'
+import React from "react"
+import { Flex } from "@chakra-ui/react"
 
-export const ThingtimeDemo = props => {
+import { Thingtime } from "./Thingtime"
+
+export const ThingtimeDemo = (props) => {
   const thing = {
-    Suggestion: 'Press ctrl/cmd + P',
-    Name: 'thingtime',
+    Suggestion: "Press ctrl/cmd + P",
+    Name: "thingtime",
     Description: `
       Thing Time is a versatile online platform that empowers users to organize, customize, and manage different types of data. By generalizing the concept of social media feeds, Thing Time allows users to switch between various data schemas, essentially providing them with personalized feeds and organizational tools. It's like a combination of Facebook, Twitter, and Evernote, but with the user in control of what kind of data they want to see and manage. Whether it's social posts, marketplace listings, or personal notes, Thing Time puts the power of data organization and customization in the user’s hands.
     `,
-    'Image URL': 'https://google.com/images',
-    Price: '$100',
+    "Image URL": "https://google.com/images",
+    Price: "$100",
     QTY: 1,
     ID: 123,
     Nested: {
       data: {
         is: {
-          fun: "Isn't it?"
-        }
-      }
+          fun: "Isn't it?",
+        },
+      },
     },
-    Array: ['one', 'two', 'three'],
-    'Array of Objects': [
+    Array: ["one", "two", "three"],
+    "Array of Objects": [
       {
-        name: 'one'
+        name: "one",
       },
       {
-        name: 'two'
+        name: "two",
       },
       {
-        name: 'three'
-      }
+        name: "three",
+      },
     ],
-    '...unique1': "I'm unique",
-    '...unique2': "I'm unique",
-    '...unique3': "I'm unique"
+    "...unique1": "I'm unique",
+    "...unique2": "I'm unique",
+    "...unique3": "I'm unique",
   }
 
   const [demoThing, setDemoThing] = React.useState(thing)
@@ -46,8 +47,8 @@ export const ThingtimeDemo = props => {
   // return null
 
   return (
-    <Flex maxW='100%' pb={40}>
-      <Thingtime thing={demoThing}></Thingtime>
+    <Flex maxWidth="100%" paddingBottom={40}>
+      <Thingtime width="500px" thing={demoThing}></Thingtime>
     </Flex>
   )
 }