From 279098e9fa34030017cef48e0c0e7e46f95bd30c Mon Sep 17 00:00:00 2001
From: Matt <matt@letsbe.solutions>
Date: Tue, 13 May 2025 20:12:41 +0200
Subject: [PATCH] more fixes

---
 src/components/OffsetOrder.tsx | 54 ++++++++++++++++++++++++----------
 1 file changed, 39 insertions(+), 15 deletions(-)

diff --git a/src/components/OffsetOrder.tsx b/src/components/OffsetOrder.tsx
index 6181eee..e17cc88 100644
--- a/src/components/OffsetOrder.tsx
+++ b/src/components/OffsetOrder.tsx
@@ -311,24 +311,48 @@ export function OffsetOrder({ tons, monetaryAmount, onBack, calculatorType }: Pr
         </div>
       ) : portfolio ? (
         <>
-          {portfolios.length > 1 && (
+          {portfolios.length > 0 && (
             <div className="mb-8">
-              <label className="block text-sm font-medium text-gray-700 mb-2">
-                Select Carbon Offset Portfolio
-              </label>
-              <select 
-                value={selectedPortfolioId || ''}
-                onChange={(e) => handlePortfolioChange(Number(e.target.value))}
-                className="block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-blue-500 focus:border-blue-500 sm:text-sm rounded-md"
-              >
+              <h3 className="text-lg font-semibold text-gray-900 mb-4">
+                Select A Carbon Offset Portfolio
+              </h3>
+              
+              <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
                 {portfolios.map((p) => (
-                  <option key={p.id} value={p.id}>
-                    {p.name} - {formatCurrency(p.pricePerTon, getCurrencyByCode(currency))} per ton
-                  </option>
+                  <div 
+                    key={p.id} 
+                    onClick={() => handlePortfolioChange(p.id)}
+                    className={`cursor-pointer border rounded-lg p-4 transition-all ${
+                      selectedPortfolioId === p.id 
+                        ? 'border-blue-500 bg-blue-50 shadow-md' 
+                        : 'border-gray-200 hover:border-blue-300 hover:bg-blue-50'
+                    }`}
+                  >
+                    <div className="flex justify-between items-start mb-2">
+                      <h4 className="text-lg font-medium text-gray-900">{p.name}</h4>
+                      {selectedPortfolioId === p.id && (
+                        <div className="bg-blue-500 text-white rounded-full p-1">
+                          <Check size={16} />
+                        </div>
+                      )}
+                    </div>
+                    <p className="text-sm text-gray-600 mb-3 line-clamp-2">
+                      {p.description}
+                    </p>
+                    <div className="flex justify-between items-center">
+                      <div className="text-xs text-gray-500">
+                        {p.projects?.length || 0} project{p.projects?.length !== 1 ? 's' : ''}
+                      </div>
+                      <div className="text-blue-600 font-semibold">
+                        {formatCurrency(p.pricePerTon, getCurrencyByCode(currency))}/ton
+                      </div>
+                    </div>
+                  </div>
                 ))}
-              </select>
-              <p className="mt-2 text-sm text-gray-500">
-                Select which portfolio of climate projects you'd like to support.
+              </div>
+
+              <p className="mt-4 text-sm text-gray-500">
+                Click on a portfolio to select which climate projects you'd like to support.
               </p>
             </div>
           )}