Tune the demo

Author: Adam Plesnik

src/demos/TimelineOverrideDemo.tsx

@@ -1,24 +1,36 @@
 import Code from '../components/Code'
+import Skeleton from '../components/Skeleton'
 import DemoWrapper from './DemoWrapper'
 
+const skeletonCollection = ['46%', '100%', '92%', '100%', '93%', '87%', '93%', '87%', '55%']
+
 const TimelineOverrideDemo = () => {
   return (
-    <DemoWrapper className="max-h-60 sm:max-h-48" actionButton>
-      <div className="sticky top-0  flex flex-col gap-4 p-8">
-        <div className="flex flex-1 items-center">
+    <DemoWrapper className="" actionButton>
+      <div className="sticky top-0  flex flex-col gap-4 p-8 sm:flex-row">
+        <div className="flex items-center">
           <span className="animate-opacity rounded-lg bg-sky-500/40 p-4 dark:bg-fuchsia-300/60">
             <Code>timeline</Code> <span className="text-sm font-medium">before</span>{' '}
             <Code>animate-opacity</Code>
           </span>
         </div>
-        <div className="flex flex-1 items-center">
+        <div className="flex items-center">
           <span className="animate-opacity rounded-lg bg-sky-500/40 p-4 timeline dark:bg-fuchsia-300/60">
             <Code>animate-opacity</Code> <span className="text-sm font-medium">before</span>{' '}
             <Code>timeline</Code>
           </span>
         </div>
       </div>
-      <div className="h-96"></div>
+      <div className="p-8">
+        {skeletonCollection.map((width, key) => (
+          <Skeleton width={width} key={key} />
+        ))}
+      </div>
+      <div className="px-8 pb-8">
+        {skeletonCollection.map((width, key) => (
+          <Skeleton width={width} key={key} />
+        ))}
+      </div>
     </DemoWrapper>
   )
 }