From 773790c02cdfdf9ea94defeedad7b9a3289c88a0 Mon Sep 17 00:00:00 2001
From: v3gaaa <svsm03@hotmail.com>
Date: Thu, 22 Aug 2024 13:15:32 -0600
Subject: [PATCH] Reordenamiento sample

---
 samples/utils/BarChartControls.tsx | 217 ++++++++++-------------------
 samples/utils/BarChartWrapper.tsx  |  88 ++++++------
 samples/utils/NavBar.tsx           |  36 +++--
 3 files changed, 144 insertions(+), 197 deletions(-)

diff --git a/samples/utils/BarChartControls.tsx b/samples/utils/BarChartControls.tsx
index d25db08..9cdc0fe 100644
--- a/samples/utils/BarChartControls.tsx
+++ b/samples/utils/BarChartControls.tsx
@@ -55,164 +55,95 @@ const BarChartControls: React.FC<BarChartControlsProps> = ({
   };
 
   return (
-    <form className="grid grid-cols-2 gap-4 mb-8">
-      <div>
-        <label className="form-label">
-          Width:
-          <input
-            type="number"
-            value={width}
-            onChange={(e) => setWidth(parseInt(e.target.value, 10))}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Height:
-          <input
-            type="number"
-            value={height}
-            onChange={(e) => setHeight(parseInt(e.target.value, 10))}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Bar Category Gap:
+    <div className="bg-white p-6 shadow-lg stroke-purple-600 rounded-lg mb-5 max-w-md">
+      <h2 className="text-2xl font-semibold mb-6 text-purple-600">Controls</h2>
+      <form className="space-y-6">
+        <div className="grid grid-cols-2 gap-4">
+          <div>
+            <label className="block text-sm font-medium text-purple-600 mb-1">Width</label>
+            <input
+              type="number"
+              value={width}
+              onChange={(e) => setWidth(parseInt(e.target.value, 10))}
+              className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+            />
+          </div>
+          <div>
+            <label className="block text-sm font-medium text-purple-600 mb-1">Height</label>
+            <input
+              type="number"
+              value={height}
+              onChange={(e) => setHeight(parseInt(e.target.value, 10))}
+              className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+            />
+          </div>
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-purple-600 mb-1">Bar Category Gap</label>
           <input
             type="text"
             value={barCategoryGap}
-            onChange={(e) => setBarCategoryGap(e.target.value)}  // Asume string
-            className="form-input ml-2 border rounded px-2 py-1"
+            onChange={(e) => setBarCategoryGap(e.target.value)}
+            className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Bar Gap:
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-purple-600 mb-1">Bar Gap</label>
           <input
             type="number"
             value={barGap}
-            onChange={(e) => setBarGap(parseInt(e.target.value, 10))}  // Asume number
-            className="form-input ml-2 border rounded px-2 py-1"
+            onChange={(e) => setBarGap(parseInt(e.target.value, 10))}
+            className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Layout:
+        </div>
+        <div>
+          <label className="block text-sm font-medium text-purple-600 mb-1">Layout</label>
           <select
             value={layout}
             onChange={(e) => setLayout(e.target.value as 'horizontal' | 'vertical')}
-            className="form-input ml-2 border rounded px-2 py-1"
+            className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
           >
             <option value="horizontal">Horizontal</option>
             <option value="vertical">Vertical</option>
           </select>
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Top:
-          <input
-            type="number"
-            value={margin.top}
-            onChange={(e) => handleMarginChange(e, 'top')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Right:
-          <input
-            type="number"
-            value={margin.right}
-            onChange={(e) => handleMarginChange(e, 'right')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Bottom:
-          <input
-            type="number"
-            value={margin.bottom}
-            onChange={(e) => handleMarginChange(e, 'bottom')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Margin Left:
-          <input
-            type="number"
-            value={margin.left}
-            onChange={(e) => handleMarginChange(e, 'left')}
-            className="form-input ml-2 border rounded px-2 py-1"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show X Axis:
-          <input
-            type="checkbox"
-            checked={showXAxis}
-            onChange={(e) => setShowXAxis(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Y Axis:
-          <input
-            type="checkbox"
-            checked={showYAxis}
-            onChange={(e) => setShowYAxis(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Cartesian Grid:
-          <input
-            type="checkbox"
-            checked={showCartesianGrid}
-            onChange={(e) => setShowCartesianGrid(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Tooltip:
-          <input
-            type="checkbox"
-            checked={showTooltip}
-            onChange={(e) => setShowTooltip(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-      <div>
-        <label className="form-label">
-          Show Legend:
-          <input
-            type="checkbox"
-            checked={showLegend}
-            onChange={(e) => setShowLegend(e.target.checked)}
-            className="ml-2"
-          />
-        </label>
-      </div>
-    </form>
+        </div>
+        <div>
+          <h3 className="text-lg font-medium text-purple-600 mb-2">Margin</h3>
+          <div className="grid grid-cols-2 gap-4">
+            {['top', 'right', 'bottom', 'left'].map((side) => (
+              <div key={side}>
+                <label className="block text-sm font-medium text-purple-600 mb-1 capitalize">{side}</label>
+                <input
+                  type="number"
+                  value={margin[side as keyof typeof margin]}
+                  onChange={(e) => handleMarginChange(e, side)}
+                  className="w-full px-3 py-2 border border-purple-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-purple-500 transition duration-300 ease-in-out"
+                />
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="space-y-2">
+          {[
+            { label: 'Show X Axis', checked: showXAxis, onChange: setShowXAxis },
+            { label: 'Show Y Axis', checked: showYAxis, onChange: setShowYAxis },
+            { label: 'Show Cartesian Grid', checked: showCartesianGrid, onChange: setShowCartesianGrid },
+            { label: 'Show Tooltip', checked: showTooltip, onChange: setShowTooltip },
+            { label: 'Show Legend', checked: showLegend, onChange: setShowLegend },
+          ].map((item) => (
+            <label key={item.label} className="flex items-center space-x-2 text-purple-600 hover:bg-purple-100 rounded-lg p-2 transition duration-300 ease-in-out">
+              <input
+                type="checkbox"
+                checked={item.checked}
+                onChange={(e) => item.onChange(e.target.checked)}
+                className="form-checkbox h-5 w-5 text-purple-600 rounded transition duration-300 ease-in-out"
+              />
+              <span className="text-sm">{item.label}</span>
+            </label>
+          ))}
+        </div>
+      </form>
+    </div>
   );
 };
 
diff --git a/samples/utils/BarChartWrapper.tsx b/samples/utils/BarChartWrapper.tsx
index 524e922..17078ef 100644
--- a/samples/utils/BarChartWrapper.tsx
+++ b/samples/utils/BarChartWrapper.tsx
@@ -21,49 +21,53 @@ const BarChartWrapper: React.FC<BarChartWrapperProps> = ({ data, children }) =>
   const [showLegend, setShowLegend] = useState(true);
 
   return (
-    <div>
-      <BarChartControls
-        width={width}
-        setWidth={setWidth}
-        height={height}
-        setHeight={setHeight}
-        barCategoryGap={barCategoryGap}
-        setBarCategoryGap={setBarCategoryGap}
-        barGap={barGap}
-        setBarGap={setBarGap}
-        layout={layout}
-        setLayout={setLayout}
-        margin={margin}
-        setMargin={setMargin}
-        showXAxis={showXAxis}
-        setShowXAxis={setShowXAxis}
-        showYAxis={showYAxis}
-        setShowYAxis={setShowYAxis}
-        showCartesianGrid={showCartesianGrid}
-        setShowCartesianGrid={setShowCartesianGrid}
-        showTooltip={showTooltip}
-        setShowTooltip={setShowTooltip}
-        showLegend={showLegend}
-        setShowLegend={setShowLegend}
-      />
-      <BarChart
-        data={data}
-        width={width}
-        height={height}
-        margin={margin}
-        barCategoryGap={barCategoryGap}
-        barGap={barGap}
-        layout={layout}
-      >
-        {showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
-        {showXAxis && <XAxis />}
-        {showYAxis && <YAxis />}
-        {showTooltip && <Tooltip />}
-        {showLegend && <Legend />}
-        {children}
-      </BarChart>
+    <div className="flex flex-col lg:flex-row gap-6 p-6">
+      <div className="lg:w-1/3">
+        <BarChartControls
+          width={width}
+          setWidth={setWidth}
+          height={height}
+          setHeight={setHeight}
+          barCategoryGap={barCategoryGap}
+          setBarCategoryGap={setBarCategoryGap}
+          barGap={barGap}
+          setBarGap={setBarGap}
+          layout={layout}
+          setLayout={setLayout}
+          margin={margin}
+          setMargin={setMargin}
+          showXAxis={showXAxis}
+          setShowXAxis={setShowXAxis}
+          showYAxis={showYAxis}
+          setShowYAxis={setShowYAxis}
+          showCartesianGrid={showCartesianGrid}
+          setShowCartesianGrid={setShowCartesianGrid}
+          showTooltip={showTooltip}
+          setShowTooltip={setShowTooltip}
+          showLegend={showLegend}
+          setShowLegend={setShowLegend}
+        />
+      </div>
+      <div className="lg:w-2/3">
+        <BarChart
+          data={data}
+          width={width}
+          height={height}
+          margin={margin}
+          barCategoryGap={barCategoryGap}
+          barGap={barGap}
+          layout={layout}
+        >
+          {showCartesianGrid && <CartesianGrid strokeDasharray="3 3" />}
+          {showXAxis && <XAxis />}
+          {showYAxis && <YAxis />}
+          {showTooltip && <Tooltip />}
+          {showLegend && <Legend />}
+          {children}
+        </BarChart>
+      </div>
     </div>
   );
 };
 
-export default BarChartWrapper;
+export default BarChartWrapper;
\ No newline at end of file
diff --git a/samples/utils/NavBar.tsx b/samples/utils/NavBar.tsx
index f75907a..52547b0 100644
--- a/samples/utils/NavBar.tsx
+++ b/samples/utils/NavBar.tsx
@@ -1,19 +1,31 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, useLocation } from 'react-router-dom';
 
 const NavBar = () => {
+  const location = useLocation();
+
+  const navItems = [
+    { name: 'Normal BarChart', path: '/' },
+    { name: 'Stacked BarChart', path: '/stacked' },
+    { name: 'Ranged BarChart', path: '/ranged' },
+  ];
+
   return (
-    <nav className="bg-gray-800 p-4">
-      <div className="container mx-auto flex space-x-4">
-        <Link to="/" className="text-white hover:underline">
-          Normal BarChart
-        </Link>
-        <Link to="/stacked" className="text-white hover:underline">
-          Stacked BarChart
-        </Link>
-        <Link to="/ranged" className="text-white hover:underline">
-          Ranged BarChart
-        </Link>
+    <nav className="bg-white p-4 shadow-lg stroke-purple-600 mb-5">
+      <div className="container mx-auto flex justify-center space-x-6">
+        {navItems.map((item) => (
+          <Link
+            key={item.path}
+            to={item.path}
+            className={`text-purple-600 py-2 px-4 rounded-lg ${
+              location.pathname === item.path
+                ? ' bg-purple-400'
+                : 'hover:bg-purple-600 hover:text-white'
+            } transition duration-300 ease-in-out`}
+          >
+            {item.name}
+          </Link>
+        ))}
       </div>
     </nav>
   );