@anker-in/ui 0.1.5 → 0.1.8

package/dist/demo-room.mjs

@@ -14,7 +14,7 @@ var Title = ({
   title = "",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsx("h2", { className: "text-[48px] font-semibold mb-12 text-[#080A0F]", children: title }) });
+  return /* @__PURE__ */ jsx("div", { className: cn("w-full"), ...props, children: /* @__PURE__ */ jsx("h2", { className: "text-[32px] min-l:text-[48px] font-bold mb-12 text-[#080A0F]", children: title }) });
 };
 Title.displayName = "Title";
 var StudioCard = ({
@@ -22,18 +22,18 @@ var StudioCard = ({
   name,
   availableTime,
   address,
-  city,
-  state,
-  zipCode,
-  country = "United States",
   euifyMakeModel,
   distance,
   onSchedule,
+  pageData = {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
   className,
   style,
   ...props
 }) => {
-  const fullAddress = `${address}, ${city}, ${state} ${country} ${zipCode}`;
   const [isHovered, setIsHovered] = React2.useState(false);
   const handleScheduleClick = () => {
     onSchedule?.(code);
@@ -66,7 +66,8 @@ var StudioCard = ({
           /* @__PURE__ */ jsx("h3", { className: "text-xl font-semibold text-gray-900", children: name }),
           distance !== void 0 && /* @__PURE__ */ jsxs("span", { className: "text-sm font-medium text-[#2E8B57] bg-[#E8F5E9] px-3 py-1 rounded-full whitespace-nowrap ml-2", children: [
             formatDistance(distance),
-            " away"
+            " ",
+            pageData.away
           ] })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-3", children: [
@@ -123,7 +124,8 @@ var StudioCard = ({
             }
           ),
           /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsxs("p", { className: "text-sm text-gray-600", children: [
-            "Available ",
+            pageData.available,
+            " ",
             availableTime
           ] }) })
         ] }),
@@ -157,7 +159,7 @@ var StudioCard = ({
               ]
             }
           ),
-          /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600", children: fullAddress }) })
+          /* @__PURE__ */ jsx("div", { className: "flex-1", children: /* @__PURE__ */ jsx("p", { className: "text-sm text-gray-600 break-words", children: address }) })
         ] }),
         /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3 mb-6", children: [
           /* @__PURE__ */ jsxs(
@@ -214,10 +216,10 @@ var StudioCard = ({
               "w-full px-6 py-3 rounded-full",
               "bg-white text-gray-900 border border-gray-900",
               "font-medium text-sm",
-              "hover:bg-gray-900",
+              "hover:bg-gray-900 hover:text-white",
               "transition-all duration-200"
             ),
-            children: "Schedule Now"
+            children: pageData.scheduleNow
           }
         )
       ]
@@ -249,6 +251,12 @@ var StudioMap = ({
   defaultZoom = 4,
   mapHeight = "600px",
   onSchedule,
+  pageData = {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
   className,
   ...props
 }) => {
@@ -347,13 +355,13 @@ var StudioMap = ({
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                       <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
                     </svg>
-                    <span style="vertical-align: middle;">Available ${location.availableTime}</span>
+                    <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
                   </div>` : ""}
             <div style="margin-bottom: 8px; color: #666;">
               <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                 <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
               </svg>
-              <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
+              <span style="vertical-align: middle;">${location.address}</span>
             </div>
             ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
                     <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -377,7 +385,7 @@ var StudioMap = ({
               onmouseover="this.style.background='#333'"
               onmouseout="this.style.background='#000'"
             >
-              Schedule Now
+              ${pageData.scheduleNow}
             </button>
           </div>
         `;
@@ -433,13 +441,13 @@ var StudioMap = ({
                   <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M6 2a1 1 0 00-1 1v1H4a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V6a2 2 0 00-2-2h-1V3a1 1 0 10-2 0v1H7V3a1 1 0 00-1-1zm0 5a1 1 0 000 2h8a1 1 0 100-2H6z"/>
                   </svg>
-                  <span style="vertical-align: middle;">Available ${location.availableTime}</span>
+                  <span style="vertical-align: middle;">${pageData.available} ${location.availableTime}</span>
                 </div>` : ""}
           <div style="margin-bottom: 8px; color: #666;">
             <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
               <path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10 18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z" clip-rule="evenodd"/>
             </svg>
-            <span style="vertical-align: middle;">${location.address}, ${location.city}, ${location.state} ${location.country} ${location.zipCode}</span>
+            <span style="vertical-align: middle;">${location.address}</span>
           </div>
           ${location.euifyMakeModel ? `<div style="margin-bottom: 12px; color: #666;">
                   <svg style="display: inline-block; width: 16px; height: 16px; margin-right: 4px; vertical-align: middle;" fill="currentColor" viewBox="0 0 20 20">
@@ -463,7 +471,7 @@ var StudioMap = ({
             onmouseover="this.style.background='#333'"
             onmouseout="this.style.background='#000'"
           >
-            Schedule Now
+            ${pageData.scheduleNow}
           </button>
         </div>
       `;
@@ -499,7 +507,7 @@ var StudioMap = ({
         ),
         style: { height: mapHeight },
         ...props,
-        children: /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Google Maps API Key is required" })
+        children: /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: pageData.apiKeyRequired })
       }
     );
   }
@@ -512,7 +520,7 @@ var StudioMap = ({
         /* @__PURE__ */ jsx("div", { ref: mapRef, style: { height: mapHeight } }),
         !isLoaded && /* @__PURE__ */ jsx("div", { className: "absolute inset-0 flex items-center justify-center bg-gray-100", children: /* @__PURE__ */ jsxs("div", { className: "text-center", children: [
           /* @__PURE__ */ jsx("div", { className: "inline-block animate-spin rounded-full h-8 w-8 border-4 border-gray-300 border-t-gray-900 mb-2" }),
-          /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: "Loading map..." })
+          /* @__PURE__ */ jsx("p", { className: "text-gray-600", children: pageData.loadingMap })
         ] }) })
       ]
     }
@@ -608,65 +616,6 @@ var AntdMobileIsolated = ({
 AntdMobileIsolated.displayName = "AntdMobileIsolated";
 
 // src/components/DemoRoom/utils/addressParser.ts
-var KNOWN_COUNTRIES = [
-  "United States",
-  "United Kingdom",
-  "American Samoa",
-  "United Arab Emirates",
-  "Bosnia and Herzegovina",
-  "Trinidad and Tobago",
-  "Saint Kitts and Nevis",
-  "Antigua and Barbuda",
-  "Saint Vincent and the Grenadines",
-  "S\xE3o Tom\xE9 and Pr\xEDncipe",
-  "United States Minor Outlying Islands",
-  "British Virgin Islands",
-  "United States Virgin Islands",
-  "Cayman Islands",
-  "Cook Islands",
-  "Falkland Islands",
-  "Faroe Islands",
-  "Marshall Islands",
-  "Northern Mariana Islands",
-  "Pitcairn Islands",
-  "Solomon Islands",
-  "Turks and Caicos Islands",
-  "Wallis and Futuna"
-];
-function parseAddress(address) {
-  const parts = address.split(",").map((part) => part.trim()).filter(Boolean);
-  let country = "United States";
-  let state = "";
-  let city = "";
-  if (parts.length === 0) {
-    return { country, state, city };
-  }
-  const lastPart = parts[parts.length - 1];
-  const matchedCountry = KNOWN_COUNTRIES.find(
-    (knownCountry) => lastPart.toLowerCase() === knownCountry.toLowerCase()
-  );
-  if (matchedCountry) {
-    country = matchedCountry;
-    if (parts.length >= 2) {
-      state = parts[parts.length - 2].split(" ")[0];
-    }
-    if (parts.length >= 3) {
-      city = parts[parts.length - 3];
-    }
-  } else {
-    if (parts.length >= 2) {
-      state = parts[parts.length - 1].split(" ")[0];
-      city = parts[parts.length - 2];
-    } else if (parts.length === 1) {
-      city = parts[0];
-    }
-  }
-  return {
-    country: country.trim(),
-    state: state.trim(),
-    city: city.trim()
-  };
-}
 function groupByAlphabet(items) {
   const groups = /* @__PURE__ */ new Map();
   items.forEach((item) => {
@@ -693,7 +642,15 @@ var LocationFilter = ({
   locations,
   onSelect,
   visible = false,
-  onClose
+  onClose,
+  pageData = {
+    allLocations: "All Locations",
+    clear: "Clear",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  }
 }) => {
   const [currentLevel, setCurrentLevel] = useState("country");
   const [selectedCountry, setSelectedCountry] = useState();
@@ -704,7 +661,7 @@ var LocationFilter = ({
     const states = /* @__PURE__ */ new Map();
     const cities = /* @__PURE__ */ new Map();
     locations.forEach((location) => {
-      const { country, state, city } = parseAddress(location.address);
+      const { country, state, city } = location;
       if (country) {
         const existing = countries.get(country);
         countries.set(country, {
@@ -841,7 +798,7 @@ var LocationFilter = ({
                       "pb-[4px] transition-colors",
                       currentLevel === "country" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]"
                     ),
-                    children: "Country"
+                    children: pageData.country
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -854,7 +811,7 @@ var LocationFilter = ({
                       currentLevel === "state" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedCountry && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "State"
+                    children: pageData.state
                   }
                 ),
                 /* @__PURE__ */ jsx(
@@ -867,7 +824,7 @@ var LocationFilter = ({
                       currentLevel === "city" ? "text-[#1D1D1F] border-b-2 border-[#2E8B57]" : "text-[#767880]",
                       !selectedState && "opacity-50 cursor-not-allowed"
                     ),
-                    children: "City"
+                    children: pageData.city
                   }
                 )
               ] })
@@ -899,11 +856,37 @@ var LocationFilter = ({
   );
 };
 LocationFilter.displayName = "LocationFilter";
+var defaultPageData = {
+  title: "Find a Studio Near You",
+  loadingText: "Loading demo rooms...",
+  errorTitle: "Failed to load demo rooms",
+  locationFilter: {
+    allLocations: "All Locations",
+    clear: "Clear",
+    country: "Country",
+    state: "State",
+    city: "City",
+    noStudiosFound: "No studios found in this location"
+  },
+  studioCard: {
+    scheduleNow: "Schedule Now",
+    available: "Available",
+    away: "away"
+  },
+  map: {
+    apiKeyRequired: "Google Maps API Key is required",
+    loadingMap: "Loading map...",
+    scheduleNow: "Schedule Now",
+    available: "Available"
+  },
+  defaultCountry: "United States",
+  noAvailableTime: "No available time"
+};
 var defaultStudioLocations = [
   {
     id: "1",
     name: "Design District Demo Room",
-    address: "111 8th St",
+    address: "111 8th St, San Francisco, CA, United States",
     city: "San Francisco",
     state: "CA",
     zipCode: "94108",
@@ -916,7 +899,7 @@ var defaultStudioLocations = [
   {
     id: "2",
     name: "Brooklyn Creative Studio",
-    address: "456 Broadway",
+    address: "456 Broadway, Brooklyn, NY, United States",
     city: "Brooklyn",
     state: "NY",
     zipCode: "11211",
@@ -929,7 +912,7 @@ var defaultStudioLocations = [
   {
     id: "3",
     name: "Austin Innovation Hub",
-    address: "789 Tech Blvd",
+    address: "789 Tech Blvd, Austin, TX, United States",
     city: "Austin",
     state: "TX",
     zipCode: "78701",
@@ -942,7 +925,7 @@ var defaultStudioLocations = [
   {
     id: "4",
     name: "Seattle Maker Space",
-    address: "321 Pine St",
+    address: "321 Pine St, Seattle, WA, United States",
     city: "Seattle",
     state: "WA",
     zipCode: "98101",
@@ -955,7 +938,7 @@ var defaultStudioLocations = [
   {
     id: "5",
     name: "Chicago Design Center",
-    address: "654 Michigan Ave",
+    address: "654 Michigan Ave, Chicago, IL, United States",
     city: "Chicago",
     state: "IL",
     zipCode: "60611",
@@ -968,7 +951,7 @@ var defaultStudioLocations = [
   {
     id: "6",
     name: "Miami Beach Studio",
-    address: "987 Ocean Drive",
+    address: "987 Ocean Drive, Miami Beach, FL, United States",
     city: "Miami Beach",
     state: "FL",
     zipCode: "33139",
@@ -981,7 +964,7 @@ var defaultStudioLocations = [
   {
     id: "7",
     name: "Denver Mountain Studio",
-    address: "147 16th St",
+    address: "147 16th St, Denver, CO, United States",
     city: "Denver",
     state: "CO",
     zipCode: "80202",
@@ -994,7 +977,7 @@ var defaultStudioLocations = [
   {
     id: "8",
     name: "Los Angeles Creative Lab",
-    address: "258 Main St",
+    address: "258 Main St, Los Angeles, CA, United States",
     city: "Los Angeles",
     state: "CA",
     zipCode: "90012",
@@ -1012,8 +995,22 @@ var RoomsList = ({
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
+  const mergedPageData = useMemo(
+    () => ({
+      ...defaultPageData,
+      ...pageData,
+      locationFilter: {
+        ...defaultPageData.locationFilter,
+        ...pageData?.locationFilter
+      },
+      studioCard: { ...defaultPageData.studioCard, ...pageData?.studioCard },
+      map: { ...defaultPageData.map, ...pageData?.map }
+    }),
+    [pageData]
+  );
   const [showLocationFilter, setShowLocationFilter] = useState(false);
   const [selectedLocation, setSelectedLocation] = useState();
   const [hoveredRoomId, setHoveredRoomId] = useState(null);
@@ -1032,18 +1029,22 @@ var RoomsList = ({
       const nextAvailableTimeslot = room?.timeslots?.find(
         (slot) => slot.status === "available"
       );
-      const { country, state, city } = parseAddress(room.address);
+      const country = room.location?.country || mergedPageData.defaultCountry;
+      const state = room.location?.state || "";
+      const city = room.location?.city || "";
+      const addressParts = [room.address, city, state, country].filter(Boolean);
+      const fullAddress = addressParts.join(", ");
       return {
         id: room.code,
         name: room.name,
-        address: room.address,
+        address: fullAddress,
         city,
         state,
         zipCode: "",
         country,
         lat: Number(room.latitude) || 34.0522,
         lng: Number(room.longitude) || -118.2437,
-        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : "No available time",
+        availableTime: nextAvailableTimeslot ? `${nextAvailableTimeslot.start_time}` : mergedPageData.noAvailableTime,
         euifyMakeModel: room?.description
       };
     });
@@ -1051,25 +1052,24 @@ var RoomsList = ({
   const filteredStudioLocations = useMemo(() => {
     if (!selectedLocation) return studioLocations;
     return studioLocations.filter((location) => {
-      const { country, state, city } = parseAddress(location.address);
       if (selectedLocation.city) {
-        return country === selectedLocation.country && state === selectedLocation.state && city === selectedLocation.city;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state && location.city === selectedLocation.city;
       }
       if (selectedLocation.state) {
-        return country === selectedLocation.country && state === selectedLocation.state;
+        return location.country === selectedLocation.country && location.state === selectedLocation.state;
       }
       if (selectedLocation.country) {
-        return country === selectedLocation.country;
+        return location.country === selectedLocation.country;
       }
       return true;
     });
   }, [studioLocations, selectedLocation]);
   const getSelectedLocationName = () => {
-    if (!selectedLocation) return "All Locations";
+    if (!selectedLocation) return mergedPageData.locationFilter.allLocations;
     if (selectedLocation.city) return selectedLocation.city;
     if (selectedLocation.state) return selectedLocation.state;
     if (selectedLocation.country) return selectedLocation.country;
-    return "All Locations";
+    return mergedPageData.locationFilter.allLocations;
   };
   const handleLocationSelect = (selection) => {
     setSelectedLocation(selection);
@@ -1080,17 +1080,17 @@ var RoomsList = ({
   };
   console.log(filteredStudioLocations);
   return /* @__PURE__ */ jsxs("div", { className, ...props, children: [
-    /* @__PURE__ */ jsx(Title, { title: "Find a Studio Near You" }),
-    loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Loading demo rooms..." }) }) }),
+    /* @__PURE__ */ jsx(Title, { title: mergedPageData.title }),
+    loading && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsx("div", { className: "text-center", children: /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: mergedPageData.loadingText }) }) }),
     error && /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[794px]", children: /* @__PURE__ */ jsxs("div", { className: "text-center", style: { color: "#FF4D4D" }, children: [
-      /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: "Failed to load demo rooms" }),
+      /* @__PURE__ */ jsx("div", { className: "text-lg font-medium", children: mergedPageData.errorTitle }),
       /* @__PURE__ */ jsx("div", { className: "text-sm mt-2", children: error.message })
     ] }) }),
     !loading && !error && /* @__PURE__ */ jsxs("div", { className: "flex h-[794px] gap-4", children: [
       /* @__PURE__ */ jsxs(
         "div",
         {
-          className: "flex-none relative w-[420px]",
+          className: "flex-none relative w-[420px] l:!w-full",
           style: { height: "794px" },
           children: [
             /* @__PURE__ */ jsx("div", { className: "rounded-[12px] mb-4 bg-white border border-[#E4E5E6] px-[20px] py-[16px]", children: /* @__PURE__ */ jsxs("div", { className: "h-[40px] font-bold text-[16px] gap-10 flex items-center", children: [
@@ -1126,7 +1126,7 @@ var RoomsList = ({
                 {
                   onClick: handleClearFilter,
                   className: "ml-auto text-[14px] text-[#2E8B57] hover:underline",
-                  children: "Clear"
+                  children: mergedPageData.locationFilter.clear
                 }
               ),
               /* @__PURE__ */ jsxs("div", { className: "flex text-[#767880] cursor-not-allowed", children: [
@@ -1155,7 +1155,7 @@ var RoomsList = ({
               {
                 style: { maxHeight: "706px", overflow: "auto" },
                 className: "rounded-[12px] bg-white border border-[#E4E5E6]",
-                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: "No studios found in this location" }) : filteredStudioLocations.map((item) => {
+                children: filteredStudioLocations.length === 0 ? /* @__PURE__ */ jsx("div", { className: "flex items-center justify-center h-[200px] text-[#767880]", children: mergedPageData.locationFilter.noStudiosFound }) : filteredStudioLocations.map((item) => {
                   return /* @__PURE__ */ jsx(
                     StudioCard,
                     {
@@ -1169,7 +1169,8 @@ var RoomsList = ({
                       euifyMakeModel: item?.euifyMakeModel || "",
                       onSchedule,
                       onMouseEnter: () => setHoveredRoomId(item.id),
-                      onMouseLeave: () => setHoveredRoomId(null)
+                      onMouseLeave: () => setHoveredRoomId(null),
+                      pageData: mergedPageData.studioCard
                     },
                     item.id
                   );
@@ -1180,25 +1181,29 @@ var RoomsList = ({
               LocationFilter,
               {
                 locations: studioLocations.map((loc) => ({
-                  address: loc.address,
-                  id: loc.id
+                  id: loc.id,
+                  country: loc.country,
+                  state: loc.state,
+                  city: loc.city
                 })),
                 visible: showLocationFilter,
                 onSelect: handleLocationSelect,
-                onClose: () => setShowLocationFilter(false)
+                onClose: () => setShowLocationFilter(false),
+                pageData: mergedPageData.locationFilter
               }
             )
           ]
         }
       ),
-      googleMapsApiKey && /* @__PURE__ */ jsx("div", { className: cn("flex-1"), children: /* @__PURE__ */ jsx(
+      googleMapsApiKey && /* @__PURE__ */ jsx("div", { className: cn("flex-1 l:!hidden"), children: /* @__PURE__ */ jsx(
         StudioMap,
         {
           googleMapsApiKey,
           locations: filteredStudioLocations,
           hoveredLocationId: hoveredRoomId,
           onSchedule,
-          mapHeight: "794px"
+          mapHeight: "794px",
+          pageData: mergedPageData.map
         }
       ) })
     ] })
@@ -1380,6 +1385,7 @@ var DemoRoom = ({
   teamCode,
   brandWebsite,
   onSchedule,
+  pageData,
   ...props
 }) => {
   const apiClient = useMemo(
@@ -1394,7 +1400,8 @@ var DemoRoom = ({
       apiClient,
       teamCode,
       brandWebsite,
-      onSchedule
+      onSchedule,
+      pageData
     }
   ) });
 };