Add demo page for experiments

Author: Adam Plesnik

docs/src/components/Code.tsx

@@ -0,0 +1,13 @@
+import { PropsWithChildren } from 'react'
+
+const Code = ({ children }: PropsWithChildren<InlineCodeProps>) => (
+  <pre className="font-mono whitespace-nowrap bg-fuchsia-200/40 p-1 px-1 py-0.5 text-sm dark:bg-indigo-200/20 dark:text-zinc-200 inline-block">
+    {children}
+  </pre>
+)
+
+export interface InlineCodeProps {
+  children: PropsWithChildren
+}
+
+export default Code

docs/src/components/DemoAnimationExampleRow.tsx

@@ -0,0 +1,35 @@
+import { addWithSpace } from '../utils/addWithSpace'
+import Code from './Code'
+
+const DemoAnimationExampleRow = ({
+  animations,
+  bgColor,
+  timeline,
+}: DemoAnimationExampleRowProps) => {
+  const animationClasses = animations.split(' ')
+  return (
+    <div className="flex flex-col">
+      <div className="flex flex-wrap gap-1 w-96 flex-shrink-0">
+        {animationClasses.map((animation) => (
+          <Code key={animation}>.{animation}</Code>
+        ))}
+      </div>
+      <div
+        className={
+          'animate-width w-0 h-4' +
+          addWithSpace(animations) +
+          addWithSpace(bgColor) +
+          addWithSpace(timeline)
+        }
+      ></div>
+    </div>
+  )
+}
+
+export interface DemoAnimationExampleRowProps {
+  animations: string
+  bgColor: string
+  timeline: string
+}
+
+export default DemoAnimationExampleRow

docs/src/components/DemoPlaceholderContent.tsx

@@ -0,0 +1,25 @@
+import { PropsWithChildren } from 'react'
+import { addWithSpace } from '../utils/addWithSpace'
+
+const DemoPlaceholderContent = ({
+  children,
+  className = '',
+}: PropsWithChildren<DemoWrapperProps>) => {
+  return (
+    <div
+      className={
+        'm-4 rounded-lg border border-dashed border-fuchsia-300 p-8 dark:border-cyan-900' +
+        addWithSpace(className)
+      }
+    >
+      {children}
+    </div>
+  )
+}
+
+export interface DemoWrapperProps {
+  children: PropsWithChildren
+  className?: string
+}
+
+export default DemoPlaceholderContent

docs/src/components/DemoWrapper.tsx

@@ -0,0 +1,15 @@
+import { PropsWithChildren } from 'react'
+
+const DemoWrapper = ({ children }: PropsWithChildren<DemoWrapperProps>) => {
+  return (
+    <div className="relative mb-4 h-96 overflow-y-auto overflow-x-hidden rounded-lg border border-zinc-300 bg-zinc-100/70 dark:border-zinc-700 dark:bg-black/10">
+      {children}
+    </div>
+  )
+}
+
+export interface DemoWrapperProps {
+  children: PropsWithChildren
+}
+
+export default DemoWrapper

docs/src/components/Paragraph.tsx

@@ -0,0 +1,31 @@
+import { PropsWithChildren } from 'react'
+
+const Paragraph = ({
+  children,
+  className = '',
+  size = 'regular',
+}: PropsWithChildren<ParagraphProps>) => {
+  return (
+    <p
+      className={
+        'mb-5 w-full ' +
+        (size === 'regular'
+          ? 'text-base leading-7'
+          : size === 'large'
+            ? 'text-lg'
+            : 'text-sm font-medium') +
+        (className && ` ${className}`)
+      }
+    >
+      {children}
+    </p>
+  )
+}
+
+export interface ParagraphProps {
+  children: PropsWithChildren
+  className?: string
+  size?: 'regular' | 'large' | 'small'
+}
+
+export default Paragraph

docs/src/components/Separator.tsx

@@ -0,0 +1,3 @@
+const Separator = () => <div className="h-px w-full bg-current opacity-10 dark:opacity-20"></div>
+
+export default Separator

docs/src/components/Skeleton.tsx

@@ -0,0 +1,6 @@
+const Skeleton = ({ width = '200px' }) => {
+  return (
+    <div style={{ width: width }} className="mb-2 h-6 rounded-full bg-gray-200 dark:bg-slate-700" />
+  )
+}
+export default Skeleton

docs/src/css/keyframes.css

@@ -0,0 +1,17 @@
+@keyframes appear {
+  to {
+    width: auto;
+  }
+}
+
+@keyframes slide-from-left {
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes width {
+  to {
+    width: 100%;
+  }
+}

docs/src/index.css

@@ -1,11 +1,6 @@
+@import 'css/keyframes.css';
 @import 'css/prism.css';
 
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-
-@keyframes appear {
-  to {
-    width: auto;
-  }
-}

docs/src/main.tsx

@@ -3,13 +3,23 @@ import ReactDOM from 'react-dom/client'
 import { RouterProvider, createBrowserRouter } from 'react-router-dom'
 import Home from './pages/Home.tsx'
 import './index.css'
+import RangeDemo from './pages/RangeDemo.tsx'
 
 const router = createBrowserRouter([
   {
     path: '/',
     element: <Home />,
     errorElement: <Home />,
   },
+  {
+    path: '/demo',
+    children: [
+      {
+        path: 'range',
+        element: <RangeDemo />,
+      },
+    ],
+  },
 ])
 
 ReactDOM.createRoot(document.getElementById('root')!).render(