Update components and add new file for order feature

website/app/[locale]/(root)/docs/align-items/components/Overview.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import syntaxes from '../syntaxes'
 import SyntaxTable from '~/components/SyntaxTable'
 import SyntaxTr from '~/components/SyntaxTr'

website/app/[locale]/(root)/docs/animation-direction/components/Overview.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import syntaxes from '../syntaxes'
 import SyntaxTable from '~/components/SyntaxTable'
 import SyntaxTr from '~/components/SyntaxTr'

website/app/[locale]/(root)/docs/animation-fill-mode/components/Overview.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import syntaxes from '../syntaxes'
 import SyntaxTable from '~/components/SyntaxTable'
 import SyntaxTr from '~/components/SyntaxTr'

website/app/[locale]/(root)/docs/float/components/Overview.tsx

@@ -1,5 +1,3 @@
-'use client'
-
 import syntaxes from '../syntaxes'
 import SyntaxTable from '~/components/SyntaxTable'
 import SyntaxTr from '~/components/SyntaxTr'

website/app/[locale]/(root)/docs/order/components/Basic.tsx

@@ -0,0 +1,25 @@
+import Code from 'websites/components/Code'
+import clsx from 'clsx'
+import Demo from 'websites/components/Demo'
+import DemoPanel from 'websites/components/DemoPanel'
+
+export default ({ className }: any) => {
+    return (
+        <>
+            <Demo>
+                <div className="flex gap:10">
+                    <div className="app-box neutral">1</div>
+                    <div className={clsx(className, 'app-box accent')}>2</div>
+                    <div className="app-box neutral">3</div>
+                </div>
+            </Demo>
+            <Code lang="html">{`
+                <div class="flex">
+                    <div>1</div>
+                    <div class="**${className}**">2</div>
+                    <div>3</div>
+                </div>
+            `}</Code>
+        </>
+    )
+}

website/app/[locale]/(root)/docs/order/components/Overview.tsx

@@ -1,33 +1,18 @@
-'use client'
-
-import Demo from 'websites/components/Demo'
-import Code from 'websites/components/Code'
-import SyntaxTable from '~/components/SyntaxTable'
 import syntaxes from '../syntaxes'
-import line from 'to-line'
+import SyntaxTable from '~/components/SyntaxTable'
+import SyntaxTr from '~/components/SyntaxTr'
+import SyntaxPreview from './SyntaxPreview'
 
-export default () =>
-    <SyntaxTable value={syntaxes} default="order:first">
-                    {(className: string) =>
-                        <>
-                            <Demo className="py:0">
-                                <div className="bg-stripe flex gap:10 p:10 w:full">
-                                    <div className="box o:-3">1</div>
-                                    <div className="box o:-1">2</div>
-                                    <div className={line(className, 'flex:1 box bg:blue-58! fg:white')}>{className}</div>
-                                    <div className="box o:1">4</div>
-                                    <div className="box o:3">5</div>
-                                </div>
-                            </Demo>
-                            <Code lang="html">{`
-                                <div class="flex">
-                                    <div class="o:-3">…</div>
-                                    <div class="o:-1">…</div>
-                                    <div class="**${className}**">…</div>
-                                    <div class="o:1">…</div>
-                                    <div class="o:3">…</div>
-                                </div>
-                            `}</Code>
-                        </>
-                    }
-                </SyntaxTable>
+export default () => {
+    const previewSyntax = 'order:0'
+    return (
+        <>
+            <SyntaxTable>
+                {syntaxes.map((syntax) =>
+                    <SyntaxTr value={syntax} key={syntax} previewSyntax={previewSyntax}></SyntaxTr>)
+                }
+            </SyntaxTable>
+            <SyntaxPreview className={previewSyntax} />
+        </>
+    )
+}

website/app/[locale]/(root)/docs/order/components/SyntaxPreview.tsx

@@ -0,0 +1,10 @@
+'use client'
+
+import useSelectedPreviewSyntax from '~/utils/use-selected-preview-syntax'
+import Basic from './Basic'
+
+export default (props: any) => {
+    return (
+        <Basic className={useSelectedPreviewSyntax(props.className)} />
+    )
+}

website/app/[locale]/(root)/docs/order/content.mdx

@@ -3,32 +3,6 @@
 
 ---
 
-## Basic usage
-### Ordering flex or grid items
-Use `order:value` to order items of flex or grid container. Value is an integer that can be positive, negative or zero.
-<Demo className="py:0">
-    <div className="bg:white@light bg:gray-20@dark p:30">
-        <div className="flex gap:10">
-            <div className="o:-3 box">2</div>
-            <div className="o:1 box">4</div>
-            <div className="o:first box bg:blue-58! fg:white">1</div>
-            <div className="o:0 box">3</div>
-            <div className="o:3 box">5</div>
-        </div>
-    </div>
-</Demo>
-```html
-<div class="flex gap:10">
-    <div class="o:-3">2</div>
-    <div class="o:1">4</div>
-    <div class="**o:first**">1</div>
-    <div class="o:0">3</div>
-    <div class="o:3">5</div>
-</div>
-```
-
----
-
 ## Conditionally apply
 Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html

website/app/[locale]/(root)/docs/order/syntaxes.ts

@@ -1,3 +1,8 @@
-const syntaxes = [['order:`value`', 'o:`value`'], ['o:first'], ['o:last']]
+const syntaxes = [
+    ['order:`value`'],
+    'order:0',
+    'order:first',
+    'order:last'
+]
 
 export default syntaxes