ps99-api 2.3.3 → 2.5.0

package/example-web/react2/src/components/SeedsComponent.tsx

@@ -6,8 +6,8 @@ import {
   RawStackKey,
   LootTableData,
 } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
   try {
@@ -21,21 +21,25 @@ const parseRawStackKey = (rawStackKey: RawStackKey): LootTableData => {
 const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
   const lootTableArray = Array.isArray(lootTable) ? lootTable : [lootTable];
   return lootTableArray.map((table, index) => (
-    <div key={index}>
+    <div key={index} style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(200px, 1fr))', gap: '10px' }}>
       {table.entries.map((entry: LootTableEntry, entryIndex: number) => {
         const parsedStackKey = entry.Value._stackKey
           ? parseRawStackKey(entry.Value._stackKey)
           : null;
         return (
-          <div key={entryIndex}>
-            <h4>Loot Entry {entryIndex + 1}</h4>
-            <p>Weight: {entry.Weight}</p>
+          <div key={entryIndex} style={{ padding: '10px', border: '1px solid #eee', borderRadius: '8px', background: '#f9f9f9', textAlign: 'left' }}>
+            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '5px' }}>
+              <span style={{ fontWeight: 'bold', fontSize: '0.9em' }}>Entry {entryIndex + 1}</span>
+              <span className="badge">Weight: {entry.Weight}</span>
+            </div>
             {parsedStackKey && (
-              <>
-                <p>Item ID: {parsedStackKey.id}</p>
-                {parsedStackKey.tn && <p>Item TN: {parsedStackKey.tn}</p>}
-                {parsedStackKey._am && <p>Amount: {parsedStackKey._am}</p>}
-              </>
+              <div style={{ fontSize: '0.85em', color: '#555' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '5px' }}>
+                  <span>ID: <strong>{parsedStackKey.id}</strong></span>
+                </div>
+                {parsedStackKey.tn && <div>Tier/TN: {parsedStackKey.tn}</div>}
+                {parsedStackKey._am && <div>Amount: {parsedStackKey._am}</div>}
+              </div>
             )}
           </div>
         );
@@ -45,29 +49,38 @@ const renderLootTable = (lootTable: LootTableRoot | LootTableRoot[]) => {
 };
 
 const SeedComponent: React.FC<{
-  configData?: CollectionConfigData<"Seeds">;
+  configData: CollectionConfigData<"Seeds">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Seeds">>
-      collectionName="Seeds"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Seed: {data.DisplayName}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Grow Time: {data.GrowTime} seconds</p>
-          <p>
-            Rarity: {data.Rarity.DisplayName} (Rarity Number:{" "}
-            {data.Rarity.RarityNumber})
-          </p>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <div>
-            <h3>Loot Table</h3>
-            {renderLootTable(data.LootTable)}
-          </div>
-        </div>
-      )}
-    />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ marginBottom: '20px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        <p style={{ fontWeight: 'bold', marginTop: '5px' }}>Grow Time: {configData.GrowTime}s</p>
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ textAlign: 'center', fontSize: '1.2em', marginBottom: '15px' }}>Loot Table</h3>
+        {renderLootTable(configData.LootTable)}
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/ShovelsComponent.tsx

@@ -1,27 +1,32 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const ShovelComponent: React.FC<{
-  configData?: CollectionConfigData<"Shovels">;
+  configData: CollectionConfigData<"Shovels">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"Shovels">>
-      collectionName="Shovels"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Shovel: {data.DisplayName}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Associated Item ID: {data.AssociatedItemID}</p>
-          {data.MerchantSalePrice && (
-            <p>Merchant Sale Price: {data.MerchantSalePrice}</p>
-          )}
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-        </div>
-      )}
-    />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: undefined,
+            name: configData.DisplayName
+          }}
+          rarityColor={null}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        {configData.MerchantSalePrice && <p style={{ marginTop: '10px' }}><strong>Sale Price:</strong> {configData.MerchantSalePrice}</p>}
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/Sidebar.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useState } from "react";
+import { Link, useParams } from "react-router-dom";
+import { PetSimulator99API, CollectionName } from "ps99-api";
+
+import { COLLECTION_ICONS } from "../constants/collectionIcons";
+
+
+interface SidebarProps {
+    currentCollection?: string;
+}
+
+const Sidebar: React.FC<SidebarProps> = ({ currentCollection }) => {
+    const [collections, setCollections] = useState<CollectionName[]>([]);
+
+    useEffect(() => {
+        const fetchCollections = async () => {
+            const api = new PetSimulator99API();
+            const response = await api.getCollections();
+            if (response.status === "ok") {
+                // Filter out collections that might not have icons or just to keep it clean if needed
+                setCollections(response.data);
+            }
+        };
+        fetchCollections();
+    }, []);
+
+    return (
+        <div style={{
+            width: "260px",
+            backgroundColor: "#fff",
+            borderRight: "4px solid #333",
+            display: "flex",
+            flexDirection: "column",
+            padding: "15px",
+            gap: "10px",
+            flexShrink: 0,
+            overflowY: "auto",
+            maxHeight: "100%",
+        }}>
+            <h3 style={{
+                textAlign: "center",
+                marginBottom: "15px",
+                color: "#333",
+                fontSize: "1.5rem",
+                fontWeight: "900",
+                textShadow: "2px 2px 0px #eee",
+                fontFamily: "'Fredoka One', cursive, sans-serif", // Assuming font availability or fallback
+            }}>
+                Terminal!
+            </h3>
+
+            <div style={{
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: "10px",
+            }}>
+                {collections.map((collection) => {
+                    const isActive = currentCollection === collection;
+                    const icon = COLLECTION_ICONS[collection] || "📦";
+
+                    return (
+                        <Link
+                            key={collection}
+                            to={`/collections/${collection}`}
+                            style={{
+                                display: "flex",
+                                flexDirection: "column",
+                                alignItems: "center",
+                                justifyContent: "center",
+                                aspectRatio: "1/1",
+                                backgroundColor: isActive ? "#00b894" : "#dfe6e9",
+                                borderRadius: "16px",
+                                textDecoration: "none",
+                                color: isActive ? "#fff" : "#2d3436",
+                                border: "3px solid #333",
+                                boxShadow: isActive ? "inset 0 -4px 0 rgba(0,0,0,0.2)" : "0 4px 0 #b2bec3",
+                                transition: "all 0.1s ease",
+                                transform: isActive ? "translateY(2px)" : "translateY(0)",
+                            }}
+                        >
+                            <span style={{
+                                fontSize: "2rem",
+                                marginBottom: "4px",
+                                filter: isActive ? "drop-shadow(0 2px 0 rgba(0,0,0,0.2))" : "none"
+                            }}>
+                                {icon}
+                            </span>
+                            <span style={{
+                                fontSize: "0.8rem",
+                                fontWeight: "800",
+                                textAlign: "center",
+                                lineHeight: "1.1",
+                                textShadow: isActive ? "1px 1px 0 rgba(0,0,0,0.2)" : "none"
+                            }}>
+                                {collection}
+                            </span>
+                        </Link>
+                    );
+                })}
+            </div>
+        </div>
+    );
+};
+
+export default Sidebar;

package/example-web/react2/src/components/SprinklersComponent.tsx

@@ -1,28 +1,36 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const SprinklerComponent: React.FC<{
-  configData?: CollectionConfigData<"Sprinklers">;
+  configData: CollectionConfigData<"Sprinklers">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Sprinklers">>
-      collectionName="Sprinklers"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Sprinkler: {data.Name}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Color: {data.Color}</p>
-          <p>Duration: {data.Duration} seconds</p>
-          <h3>Rarity</h3>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          <p>Display Name: {data.Rarity.DisplayName}</p>
-          <ImageComponent src={data.Icon} alt={data.Name} />
-        </div>
-      )}
-    />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.Name}
+          amount={1}
+          label={configData.Name}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.Name
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>{configData.Desc}</p>
+        <p style={{ fontWeight: 'bold', marginTop: '5px' }}>Duration: {configData.Duration}s</p>
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/Tooltip.tsx

@@ -0,0 +1,36 @@
+import React, { useState } from "react";
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+}
+
+const Tooltip: React.FC<TooltipProps> = ({ content, children }) => {
+    const [active, setActive] = useState(false);
+
+    const showTip = () => {
+        setActive(true);
+    };
+
+    const hideTip = () => {
+        setActive(false);
+    };
+
+    return (
+        <div
+            className="tooltip-wrapper"
+            onMouseEnter={showTip}
+            onMouseLeave={hideTip}
+            style={{ position: 'relative', display: 'inline-block' }}
+        >
+            {children}
+            {active && (
+                <div className="tooltip-popover">
+                    {content}
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default Tooltip;

package/example-web/react2/src/components/UltimatesComponent.tsx

@@ -1,34 +1,39 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const UltimateComponent: React.FC<{
-  configData?: CollectionConfigData<"Ultimates">;
+  configData: CollectionConfigData<"Ultimates">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Ultimates">>
-      collectionName="Ultimates"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Ultimate: {data.DisplayName}</h2>
-          <p>Description: {data.Desc}</p>
-          <p>Max Tier: {data.MaxTier}</p>
-          <p>FFlag Name: {data.FFlagName}</p>
-          {data.Tradable && <p>Tradable</p>}
-          {data.ProductId && <p>Product ID: {data.ProductId}</p>}
-          {data.NotAllowedInInstances && <p>Not Allowed in Instances</p>}
-          <h3>Rarity</h3>
-          <p>Rarity Number: {data.Rarity.RarityNumber}</p>
-          <p>Display Name: {data.Rarity.DisplayName}</p>
-          <ImageComponent src={data.Icon} alt={data.DisplayName} />
-          <h3>Tiers</h3>
-          <p>Tier to Level Mapping: {data.TierToLevel.join(", ")}</p>
-          <p>Level to Tier Mapping: {data.LevelToTier.join(", ")}</p>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: configData.Rarity,
+            name: configData.DisplayName
+          }}
+          rarityColor={rarityColor}
+        />
+      </div>
+
+      <div style={{ fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p style={{ marginBottom: '10px' }}>{configData.Desc}</p>
+        <div style={{ display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <span className="badge">Max Tier: {configData.MaxTier}</span>
+          {configData.Tradable && <span className="badge">Tradable</span>}
         </div>
-      )}
-    />
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/UpgradesComponent.tsx

@@ -1,73 +1,117 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
+import ItemCard from "./ItemCard";
 import ImageComponent from "./ImageComponent";
+import { useExpandableList } from "../hooks/useExpandableList";
 
 const UpgradeComponent: React.FC<{
-  configData?: CollectionConfigData<"Upgrades">;
+  configData: CollectionConfigData<"Upgrades">;
 }> = ({ configData }) => {
+  const { expandedIndices, toggle, expandAll, collapseAll, isExpanded } = useExpandableList(configData.TierCurrencies.length);
+
   return (
-    <GenericFetchComponent<CollectionConfigData<"Upgrades">>
-      collectionName="Upgrades"
-      configData={configData}
-      render={(data) => (
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      {configData.Icon && (
+        <div style={{ maxWidth: '100px', margin: '0 auto 20px' }}>
+          <ImageComponent src={configData.Icon} alt="Upgrade Icon" />
+        </div>
+      )}
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '20px', marginBottom: '30px' }}>
         <div>
-          <h2>Upgrade</h2>
-          {data.Icon && <ImageComponent src={data.Icon} alt="Upgrade Icon" />}
-          <h3>Tier Powers</h3>
-          <ul>
-            {data.TierPowers.map((power, index) => (
-              <li key={index}>
-                Tier {index + 1}: {power}
+          <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tier Powers</h3>
+          <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left' }}>
+            {configData.TierPowers.map((power, index) => (
+              <li key={index} style={{ padding: '5px 0', borderBottom: '1px dashed #eee' }}>
+                <strong>Tier {index + 1}:</strong> {power}
               </li>
             ))}
           </ul>
-          <h3>Tier Costs</h3>
-          <ul>
-            {data.TierCosts.map((cost, index) => (
-              <li key={index}>
-                Tier {index + 1}: {cost}
+        </div>
+        <div>
+          <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Tier Costs</h3>
+          <ul style={{ listStyle: 'none', padding: 0, textAlign: 'left' }}>
+            {configData.TierCosts.map((cost, index) => (
+              <li key={index} style={{ padding: '5px 0', borderBottom: '1px dashed #eee' }}>
+                <strong>Tier {index + 1}:</strong> {cost}
               </li>
             ))}
           </ul>
-          <h3>Tier Currencies</h3>
-          {data.TierCurrencies.map((currency, index) => (
-            <div key={index}>
-              <h4>{currency.DisplayName}</h4>
-              <p>Rarity Number: {currency.Rarity.RarityNumber}</p>
-              <p>Description: {currency.Desc}</p>
-              {currency.Tradable && <p>Tradable</p>}
-              <p>Max Amount: {currency.MaxAmount}</p>
-              <h5>Bag Tiers</h5>
-              <ul>
-                {currency.BagTiers.map((bagTier, bagIndex) => (
-                  <li key={bagIndex}>
-                    <p>Value: {bagTier.value}</p>
-                    <ImageComponent
-                      src={bagTier.image}
-                      alt={`Bag Tier ${bagTier.value}`}
-                    />
-                  </li>
-                ))}
-              </ul>
-              <h5>Tiers</h5>
-              <ul>
-                {currency.Tiers.map((tier, tierIndex) => (
-                  <li key={tierIndex}>
-                    <p>Tier Name: {tier.tierName}</p>
-                    <p>Order: {tier.Order}</p>
-                    <p>Value: {tier.value}</p>
-                    {tier.isBottom && <p>Is Bottom</p>}
-                    <ImageComponent src={tier.orbImage} alt="Orb" />
-                    <ImageComponent src={tier.imageOutline} alt="Outline" />
-                  </li>
-                ))}
-              </ul>
-            </div>
-          ))}
         </div>
-      )}
-    />
+      </div>
+
+      <div>
+        <h3 style={{ fontSize: '1.2em', marginBottom: '15px' }}>Tier Currencies</h3>
+        <div style={{ marginBottom: '20px', display: 'flex', gap: '10px', justifyContent: 'center' }}>
+          <button onClick={expandAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Expand All</button>
+          <button onClick={collapseAll} style={{ padding: '8px 16px', borderRadius: '8px', border: '1px solid #ddd', background: '#fff', cursor: 'pointer' }}>Collapse All</button>
+        </div>
+        {configData.TierCurrencies.map((currency, index) => (
+          <div key={index} style={{ background: '#f9f9f9', padding: '15px', borderRadius: '12px', marginBottom: '20px' }}>
+            <div
+              onClick={() => toggle(index)}
+              style={{ cursor: 'pointer' }}
+            >
+              <h4 style={{ marginTop: 0, display: 'flex', alignItems: 'center', gap: '8px' }}>
+                {isExpanded(index) ? '▼' : '▶'} {currency.DisplayName}
+              </h4>
+              <div style={{ display: 'flex', gap: '10px', justifyContent: 'center', marginBottom: '10px' }}>
+                <span className="badge" style={{ borderColor: (currency.Rarity?.Color as string) || '#ccc' }}>{currency.Rarity?.DisplayName}</span>
+                {currency.Tradable && <span className="badge">Tradable</span>}
+                <span className="badge">Max: {currency.MaxAmount}</span>
+              </div>
+            </div>
+
+            {isExpanded(index) && (
+              <>
+                <p style={{ fontStyle: 'italic', fontSize: '0.9em', color: '#666' }}>{currency.Desc}</p>
+
+                <h5 style={{ marginTop: '15px', borderBottom: '1px solid #e0e0e0' }}>Bag Tiers</h5>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '10px' }}>
+                  {currency.BagTiers.map((bagTier, bagIndex) => (
+                    <div key={bagIndex}>
+                      <ItemCard
+                        id={`bag-tier-${bagIndex}`}
+                        amount={bagTier.value}
+                        label={`Bag Tier ${bagIndex + 1}`}
+                        itemData={{
+                          icon: bagTier.image,
+                          rarity: currency.Rarity,
+                          name: `Bag Tier ${bagIndex + 1}`
+                        }}
+                        rarityColor={(currency.Rarity?.Color as string) || null}
+                      />
+                    </div>
+                  ))}
+                </div>
+
+                <h5 style={{ marginTop: '15px', borderBottom: '1px solid #e0e0e0' }}>Tiers</h5>
+                <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fill, minmax(150px, 1fr))", gap: "10px", marginTop: '10px' }}>
+                  {currency.Tiers.map((tier, tierIndex) => (
+                    <div key={tierIndex}>
+                      <ItemCard
+                        id={tier.tierName}
+                        amount={tier.value}
+                        label={tier.tierName}
+                        itemData={{
+                          icon: tier.orbImage,
+                          rarity: currency.Rarity,
+                          name: tier.tierName
+                        }}
+                        rarityColor={(currency.Rarity?.Color as string) || null}
+                      />
+                      <div style={{ marginTop: '5px', fontSize: '0.8em', color: '#666', textAlign: 'center' }}>
+                        Order: {tier.Order}
+                      </div>
+                    </div>
+                  ))}
+                </div>
+              </>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

package/example-web/react2/src/components/WateringCansComponent.tsx

@@ -1,30 +1,32 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import { GenericFetchComponent } from "./GenericFetchComponent";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const WateringCanComponent: React.FC<{
-  configData?: CollectionConfigData<"WateringCans">;
+  configData: CollectionConfigData<"WateringCans">;
 }> = ({ configData }) => {
   return (
-    <GenericFetchComponent<CollectionConfigData<"WateringCans">>
-      collectionName="WateringCans"
-      configData={configData}
-      render={(data) => (
-        <div>
-          <h2>Watering Can</h2>
-          <h3>{data.DisplayName}</h3>
-          {data.Icon && (
-            <ImageComponent src={data.Icon} alt={`${data.DisplayName} Icon`} />
-          )}
-          <p>Associated Item ID: {data.AssociatedItemID}</p>
-          <p>Plant Time Multiplier: {data.PlantTimeMultiplier}</p>
-          <p>
-            Plant Time Multiplier Duration: {data.PlantTimeMultiplierDuration}
-          </p>
-        </div>
-      )}
-    />
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ maxWidth: '300px', margin: '0 auto 15px auto' }}>
+        <ItemCard
+          id={configData.DisplayName}
+          amount={1}
+          label={configData.DisplayName}
+          itemData={{
+            icon: configData.Icon,
+            rarity: undefined,
+            name: configData.DisplayName
+          }}
+          rarityColor={null}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p><strong>Time Mult:</strong> {configData.PlantTimeMultiplier}x</p>
+        <p><strong>Duration:</strong> {configData.PlantTimeMultiplierDuration}</p>
+      </div>
+    </div>
   );
 };