webiste: Update example.

uiwjs · Jul 17, 2021 · ec2d237 · ec2d237
1 parent 668fa95
commit ec2d237
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 36 deletions.
diff --git a/packages/color/README.md b/packages/color/README.md
@@ -1,6 +1,6 @@
 <div align="center">
   <a title="React Color" href="https://uiwjs.github.io/react-color/">
-    <img src="https://user-images.githubusercontent.com/1680273/125600625-2a24253a-563a-4778-becf-7ecb65d6f9c8.png" width="630" alt="@uiw/react-color" />
+    <img src="https://user-images.githubusercontent.com/1680273/126026078-0d3de181-70ff-40e1-84a1-baffbc25df41.png" width="630" alt="@uiw/react-color" />
   </a>
 </div>
 

diff --git a/website/src/App.tsx b/website/src/App.tsx
@@ -245,7 +245,7 @@ export default function App() {
                 onChange={(hsva) => setHsva(hsva)}
               />
             </div>
-            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '10px 0 10px 0' }}>
+            <div style={{ display: 'flex', alignItems: 'flex-start', justifyContent: 'center', padding: '10px 0 0 0' }}>
               <EditableInputHSLA
                 hsva={hsva}
                 style={{ width: 150, marginRight: 20 }}
@@ -281,6 +281,15 @@ export default function App() {
             </div>
             <div className={styles.exampleWarp} style={{}}>
               <div>
+                <Colorful
+                  color={hsva}
+                  onChange={(color) => {
+                    setHsva({ ...hsva, ...color.hsva });
+                  }}
+                />
+                <Title>{`<Colorful color="${hsvaToHex(hsva)}" />`}</Title>
+              </div>
+              <div style={{ margin: '0 30px' }}>
                 <Sketch
                   color={hsva}
                   onChange={(color) => {
@@ -289,19 +298,18 @@ export default function App() {
                 />
                 <Title>{`<Sketch color="${hsvaToHex(hsva)}" />`}</Title>
               </div>
-              <div style={{ paddingLeft: 20 }}>
-                <Compact
-                  style={{
-                    boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
-                  }}
-                  color={hsvaToHex(hsva)}
+              <div>
+                <Block
+                  color={hsva}
                   onChange={(color) => {
                     setHsva({ ...hsva, ...color.hsva });
                   }}
                 />
-                <Title>{`<Compact color="${hsvaToHex(hsva)}" />`}</Title>
-                <Slider style={{ width: 220 }} color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsv })} />
-                <Title>{`<Slider color="${hsvaToHex(hsva)}" />`}</Title>
+                <Title>{`<Block color="${hsvaToHex(hsva)}" />`}</Title>
+              </div>
+            </div>
+            <div className={styles.exampleWarp} style={{}}>
+              <div>
                 <Circle
                   colors={[
                     '#f44336',
@@ -324,32 +332,48 @@ export default function App() {
                     '#607d8b',
                   ]}
                   color={hsva}
-                  style={{ width: 252, paddingTop: 16 }}
+                  style={{ width: 252 }}
                   onChange={(color) => {
                     setHsva({ ...hsva, ...color.hsva });
                   }}
                 />
                 <Title>{`<Circle color="${hsvaToHex(hsva)}" />`}</Title>
               </div>
               <div style={{ paddingLeft: 20 }}>
-                <Colorful
+                <Compact
+                  style={{
+                    boxShadow: 'rgb(0 0 0 / 15%) 0px 0px 0px 1px, rgb(0 0 0 / 15%) 0px 8px 16px',
+                  }}
+                  color={hsvaToHex(hsva)}
+                  onChange={(color) => {
+                    setHsva({ ...hsva, ...color.hsva });
+                  }}
+                />
+                <Title>{`<Compact color="${hsvaToHex(hsva)}" />`}</Title>
+                <Slider style={{ width: 220 }} color={hsva} onChange={(color) => setHsva({ ...hsva, ...color.hsv })} />
+                <Title>{`<Slider color="${hsvaToHex(hsva)}" />`}</Title>
+              </div>
+              <div style={{ marginLeft: 25 }}>
+                <Wheel
                   color={hsva}
+                  width={140}
+                  height={140}
                   onChange={(color) => {
                     setHsva({ ...hsva, ...color.hsva });
                   }}
                 />
-                <Title>{`<Colorful color="${hsvaToHex(hsva)}" />`}</Title>
+                <Title style={{ textAlign: 'center', minWidth: 180 }}>{`<Wheel color="..." />`}</Title>
               </div>
             </div>
             <div className={styles.exampleWarp}>
               <div>
-                <Wheel
+                <Github
                   color={hsva}
                   onChange={(color) => {
                     setHsva({ ...hsva, ...color.hsva });
                   }}
                 />
-                <Title style={{ textAlign: 'center' }}>{`<Wheel color="${hsvaToHex(hsva)}" />`}</Title>
+                <Title>{`<Github color="${hsvaToHex(hsva)}" />`}</Title>
               </div>
               <div style={{ marginLeft: 25 }}>
                 <Material
@@ -361,26 +385,6 @@ export default function App() {
                 />
                 <Title style={{ minWidth: 180 }}>{`<Material color="${hsvaToHex(hsva)}" />`}</Title>
               </div>
-              <div>
-                <Block
-                  color={hsva}
-                  onChange={(color) => {
-                    setHsva({ ...hsva, ...color.hsva });
-                  }}
-                />
-                <Title>{`<Block color="${hsvaToHex(hsva)}" />`}</Title>
-              </div>
-            </div>
-            <div className={styles.exampleWarp}>
-              <div>
-                <Github
-                  color={hsva}
-                  onChange={(color) => {
-                    setHsva({ ...hsva, ...color.hsva });
-                  }}
-                />
-                <Title>{`<Github color="${hsvaToHex(hsva)}" />`}</Title>
-              </div>
             </div>
           </div>
           <Markdown source={markdownStr} style={{ padding: '0px 20px 30px' }} />