Stock

src/components/stockListItem.tsx

+import {ShoppingCartIcon} from '@heroicons/react/outline';
+
+import {useState} from 'react';
+  
+  const StockListItem = ({ product }) => {
+    let [stock, setStock] = useState(product.quantity);
+    return (
+      <li className="col-span-1 bg-white rounded-lg shadow divide-y divide-gray-200">
+        <div className="w-full flex items-center justify-between p-6 space-x-6">
+          <div className="flex-1 truncate">
+            <div className="flex items-center space-x-3">
+              <h3 className="text-gray-900 text-sm font-medium truncate">{product.name}</h3>
+              <input type="text" name="stock" id="stock" value={stock} style={{width: "60px"}} onChange={(e) => { setStock(e.target.value) }} className="flex-shrink-0 inline-block px-2 py-0.5 text-green-800 text-xs font-medium bg-green-100 rounded-full"/>
+            </div>
+            <p className="mt-1 text-gray-500 text-sm truncate">{product.price}</p>
+          </div>
+        </div>
+        <div>
+          <div className="-mt-px flex divide-x divide-gray-200">
+            <div className="-ml-px w-0 flex-1 flex">
+              <a
+                href='/'
+                className="relative w-0 flex-1 inline-flex items-center justify-center py-4 text-sm text-gray-700 font-medium border border-transparent rounded-br-lg hover:text-gray-500"
+              >
+                <ShoppingCartIcon className="w-5 h-5 text-gray-400" aria-hidden="true" />
+                <span className="ml-3">Ajouter</span>
+              </a>
+            </div>
+          </div>
+        </div>
+      </li>
+    );
+  };
+  
+  export default StockListItem;
\ No newline at end of file