ps99-api 2.4.0 → 2.6.0

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

@@ -1,46 +1,140 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
+import ItemCard from "./ItemCard";
 import ImageComponent from "./ImageComponent";
+import { useItemResolution } from "../hooks/useItemResolution";
+import { formatGigantix } from "../utils/gigantix";
 
 const PotionsComponent: React.FC<{
   configData: CollectionConfigData<"Potions">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+
+  const isSingleTier = configData.Tiers.length === 1;
+
+  if (isSingleTier) {
+    const tier = configData.Tiers[0];
+    const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+
+    return (
+      <div style={{ width: '100%', height: '100%', boxSizing: 'border-box', display: 'flex', flexDirection: 'column', alignItems: 'center', paddingTop: '20px' }}>
+        <div style={{
+          width: '120px',
+          height: '120px',
+          borderRadius: '16px',
+          border: rarityColor ? `4px solid ${rarityColor}` : '4px solid #eee',
+          padding: '10px',
+          backgroundColor: '#fff',
+          boxShadow: '0 4px 10px rgba(0,0,0,0.1)',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          marginBottom: '20px'
+        }}>
+          <ImageComponent src={tier.Icon} alt={tier.DisplayName} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+        </div>
+
+        <div style={{ textAlign: 'center', maxWidth: '400px' }}>
+          <div style={{ display: 'flex', gap: '15px', justifyContent: 'center', marginBottom: '10px', fontSize: '0.9em' }}>
+            <p><strong>Primary:</strong> <span style={{ color: configData.PrimaryColor }}>{configData.PrimaryColor}</span></p>
+            <p><strong>Secondary:</strong> <span style={{ color: configData.SecondaryColor }}>{configData.SecondaryColor}</span></p>
+          </div>
+          {configData.BaseTier !== 1 && <p><strong>Base Tier:</strong> {configData.BaseTier}</p>}
+          {configData.MaxTier !== 1 && <p><strong>Max Tier:</strong> {configData.MaxTier}</p>}
+
+          <h3 style={{ margin: '10px 0', fontSize: '1.5em', color: '#333' }}>{tier.DisplayName}</h3>
+          <p style={{ color: '#666', fontSize: '1.1em', marginBottom: '15px' }}>{tier.Desc}</p>
+          <div style={{ fontWeight: '900', fontSize: '1.2em', color: '#333' }}>
+            <p>Power: {tier.Power}</p>
+            <p>Time: {tier.Time}s</p>
+          </div>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div style={{ padding: "1em", border: "1px solid #ccc", borderRadius: "8px", backgroundColor: "#f9f9f9" }}>
-      <h2 style={{ borderBottom: "2px solid #ccc", paddingBottom: "0.5em" }}>
-        Potion: {configData.Tiers[0].DisplayName}
-      </h2>
-      <div style={{ display: 'flex', gap: '1em' }}>
-        <div style={{ minWidth: '250px' }}>
+
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+
+      <div style={{ display: 'flex', gap: '20px', alignItems: 'center', marginBottom: '20px', flexWrap: 'wrap', justifyContent: 'center' }}>
+        <div style={{ width: '150px', height: '150px' }}>
           <ImageComponent
             src={configData.Tiers[0].Icon}
             alt={configData.Tiers[0].DisplayName}
           />
         </div>
-        <div>
-          <p><strong>Description:</strong> {configData.Tiers[0].Desc}</p>
-          <p><strong>Primary Color:</strong> {configData.PrimaryColor}</p>
-          <p><strong>Secondary Color:</strong> {configData.SecondaryColor}</p>
-          <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
-          <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
+        <div style={{ textAlign: 'left', flex: 1, minWidth: '200px' }}>
+          <p style={{ marginBottom: '8px' }}><strong>Description:</strong> {configData.Tiers[0].Desc}</p>
+          <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px' }}>
+            <p><strong>Primary:</strong> <span style={{ color: configData.PrimaryColor }}>{configData.PrimaryColor}</span></p>
+            <p><strong>Secondary:</strong> <span style={{ color: configData.SecondaryColor }}>{configData.SecondaryColor}</span></p>
+            <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
+            <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
+          </div>
         </div>
       </div>
-      <div style={{ marginTop: '1em' }}>
-        <h3>Tiers:</h3>
-        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '1em' }}>
-          {configData.Tiers.map((tier, index) => (
-            <div key={index} style={{ border: '1px solid #ccc', borderRadius: '8px', padding: '1em', flex: '1 1 calc(33% - 1em)', boxSizing: 'border-box' }}>
-              <p><strong>Tier {index + 1}:</strong></p>
-              <p><strong>Display Name:</strong> {tier.DisplayName}</p>
-              <p><strong>Description:</strong> {tier.Desc}</p>
-              <div style={{ minWidth: '250px' }}>
-                <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
+
+      <div style={{ marginTop: '20px' }}>
+        <h3>Tiers</h3>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '10px' }}>
+          {configData.Tiers.map((tier, index) => {
+            const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : '#eee';
+            return (
+              <div key={index} style={{
+                display: 'flex',
+                alignItems: 'center',
+                padding: '10px 15px',
+                background: '#fff',
+                borderRadius: '12px',
+                border: `1px solid ${rarityColor}`,
+                borderLeftWidth: '6px',
+                boxShadow: '0 2px 4px rgba(0,0,0,0.03)'
+              }}>
+                {/* Icon */}
+                <div style={{
+                  width: '48px',
+                  height: '48px',
+                  minWidth: '48px',
+                  marginRight: '15px',
+                  borderRadius: '8px',
+                  background: '#f5f5f5',
+                  padding: '4px',
+                  display: 'flex',
+                  alignItems: 'center',
+                  justifyContent: 'center'
+                }}>
+                  <ImageComponent
+                    src={tier.Icon}
+                    alt={tier.DisplayName}
+                    style={{ width: '100%', height: '100%', objectFit: 'contain' }}
+                  />
+                </div>
+
+                {/* Info */}
+                <div style={{ flex: 1, display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                  <div style={{ fontWeight: 'bold', fontSize: '1.1em', color: '#333' }}>
+                    {tier.DisplayName}
+                  </div>
+                  <div style={{ fontSize: '0.85em', color: '#888' }}>
+                    Tier {index + 1}
+                  </div>
+                </div>
+
+                {/* Stats */}
+                <div style={{ display: 'flex', gap: '20px', alignItems: 'center' }}>
+                  <div style={{ textAlign: 'right' }}>
+                    <div style={{ fontSize: '0.8em', color: '#999', textTransform: 'uppercase', fontWeight: '600' }}>Power</div>
+                    <div style={{ fontWeight: 'bold', color: '#1976d2' }}>{formatGigantix(tier.Power)}%</div>
+                  </div>
+                  <div style={{ textAlign: 'right' }}>
+                    <div style={{ fontSize: '0.8em', color: '#999', textTransform: 'uppercase', fontWeight: '600' }}>Time</div>
+                    <div style={{ fontWeight: 'bold', color: '#333' }}>{formatGigantix(tier.Time)}s</div>
+                  </div>
+                </div>
               </div>
-              <p><strong>Power:</strong> {tier.Power}</p>
-              <p><strong>Time:</strong> {tier.Time}</p>
-              <p><strong>Rarity:</strong> {tier.Rarity.DisplayName}</p>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
     </div>

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

@@ -1,38 +1,47 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
 
 const RandomEventsComponent: React.FC<{
   configData: CollectionConfigData<"RandomEvents">;
 }> = ({ configData }) => {
   return (
-    <div>
-      <h2>Random Event: {configData.Name}</h2>
-      <div>
-        <ImageComponent src={configData.Icon} alt={configData.Name} />
-        <p>Color: {configData.Color}</p>
-        <p>Duration: {configData.Duration} seconds</p>
-        <p>Breaking Requirement: {configData.BreakingRequirement}</p>
-        <p>Playtime Requirement: {configData.PlaytimeRequirement} minutes</p>
-        <p>Chance: {configData.Chance}</p>
-        <p>Allow in Zones: {configData.AllowInZones ? "Yes" : "No"}</p>
-        <p>Allow in Instances: {configData.AllowInInstances ? "Yes" : "No"}</p>
-        <p>Allow Multiple: {configData.AllowMultiple ? "Yes" : "No"}</p>
-        {configData.MinimumZone && (
-          <p>Minimum Zone: {configData.MinimumZone}</p>
-        )}
+    <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: undefined,
+            name: configData.Name
+          }}
+          rarityColor={configData.Color}
+        />
+      </div>
+
+      <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '10px', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Color:</strong> <span style={{ color: configData.Color }}>{configData.Color}</span></p>
+        <p><strong>Duration:</strong> {configData.Duration}s</p>
+        <p><strong>Chance:</strong> {configData.Chance}</p>
+        {configData.BreakingRequirement && <p><strong>Break Req:</strong> {configData.BreakingRequirement}</p>}
       </div>
-      <div>
-        <h3>Area Whitelist:</h3>
-        <ul>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.1em', marginBottom: '10px' }}>Area Whitelist</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '5px', justifyContent: 'center' }}>
           {Object.entries(configData.AreaWhitelist).map(
             ([area, allowed], index) => (
-              <li key={index}>
-                {area.replace("_", " ")}: {allowed ? "Yes" : "No"}
-              </li>
+              allowed && (
+                <span key={index} className="badge">
+                  {area.replace(/_/g, " ")}
+                </span>
+              )
             ),
           )}
-        </ul>
+        </div>
       </div>
     </div>
   );

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

@@ -1,78 +1,203 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
 
+import { useItemResolution } from "../hooks/useItemResolution";
+import ItemCard from "./ItemCard";
+import { useExpandableList } from "../hooks/useExpandableList";
+
 const RanksComponent: React.FC<{
   configData: CollectionConfigData<"Ranks">;
 }> = ({ configData }) => {
-  return (
-    <div>
-      <h2>Rank: {configData.Title}</h2>
-      <p>Rank Number: {configData.RankNumber}</p>
-      <p>Max Enchants Equipped: {configData.MaxEnchantsEquipped}</p>
-      <p>Maximum Active Goals: {configData.MaximumActiveGoals}</p>
-      <p>Unlockable Egg Slots: {configData.UnlockableEggSlots}</p>
-      <p>Unlockable Pet Slots: {configData.UnlockablePetSlots}</p>
-      {configData.RequiredRebirth && (
-        <p>Required Rebirth: {configData.RequiredRebirth}</p>
-      )}
-      {configData.RequiredZone && (
-        <p>Required Zone: {configData.RequiredZone}</p>
-      )}
+  const { loading, resolveItem, getRarityColor } = useItemResolution();
+  const goalsLength = React.useMemo(() => Array.isArray(configData.Goals) ? configData.Goals.length : 0, [configData.Goals]);
+  const { expandedIndices, toggle, expandAll, collapseAll, isExpanded } = useExpandableList(goalsLength);
 
-      <div>
-        <h3>Goals:</h3>
-        {configData.Goals.map((goalSet, index) => (
-          <div key={index}>
-            <h4>Goal Set {index + 1}</h4>
-            <ul>
-              {goalSet.map((goal, goalIndex) => (
-                <li key={goalIndex}>
-                  <p>Type: {goal.Type}</p>
-                  <p>Amount: {goal.Amount}</p>
-                  <p>Weight: {goal.Weight}</p>
-                  {goal.CurrencyID && <p>Currency ID: {goal.CurrencyID}</p>}
-                  {goal.BreakableType && (
-                    <p>Breakable Type: {goal.BreakableType}</p>
-                  )}
-                  {goal.PotionTier && <p>Potion Tier: {goal.PotionTier}</p>}
-                  {goal.EnchantTier && <p>Enchant Tier: {goal.EnchantTier}</p>}
-                </li>
-              ))}
-            </ul>
-          </div>
-        ))}
+  if (loading) {
+    return (
+      <div style={{
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+        fontSize: "1.5rem",
+        color: "#888"
+      }}>
+        Loading reference data...
       </div>
+    );
+  }
 
-      <div>
-        <h3>Rewards:</h3>
-        <ul>
-          {configData.Rewards.map((reward, rewardIndex) => (
-            <li key={rewardIndex}>
-              <p>Stars Required: {reward.StarsRequired}</p>
-              <p>Reward Item ID: {reward.Item._data.id}</p>
-              {reward.Item._data._am && <p>Amount: {reward.Item._data._am}</p>}
-              {reward.Item._data.tn && <p>TN: {reward.Item._data.tn}</p>}
-            </li>
-          ))}
-        </ul>
-      </div>
+  /* renderItemCard logic moved to ItemCard.tsx */
 
-      {configData.RankUpRewards && (
-        <div>
-          <h3>Rank Up Rewards:</h3>
-          <ul>
-            {configData.RankUpRewards.map((reward, rewardIndex) => (
-              <li key={rewardIndex}>
-                <p>Reward Item ID: {reward._data.id}</p>
-                {reward._data._am && <p>Amount: {reward._data._am}</p>}
-                {reward._data.tn && <p>TN: {reward._data.tn}</p>}
-              </li>
-            ))}
-          </ul>
+  return (
+    <div style={{ width: "100%", height: "100%", boxSizing: "border-box" }}>
+      <div style={{ width: "100%" }}>
+
+        {/* Info Grid */}
+        <div style={{
+          display: "grid",
+          gridTemplateColumns: "repeat(auto-fit, minmax(180px, 1fr))",
+          gap: "16px",
+          marginBottom: "60px",
+          background: "#ffffff",
+          padding: "24px",
+          borderRadius: "20px",
+          boxShadow: "0 4px 20px rgba(0,0,0,0.05)"
+        }}>
+          <InfoItem label="Max Enchants" value={configData.MaxEnchantsEquipped} />
+          <InfoItem label="Max Goals" value={configData.MaximumActiveGoals} />
+          <InfoItem label="Egg Slots" value={configData.UnlockableEggSlots} />
+          <InfoItem label="Pet Slots" value={configData.UnlockablePetSlots} />
+          {configData.RequiredRebirth && <InfoItem label="Rebirth Req" value={configData.RequiredRebirth} />}
+          {configData.RequiredZone && <InfoItem label="Zone Req" value={configData.RequiredZone} />}
         </div>
-      )}
+
+        {/* Rewards Section */}
+        {configData.Rewards && configData.Rewards.length > 0 && (
+          <div style={{ marginBottom: "60px" }}>
+            <SectionTitle title="Rewards" />
+            <div style={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(200px, 1fr))",
+              gap: "24px"
+            }}>
+              {configData.Rewards.map((reward: any, i: number) => {
+                // Handle inconsistent reward structure if necessary
+                const data = reward.Item?._data || reward.Item || reward._data || reward;
+                const id = data.id || data._id || "Reward";
+                const amount = data._am || data.Amount || 1;
+                const tn = data.tn || data.Tier;
+                const itemData = resolveItem(id, tn);
+                return (
+                  <ItemCard
+                    key={`${id}-${tn}-${i}`}
+                    id={id}
+                    amount={amount}
+                    label={id}
+                    tn={tn}
+                    itemData={itemData}
+                    rarityColor={itemData?.rarity ? getRarityColor(itemData.rarity) : null}
+                  />
+                );
+              })}
+            </div>
+          </div>
+        )}
+
+        {/* Goals Section */}
+        {configData.Goals && (
+          <div>
+            <SectionTitle title="Goals" />
+
+            <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>
+
+            <div style={{ display: "flex", flexDirection: "column", gap: "20px" }}>
+              {Array.isArray(configData.Goals) ? configData.Goals.map((goalSet: any[], setIndex: number) => (
+                <div key={setIndex} style={{
+                  background: "#fff",
+                  borderRadius: "24px",
+                  padding: "30px",
+                  boxShadow: "0 2px 10px rgba(0,0,0,0.03)"
+                }}>
+                  <div
+                    onClick={() => toggle(setIndex)}
+                    style={{
+                      display: "flex",
+                      alignItems: "center",
+                      gap: "12px",
+                      cursor: "pointer",
+                      marginBottom: isExpanded(setIndex) ? "24px" : "0"
+                    }}
+                  >
+                    <div style={{
+                      background: "#ffcc00",
+                      width: "8px",
+                      height: "32px",
+                      borderRadius: "4px"
+                    }} />
+                    <h3 style={{
+                      fontSize: "1.5rem",
+                      color: "#444",
+                      fontWeight: "700",
+                      margin: 0
+                    }}>
+                      {isExpanded(setIndex) ? '▼' : '▶'} Goal Set {setIndex + 1}
+                    </h3>
+                  </div>
+
+                  {isExpanded(setIndex) && (
+                    <div style={{
+                      display: "grid",
+                      gridTemplateColumns: "repeat(auto-fill, minmax(180px, 1fr))",
+                      gap: "20px"
+                    }}>
+                      {goalSet.map((goal: any, index: number) => {
+                        // Determine ID and Label
+                        // Goals usually have Type (numeric) which we need to resolve
+                        // Sometimes they might have CurrencyID
+                        const id = String(goal.CurrencyID || goal.Type);
+                        const tn = goal.EnchantTier || goal.PotionTier || goal.Tier;
+                        const itemData = resolveItem(id, tn);
+                        // Label can be tricky, resolveItem will give us data, but for fallback prompt we use ID
+                        return (
+                          <ItemCard
+                            key={`${id}-${tn}-${index}`}
+                            id={id}
+                            amount={goal.Amount}
+                            label={id}
+                            tn={tn}
+                            weight={goal.Weight}
+                            typeId={goal.Type}
+                            itemData={itemData}
+                            rarityColor={itemData?.rarity ? getRarityColor(itemData.rarity) : null}
+                          />
+                        );
+                      })}
+                    </div>
+                  )}
+                </div>
+              )) : (
+                <div>No goals structure found</div>
+              )}
+            </div>
+          </div>
+        )}
+      </div>
     </div>
   );
 };
 
+// Helper Components
+const InfoItem = ({ label, value }: { label: string, value: any }) => (
+  <div style={{ display: "flex", flexDirection: "column", alignItems: "center" }}>
+    <span style={{ fontSize: "12px", color: "#999", textTransform: "uppercase", fontWeight: "700" }}>{label}</span>
+    <span style={{ fontSize: "18px", color: "#333", fontWeight: "800" }}>{typeof value === 'number' ? value.toLocaleString() : value}</span>
+  </div>
+);
+
+const SectionTitle = ({ title }: { title: string }) => (
+  <h2 style={{
+    fontSize: "2.2rem",
+    color: "#444",
+    marginBottom: "30px",
+    textAlign: "center",
+    position: "relative",
+    display: "inline-block",
+    left: "50%",
+    transform: "translateX(-50%)"
+  }}>
+    {title}
+    <div style={{
+      width: "60px",
+      height: "4px",
+      background: "#ffcc00",
+      borderRadius: "2px",
+      margin: "10px auto 0"
+    }} />
+  </h2>
+);
+
 export default RanksComponent;

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

@@ -4,14 +4,132 @@ import { CollectionConfigData } from "ps99-api";
 const RarityComponent: React.FC<{
   configData: CollectionConfigData<"Rarity">;
 }> = ({ configData }) => {
+  // Use the rarity color for styling
+  const rarityColor = configData.Color || "#333";
+  const glowColor = rarityColor;
+
   return (
-    <div>
-      <h2>Rarity: {configData.DisplayName}</h2>
-      <p>Rarity Number: {configData.RarityNumber}</p>
-      <p>Color: {configData.Color}</p>
-      <p>Announce: {configData.Announce ? "Yes" : "No"}</p>
+    <div style={{
+      padding: "40px",
+      fontFamily: "'Nunito', 'Segoe UI', sans-serif",
+      backgroundColor: "#f9f9f9",
+      minHeight: "100vh",
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center"
+    }}>
+
+      {/* Rarity Showcase Card */}
+      <div style={{
+        background: "#fff",
+        borderRadius: "24px",
+        padding: "40px",
+        boxShadow: `0 10px 40px ${glowColor}40`,
+        border: `3px solid ${rarityColor}`,
+        maxWidth: "600px",
+        width: "100%",
+        textAlign: "center",
+        marginBottom: "40px",
+        position: "relative",
+        overflow: "hidden",
+        transition: "transform 0.3s ease",
+        cursor: "default"
+      }}
+        onMouseEnter={(e) => {
+          e.currentTarget.style.transform = "scale(1.02)";
+        }}
+        onMouseLeave={(e) => {
+          e.currentTarget.style.transform = "scale(1)";
+        }}
+      >
+        {/* Background Glow */}
+        <div style={{
+          position: "absolute",
+          top: "-50%",
+          left: "50%",
+          transform: "translateX(-50%)",
+          width: "150%",
+          height: "300px",
+          background: `radial-gradient(circle, ${rarityColor}33 0%, transparent 70%)`,
+          pointerEvents: "none",
+          zIndex: 0
+        }} />
+
+        <div style={{ position: "relative", zIndex: 1 }}>
+          <h1 style={{
+            fontSize: "3.5rem",
+            fontWeight: "900",
+            color: rarityColor,
+            margin: "0 0 10px 0",
+            textShadow: `0 2px 10px ${glowColor}60`
+          }}>
+            {configData.DisplayName}
+          </h1>
+          <div style={{
+            fontSize: "1.2rem",
+            color: "#888",
+            fontWeight: "700",
+            textTransform: "uppercase",
+            letterSpacing: "2px"
+          }}>
+            Rarity #{configData.RarityNumber}
+          </div>
+        </div>
+      </div>
+
+      {/* Exhaustive Data Grid */}
+      <div style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(auto-fit, minmax(200px, 1fr))",
+        gap: "20px",
+        maxWidth: "800px",
+        width: "100%"
+      }}>
+        {Object.entries(configData).map(([key, value]) => {
+          // Skip rendering complex objects if intended for simple display, or stringify them
+          if (typeof value === 'object' && value !== null) {
+            return (
+              <DataCard key={key} label={key} value={JSON.stringify(value)} color={rarityColor} />
+            );
+          }
+          return (
+            <DataCard key={key} label={key} value={String(value)} color={rarityColor} />
+          );
+        })}
+      </div>
+
     </div>
   );
 };
 
+const DataCard = ({ label, value, color }: { label: string, value: string, color: string }) => (
+  <div style={{
+    background: "#fff",
+    padding: "20px",
+    borderRadius: "16px",
+    boxShadow: "0 4px 15px rgba(0,0,0,0.05)",
+    borderLeft: `4px solid ${color}`,
+    display: "flex",
+    flexDirection: "column",
+    wordBreak: "break-word"
+  }}>
+    <span style={{
+      fontSize: "12px",
+      color: "#aaa",
+      fontWeight: "700",
+      textTransform: "uppercase",
+      marginBottom: "8px"
+    }}>
+      {label}
+    </span>
+    <span style={{
+      fontSize: "16px",
+      color: "#333",
+      fontWeight: "600"
+    }}>
+      {value}
+    </span>
+  </div>
+);
+
 export default RarityComponent;