Add Basic component for column-span

website/app/[locale]/(root)/docs/column-span/components/Basic.tsx

@@ -0,0 +1,27 @@
+import Demo from 'websites/components/Demo'
+import DemoPanel from 'websites/components/DemoPanel'
+import Code from 'websites/components/Code'
+import clsx from 'clsx'
+
+export default ({ className }: any) => {
+    return (
+        <>
+            <Demo $py={0}>
+                <DemoPanel>
+                    <div className="cols:3 gap:8x">
+                        <p className="m:0">There are many different types of animals, each with unique characteristics.</p>
+                        <p className={clsx(className, 'fg:strong font:bold')}>No matter what type of animal you are interested in, you will find something interesting and informative here.</p>
+                        <p className="m:0">Look at some of the most amazing creatures on earth, from spiders to whales!</p>
+                    </div>
+                </DemoPanel>
+            </Demo>
+            <Code lang="html">{`
+                <div class="cols:3 gap:8x">
+                    <p>There are many different types of animals, ...</p>
+                    <p class="**${className}** font:bold">No matter what type of animal ...</p>
+                    <p>Look at some of the most amazing creatures on earth, ...</p>
+                </div>
+            `}</Code>
+        </>
+    )
+}

website/app/[locale]/(root)/docs/column-span/components/Overview.tsx

@@ -1,37 +1,20 @@
 '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="col-span:all">
-                    {(className: string) =>
-                        <>
-                            <Demo>
-                                <div className="cols:3 gap:30 w:full w:full_:where(div)">
-                                    <div className="box mb:30">1</div>
-                                    <div className="box mb:30">2</div>
-                                    <div className="box mb:30">3</div>
-                                    <div className={line(className, 'box', className.includes('all') ? 'mb:30' : 'mb:30')}>4</div>
-                                    <div className="box mb:30">5</div>
-                                    <div className="box mb:30">6</div>
-                                    <div className="box mb:30">7</div>
-                                </div>
-                            </Demo>
-                            <Code lang="html">{`
-                                <div class="cols:3">
-                                    <div>1</div>
-                                    <div>2</div>
-                                    <div>3</div>
-                                    <div class="**${className}**">4</div>
-                                    <div>5</div>
-                                    <div>6</div>
-                                    <div>7</div>
-                                </div>
-                            `}</Code>
-                        </>
-                    }
-                </SyntaxTable>
+export default () => {
+    const previewSyntax = 'col-span:all'
+    return (
+        <>
+            <SyntaxTable>
+                {syntaxes.map((syntax) =>
+                    <SyntaxTr value={syntax} key={syntax} previewSyntax={previewSyntax}></SyntaxTr>)
+                }
+            </SyntaxTable>
+            <SyntaxPreview className={previewSyntax} />
+        </>
+    )
+}

website/app/[locale]/(root)/docs/column-span/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/column-span/content.mdx

@@ -5,28 +5,18 @@
 
 ## Basic usage
 ### Span across all columns
-Use `col-span:value` to make elements span across all columns.
-<Demo className="py:0!">
-    <div className="bg:white@light bg:gray-20@dark p:30">
-        <div className="gap:30 cols:3">
-            <div className="t:28 f:bold col-span:all mb:30">Introduction to animals</div>
-            <p className="m:0">There are many different types of animals in the world, and each has its own unique set of characteristics. No matter what type of animal you&#39;re interested in, you&#39;re sure to find something interesting and informative here. From spiders to whales, take a look at some of the most amazing creatures on earth!</p>
-        </div>
-    </div>
-</Demo>
-```html
-    <div class="cols:3">
+Use `col-span:all` to make elements span across all columns.
+<Basic className="col-span:all" />
 
-### Introduction to animals
-        <p>There are many different types of animals in the world …</p>
-    </div>
-```
+### Does not span multiple columns
+Use `col-span:none` to make elements not span across multiple columns.
+<Basic className="col-span:none" />
 
 ---
 
 ## Conditionally apply
 Apply styles based on different states using [selectors](/docs/state-selectors) and [conditional queries](/docs/conditional-queries).
 ```html
-<div class="column-span:all**:hover** column-span:all**@sm** column-span:all**@dark** column-span:all**@print**">…</div>
+<div class="col-span:all**:hover** col-span:all**@sm** col-span:all**@dark** col-span:all**@print**">…</div>
 ```
 

website/app/[locale]/(root)/docs/column-span/syntaxes.ts

@@ -1,3 +1,7 @@
-const syntaxes = [['column-span:`value`', 'col-span:`value`'], ['col-span:all'], ['col-span:none']]
+const syntaxes = [
+    ['col-span:`value`'],
+    'col-span:all',
+    'col-span:none'
+]
 
 export default syntaxes