ps99-api 2.4.0 → 2.6.0

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

@@ -1,5 +1,5 @@
-import React, { lazy, Suspense } from "react";
-import { useParams } from "react-router-dom";
+import React, { lazy, Suspense, useState } from "react";
+import { useParams, useNavigate } from "react-router-dom";
 import { CollectionName, CollectionConfigData } from "ps99-api";
 import { GenericFetchComponent } from "./GenericFetchComponent";
 
@@ -7,6 +7,7 @@ interface DynamicCollectionConfigDataProps {
   collectionName?: CollectionName;
   configName?: string;
   render?: (configData: CollectionConfigData<any>) => React.ReactNode; // Add render prop
+  additionalProps?: any; // Add additional props to pass to the rendered component
 }
 
 const DynamicCollectionConfigData: React.FC<
@@ -17,26 +18,182 @@ const DynamicCollectionConfigData: React.FC<
     configName: string;
   }>();
 
+  const navigate = useNavigate();
   const collectionName = props.collectionName || params.collectionName;
   const configName = props.configName || params.configName;
 
-  if (!collectionName || !configName) {
+  const [viewMode, setViewMode] = useState<'render' | 'schema'>('render');
+
+  /*
+   * We need to use useMemo here to prevent the component from being re-created
+   * on every render. This usage of useMemo is safe because the import path
+   * depends only on collectionName, and we want to re-create the component
+   * only when collectionName changes.
+   */
+  /*
+   * We need to use useMemo here to prevent the component from being re-created
+   * on every render. This usage of useMemo is safe because the import path
+   * depends only on collectionName, and we want to re-create the component
+   * only when collectionName changes.
+   */
+  const Component = React.useMemo(() => {
+    if (!collectionName) return null;
+    // Capitalize first letter to match file naming convention (e.g. "pets" -> "Pets")
+    // This fixes issues where navigation uses lowercase but files are Capitalized
+    const formattedName = collectionName.charAt(0).toUpperCase() + collectionName.slice(1);
+    return lazy(() => import(`./${formattedName}Component`));
+  }, [collectionName]);
+
+  if (!collectionName || !configName || !Component) {
     return <div>Invalid collection or config name</div>;
   }
 
-  const Component = lazy(() => import(`./${collectionName}Component`));
-
   return (
-    <Suspense fallback={<div>Loading...</div>}>
-      <GenericFetchComponent
-        collectionName={collectionName}
-        configName={configName}
-        render={
-          props.render ||
-          ((configData) => <Component configData={configData} />)
-        } // Use render prop if provided
-      />
-    </Suspense>
+    <div style={{ display: "flex", flexDirection: "column", height: "100%", width: "100%" }}>
+      {/* Header with Close Button */}
+      <div style={{
+        padding: "15px 20px",
+        borderBottom: "4px solid #333",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        backgroundColor: "#fff",
+        flexShrink: 0,
+      }}>
+        <div
+          style={{ display: "flex", alignItems: "center", gap: "10px", cursor: "pointer" }}
+          onClick={() => {
+            navigator.clipboard.writeText(window.location.href);
+            // visual feedback could be added here, e.g. a small alert or changing the icon color briefly
+            const icon = document.getElementById('link-icon-path');
+            if (icon) icon.style.fill = '#4caf50';
+            setTimeout(() => { if (icon) icon.style.fill = '#ccc'; }, 1000);
+          }}
+          title="Click to copy link to this item"
+          onMouseEnter={(e) => {
+            const icon = e.currentTarget.querySelector('.link-icon');
+            if (icon) (icon as HTMLElement).style.opacity = '1';
+          }}
+          onMouseLeave={(e) => {
+            const icon = e.currentTarget.querySelector('.link-icon');
+            if (icon) (icon as HTMLElement).style.opacity = '0';
+          }}
+        >
+          <h2 style={{
+            margin: 0,
+            fontSize: "2rem",
+            fontWeight: "900",
+            color: "#333",
+            textShadow: "2px 2px 0px #eee",
+            fontFamily: "'Fredoka One', cursive, sans-serif",
+            textTransform: "capitalize",
+          }}>
+            {configName}
+          </h2>
+          <svg
+            className="link-icon"
+            xmlns="http://www.w3.org/2000/svg"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="#ccc"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+            style={{ opacity: 0, transition: 'opacity 0.2s' }}
+          >
+            <path id="link-icon-path" d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+            <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+          </svg>
+        </div>
+
+        <div style={{ display: 'flex', gap: '10px' }}>
+          <button
+            onClick={() => setViewMode(prev => prev === 'render' ? 'schema' : 'render')}
+            style={{
+              width: "48px",
+              height: "48px",
+              borderRadius: "12px",
+              backgroundColor: viewMode === 'render' ? "#2196f3" : "#4caf50",
+              color: "white",
+              border: `4px solid ${viewMode === 'render' ? "#1565c0" : "#2e7d32"}`,
+              fontSize: "20px",
+              fontWeight: "900",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              boxShadow: `inset 0 4px 4px rgba(255,255,255,0.4), 0 4px 0 ${viewMode === 'render' ? "#0d47a1" : "#1b5e20"}`,
+              fontFamily: "monospace"
+            }}
+            title={viewMode === 'render' ? "View Raw Schema" : "View Rendered Item"}
+          >
+            {viewMode === 'render' ? "{}" : "👁️"}
+          </button>
+
+          <button
+            onClick={() => navigate(`/collections/${collectionName}`)}
+            style={{
+              width: "48px",
+              height: "48px",
+              borderRadius: "12px",
+              backgroundColor: "#ff0055",
+              color: "white",
+              border: "4px solid #900",
+              fontSize: "24px",
+              fontWeight: "900",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              cursor: "pointer",
+              boxShadow: "inset 0 4px 4px rgba(255,255,255,0.4), 0 4px 0 #500",
+            }}
+          >
+            X
+          </button>
+        </div>
+      </div>
+
+      <div style={{ flex: 1, overflowY: "auto", padding: "20px" }}>
+        <Suspense fallback={<div>Loading...</div>}>
+          <GenericFetchComponent
+            // We use the key prop to force a re-mount of the component when the
+            // collectionName or configName changes. This ensures that the internal
+            // state of the GenericFetchComponent is reset and the new data is
+            // fetched correctly, preventing stale data from being passed to the
+            // child component.
+            key={`${collectionName}-${configName}`}
+            collectionName={collectionName}
+            configName={configName}
+            render={
+              (configData: CollectionConfigData<any>) => {
+                if (viewMode === 'schema') {
+                  return (
+                    <div style={{
+                      padding: '20px',
+                      background: '#1e1e1e',
+                      color: '#d4d4d4',
+                      borderRadius: '12px',
+                      overflow: 'auto',
+                      height: '100%',
+                      fontFamily: 'Consolas, Monaco, "Andale Mono", "Ubuntu Mono", monospace',
+                      fontSize: '0.9rem',
+                      textAlign: 'left',
+                      boxShadow: 'inset 0 0 20px rgba(0,0,0,0.5)',
+                      border: '2px solid #333'
+                    }}>
+                      <pre style={{ margin: 0 }}>{JSON.stringify(configData, null, 2)}</pre>
+                    </div>
+                  );
+                }
+                return props.render ? props.render(configData) : <Component configData={configData} {...props.additionalProps} />;
+              }
+            } // Use render prop if provided
+          />
+        </Suspense>
+      </div>
+    </div>
   );
 };
 

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

@@ -1,14 +1,31 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
 import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const EggsComponent: React.FC<{
   configData: CollectionConfigData<"Eggs">;
 }> = ({ configData }) => {
+  const { getRarityColor, resolveItem } = useItemResolution();
+  const rarityColor = configData.rarity ? getRarityColor(configData.rarity) : null;
+
   return (
-    <div>
-      <h2>{configData.name}</h2>
-      <ImageComponent src={configData.icon} alt={configData.name} />
+    <div style={{ width: "100%", height: "100%", boxSizing: "border-box" }}>
+      <div style={{ width: '300px', margin: '0 auto 20px auto' }}>
+        <ItemCard
+          id={configData.name}
+          amount={1}
+          label={configData.name}
+          itemData={{
+            icon: configData.icon,
+            rarity: configData.rarity,
+            name: configData.name
+          }}
+          rarityColor={rarityColor}
+          typeId={(configData as any)._index}
+        />
+      </div>
       <p>Currency: {configData.currency}</p>
       <p>Override Cost: {configData.overrideCost}</p>
       {configData.isCustomEgg && <p>Custom Egg: Yes</p>}
@@ -29,15 +46,36 @@ const EggsComponent: React.FC<{
         </div>
       )}
       <h3>Pets:</h3>
-      <ul>
-        {configData.pets.map((pet, index) => (
-          <li key={index}>
-            <p>Name: {pet[0]}</p>
-            <p>Chance: {pet[1]}</p>
-            {pet[2] && <p>Tier: {pet[2]}</p>}
-          </li>
-        ))}
-      </ul>
+      <div style={{ marginTop: '15px' }}>
+        <h3 style={{ borderBottom: '1px solid #eee', paddingBottom: '5px' }}>Pets</h3>
+        <div style={{ display: 'grid', gridTemplateColumns: 'repeat(auto-fill, minmax(120px, 1fr))', gap: '16px' }}>
+          {configData.pets.map((pet, index) => {
+            const petName = pet[0];
+            const chance = pet[1];
+            // The 3rd element appears to be the tier (tn), based on existing code usage
+            const tn = pet[2];
+            const resolvedItem = resolveItem(petName, tn);
+            const rarityColor = resolvedItem?.rarity ? getRarityColor(resolvedItem.rarity) : null;
+
+            return (
+              <div key={index} style={{
+                // Auto-sizing handled by grid
+              }}>
+                <ItemCard
+                  id={petName}
+                  // Formatting chance as string to include %
+                  amount={`${chance}%`}
+                  label={resolvedItem?.name || petName}
+                  itemData={resolvedItem}
+                  rarityColor={rarityColor}
+                  tn={tn}
+                // weight or typeId not strictly needed here unless we want debug info
+                />
+              </div>
+            );
+          })}
+        </div>
+      </div>
       {configData.productIds && (
         <div>
           <h3>Product IDs:</h3>

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

@@ -1,52 +1,98 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const EnchantsComponent: React.FC<{
   configData: CollectionConfigData<"Enchants">;
 }> = ({ 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'
+        }}>
+          <img src={tier.Icon} alt={tier.DisplayName} style={{ width: '100%', height: '100%', objectFit: 'contain' }} />
+        </div>
+
+        <div style={{ textAlign: 'center', maxWidth: '400px' }}>
+          {configData.BaseTier !== 1 && <p><strong>Base Tier:</strong> {configData.BaseTier}</p>}
+          {configData.MaxTier !== 1 && <p><strong>Max Tier:</strong> {configData.MaxTier}</p>}
+          {configData.DiminishPowerThreshold && <p><strong>Diminish:</strong> {configData.DiminishPowerThreshold}</p>}
+          {configData.EmpoweredBoost && <p><strong>Empowered Boost:</strong> {configData.EmpoweredBoost}</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>
+          <p style={{ fontWeight: '900', fontSize: '1.2em', color: '#333' }}>Power: {tier.Power}</p>
+        </div>
+      </div>
+    );
+  }
+
   return (
-    <div>
-      <h2>Enchantment</h2>
-      <p>Base Tier: {configData.BaseTier}</p>
-      <p>Max Tier: {configData.MaxTier}</p>
-      <p>Max Page: {configData.MaxPage}</p>
-      {configData.DiminishPowerThreshold && (
-        <p>Diminish Power Threshold: {configData.DiminishPowerThreshold}</p>
-      )}
-      {configData.EmpoweredBoost && (
-        <p>Empowered Boost: {configData.EmpoweredBoost}</p>
-      )}
-      {configData.ProductId && <p>Product ID: {configData.ProductId}</p>}
-      <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",
-              width: "calc(33% - 1em)",
-              boxSizing: "border-box",
-            }}
-          >
-            <ImageComponent src={tier.Icon} alt={tier.DisplayName} />
-            <h4>{tier.DisplayName}</h4>
-            <p>
-              <strong>Description:</strong> {tier.Desc}
-            </p>
-            <p>
-              <strong>Power:</strong> {tier.Power}
-            </p>
-            <p>
-              <strong>Rarity:</strong> {tier.Rarity.DisplayName}
-            </p>
-            <p>
-              <strong>Rarity Number:</strong> {tier.Rarity.RarityNumber}
-            </p>
-          </div>
-        ))}
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <div style={{ textAlign: 'left', marginBottom: '20px', display: 'grid', gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', gap: '10px' }}>
+        <p><strong>Base Tier:</strong> {configData.BaseTier}</p>
+        <p><strong>Max Tier:</strong> {configData.MaxTier}</p>
+        <p><strong>Max Page:</strong> {configData.MaxPage}</p>
+        {configData.DiminishPowerThreshold && (
+          <p><strong>Diminish Threshold:</strong> {configData.DiminishPowerThreshold}</p>
+        )}
+        {configData.EmpoweredBoost && (
+          <p><strong>Empowered Boost:</strong> {configData.EmpoweredBoost}</p>
+        )}
+        {configData.ProductId && <p><strong>Product ID:</strong> {configData.ProductId}</p>}
+      </div>
+      <h3>Tiers</h3>
+      <div style={{ display: "grid", gridTemplateColumns: 'repeat(auto-fill, minmax(150px, 1fr))', gap: "15px" }}>
+        {configData.Tiers.map((tier, index) => {
+          const rarityColor = tier.Rarity ? getRarityColor(tier.Rarity) : null;
+          return (
+            <div
+              key={index}
+              style={{
+                display: 'flex',
+                flexDirection: 'column',
+                height: '100%'
+              }}
+            >
+              <ItemCard
+                id={tier.DisplayName}
+                amount={1}
+                label={tier.DisplayName}
+                tn={index + 1}
+                itemData={{
+                  icon: tier.Icon,
+                  rarity: tier.Rarity,
+                  name: tier.DisplayName
+                }}
+                rarityColor={rarityColor}
+              />
+              <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+                <p>{tier.Desc}</p>
+                <p style={{ fontWeight: 'bold', color: '#333' }}>Power: {tier.Power}</p>
+              </div>
+            </div>
+          );
+        })}
       </div>
     </div>
   );

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

@@ -1,35 +1,49 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const FishingRodsComponent: React.FC<{
   configData: CollectionConfigData<"FishingRods">;
 }> = ({ configData }) => {
   return (
-    <div>
+    <div className="game-card" style={{ maxWidth: '500px', margin: '0 auto' }}>
       <h2>{configData.DisplayName}</h2>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      <p>Fishing Chance: {configData.FishingChance}</p>
-      <p>Fishing Currency Multiplier: {configData.FishingCurrencyMultiplier}</p>
-      <p>Minimum Fishing Time: {configData.MinFishingTime} seconds</p>
-      <p>
-        Fishing Game Speed Multiplier: {configData.FishingGameSpeedMultiplier}
-      </p>
-      <p>Bar Size: {configData.BarSize}</p>
-      <p>Associated Item ID: {configData.AssociatedItemID}</p>
-      {configData.MerchantSalePrice && (
-        <p>Merchant Sale Price: {configData.MerchantSalePrice}</p>
-      )}
-      <h3>Fishing Odds:</h3>
-      <ul>
-        {configData.FishingOdds.map((odds, index) => (
-          <li key={index}>
-            {odds[0]}: {odds[1]}%
-          </li>
-        ))}
-      </ul>
+
+      <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', marginBottom: '20px', textAlign: 'left' }}>
+        <p><strong>Chance:</strong> {configData.FishingChance}%</p>
+        <p><strong>Currency:</strong> {configData.FishingCurrencyMultiplier}x</p>
+        <p><strong>Speed:</strong> {configData.FishingGameSpeedMultiplier}x</p>
+        <p><strong>Bar Size:</strong> {configData.BarSize}</p>
+      </div>
+
+      <div style={{ borderTop: '1px solid #eee', paddingTop: '15px' }}>
+        <h3 style={{ fontSize: '1.1em', marginBottom: '10px' }}>Fishing Odds</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+          {configData.FishingOdds.map((odds, index) => (
+            <span key={index} className="badge" style={{ background: '#e3f2fd', color: '#1565c0', border: '1px solid #90caf9' }}>
+              {odds[0]}: {odds[1]}%
+            </span>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };
 
+
 export default FishingRodsComponent;

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

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from "react";
+import { useLocation } from "react-router-dom";
 import { useOnlineStatus } from "../hooks/useOnlineStatus";
 
 const Footer: React.FC = () => {
@@ -6,6 +7,18 @@ const Footer: React.FC = () => {
   const [lastUpdate, setLastUpdate] = useState<string | null>(null);
   const [loading, setLoading] = useState(false);
 
+  const location = useLocation();
+  const isCollectionsRoute = location.pathname.startsWith("/collections");
+  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
+
+  useEffect(() => {
+    const handleResize = () => setIsMobile(window.innerWidth < 768);
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, []);
+
+
+
   const updateLastUpdate = () => {
     setLastUpdate(new Date().toLocaleString());
   };
@@ -30,15 +43,12 @@ const Footer: React.FC = () => {
     };
   }, []);
 
+  if (isMobile && isCollectionsRoute) {
+    return null;
+  }
+
   return (
-    <footer
-      style={{
-        textAlign: "center",
-        padding: "1em",
-        background: "#f8f9fa",
-        borderTop: "1px solid #ccc",
-      }}
-    >
+    <footer className="game-footer">
       <div
         style={{
           display: "flex",

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

@@ -1,27 +1,50 @@
 import React from "react";
 import { CollectionConfigData } from "ps99-api";
-import ImageComponent from "./ImageComponent";
+import ItemCard from "./ItemCard";
+import { useItemResolution } from "../hooks/useItemResolution";
 
 const FruitsComponent: React.FC<{
   configData: CollectionConfigData<"Fruits">;
 }> = ({ configData }) => {
+  const { getRarityColor } = useItemResolution();
+  const rarityColor = configData.Rarity ? getRarityColor(configData.Rarity) : null;
+
   return (
-    <div>
-      <h2>{configData.DisplayName}</h2>
-      <ImageComponent src={configData.Icon} alt={configData.DisplayName} />
-      <p>Duration: {configData.Duration} seconds</p>
-      <p>Rarity: {configData.Rarity.DisplayName}</p>
-      <p>Rarity Number: {configData.Rarity.RarityNumber}</p>
-      {configData.Desc && <p>Description: {configData.Desc}</p>}
-      {configData.IgnoreFruitMachine && <p>Ignore Fruit Machine: Yes</p>}
-      <h3>Boosts:</h3>
-      <ul>
-        {configData.Boost.map((boost, index) => (
-          <li key={index}>
-            {boost.Type}: {boost.Amount}
-          </li>
-        ))}
-      </ul>
+    <div style={{ width: '100%', height: '100%', boxSizing: 'border-box' }}>
+      <ItemCard
+        id={configData.DisplayName}
+        amount={1}
+        label={configData.DisplayName}
+        itemData={{
+          icon: configData.Icon,
+          rarity: configData.Rarity,
+          name: configData.DisplayName
+        }}
+        rarityColor={rarityColor}
+      />
+      <div style={{ marginTop: '10px', fontSize: '0.9em', color: '#666', textAlign: 'center' }}>
+        <p>Duration: {configData.Duration}s</p>
+        {configData.Desc && <p>{configData.Desc}</p>}
+        {configData.IgnoreFruitMachine && <p>Ignore Fruit Machine</p>}
+      </div>
+      <div style={{ marginTop: '15px' }}>
+        <h3 style={{ textAlign: 'center', fontSize: '1.1em' }}>Boosts</h3>
+        <div style={{ display: 'flex', flexWrap: 'wrap', gap: '8px', justifyContent: 'center' }}>
+          {configData.Boost.map((boost, index) => (
+            <span key={index} style={{
+              background: '#e8f5e9',
+              color: '#2e7d32',
+              padding: '5px 10px',
+              borderRadius: '12px',
+              fontSize: '0.9em',
+              fontWeight: 'bold',
+              border: '1px solid #a5d6a7'
+            }}>
+              {boost.Type}: {boost.Amount}
+            </span>
+          ))}
+        </div>
+      </div>
     </div>
   );
 };

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

@@ -59,5 +59,13 @@ export const GenericFetchComponent = <T,>({
     return <div>Loading...</div>;
   }
 
-  return <div>{render(data)}</div>;
+  return (
+    <div style={{
+      width: '100%',
+      padding: '20px',
+      boxSizing: 'border-box'
+    }}>
+      {render(data)}
+    </div>
+  );
 };