docs(Polygon): Remove duplicate ocotogon example and add rectangle

Author: techniq

packages/layerchart/src/routes/docs/components/Polygon/+page.svelte

@@ -112,7 +112,7 @@
   </div>
 
   <div>
-    <h3>Diamond</h3>
+    <h3>Rectangle</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -123,8 +123,8 @@
                 cy={context.height / 2}
                 r={60}
                 points={4}
-                scaleX={0.5}
-                {rotate}
+                scaleX={1.5}
+                rotate={rotate + 45}
                 {cornerRadius}
               />
             </Layer>
@@ -135,7 +135,7 @@
   </div>
 
   <div>
-    <h3>Rhombus</h3>
+    <h3>Diamond</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -146,8 +146,8 @@
                 cy={context.height / 2}
                 r={60}
                 points={4}
-                skewX={-20}
-                rotate={rotate + 45}
+                scaleX={0.5}
+                {rotate}
                 {cornerRadius}
               />
             </Layer>
@@ -158,7 +158,7 @@
   </div>
 
   <div>
-    <h3>Parallelogram</h3>
+    <h3>Rhombus</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -170,7 +170,6 @@
                 r={60}
                 points={4}
                 skewX={-20}
-                scaleX={1.5}
                 rotate={rotate + 45}
                 {cornerRadius}
               />
@@ -182,7 +181,7 @@
   </div>
 
   <div>
-    <h3>Trapezoid</h3>
+    <h3>Parallelogram</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -193,7 +192,8 @@
                 cy={context.height / 2}
                 r={60}
                 points={4}
-                tiltX={-1}
+                skewX={-20}
+                scaleX={1.5}
                 rotate={rotate + 45}
                 {cornerRadius}
               />
@@ -205,7 +205,7 @@
   </div>
 
   <div>
-    <h3>Pentagon</h3>
+    <h3>Trapezoid</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -215,8 +215,9 @@
                 cx={context.width / 2}
                 cy={context.height / 2}
                 r={60}
-                points={5}
-                {rotate}
+                points={4}
+                tiltX={-1}
+                rotate={rotate + 45}
                 {cornerRadius}
               />
             </Layer>
@@ -227,7 +228,7 @@
   </div>
 
   <div>
-    <h3>Hexagon</h3>
+    <h3>Pentagon</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -237,7 +238,7 @@
                 cx={context.width / 2}
                 cy={context.height / 2}
                 r={60}
-                points={6}
+                points={5}
                 {rotate}
                 {cornerRadius}
               />
@@ -249,7 +250,7 @@
   </div>
 
   <div>
-    <h3>Octagon</h3>
+    <h3>Hexagon</h3>
     <Preview>
       <div class="h-[150px] p-4 border rounded-sm">
         <Chart>
@@ -259,7 +260,7 @@
                 cx={context.width / 2}
                 cy={context.height / 2}
                 r={60}
-                points={8}
+                points={6}
                 {rotate}
                 {cornerRadius}
               />