@ably/ui 14.6.9 → 14.7.0-dev.151bbd8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/Icon/EncapsulatedIcon.js +1 -1
- package/core/Icon/computed-icons.js +1 -0
- package/core/Icon/types.js +1 -1
- package/core/Meganav.js +1 -1
- package/core/MeganavContentDevelopers.js +1 -1
- package/core/MeganavContentUseCases.js +1 -1
- package/core/MeganavItemsMobile.js +1 -1
- package/core/MeganavItemsSignedIn.js +1 -1
- package/core/MeganavSearch.js +1 -1
- package/core/MeganavSearchSuggestions/component.js +1 -1
- package/core/Pricing/PricingCards.js +1 -1
- package/core/ProductTile.js +1 -1
- package/core/Tooltip.js +1 -1
- package/core/hooks/useTheming.js +1 -0
- package/core/sprites.svg +1 -1
- package/core/styles/colors/computed-colors.json +1 -0
- package/core/styles/colors/types.js +1 -1
- package/core/styles/colors/utils.js +1 -1
- package/index.d.ts +53 -21
- package/package.json +5 -3
- package/core/styles/colors/computed-colors-dark.json +0 -5252
- package/core/styles/colors/computed-colors-light.json +0 -5252
- /package/core/icons/{icon-live-updates-results-metrics-col.svg → icon-display-live-updates-results-metrics-col.svg} +0 -0
- /package/core/icons/{icon-multi-user-spaces-col.svg → icon-display-multi-user-spaces-col.svg} +0 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"../Icon";import
|
|
1
|
+
import React from"react";import Icon from"../Icon";import useTheming from"../hooks/useTheming";const EncapsulatedIcon=({theme="dark",size="40px",iconSize,className,innerClassName,...iconProps})=>{const{themeColor}=useTheming({baseTheme:"dark",theme});const numericalSize=parseInt(size,10);const numericalIconSize=iconSize?parseInt(iconSize,10):numericalSize-12;return /*#__PURE__*/React.createElement("div",{className:`p-1 rounded-lg ${theme==="light"?"bg-gradient-to-t":"bg-gradient-to-b"} ${themeColor("from-neutral-900")} ${className??""}`,style:{width:numericalSize,height:numericalSize}},/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center rounded-lg ${themeColor("bg-neutral-1100")} ${innerClassName??""}`,style:{height:numericalSize-2}},/*#__PURE__*/React.createElement(Icon,{size:`${numericalIconSize}`,...iconProps})))};export default EncapsulatedIcon;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export const computedIcons={"display":["icon-display-48hrs","icon-display-ably-channels","icon-display-about-ably-col","icon-display-api-keys","icon-display-api","icon-display-architectural-guidance","icon-display-asset-tracking-col","icon-display-authentication","icon-display-avatar-stack","icon-display-browser","icon-display-calendar","icon-display-call-mobile","icon-display-careers-col","icon-display-case-studies-col","icon-display-chat-col","icon-display-chat-stack-col","icon-display-chat-stack","icon-display-cloud-servers","icon-display-compare-tech-col","icon-display-connection-state-&-recovery","icon-display-consumer-groups","icon-display-custom-cname","icon-display-custom","icon-display-customers-col","icon-display-data-broadcast-col","icon-display-data-synchronization-col","icon-display-dedicated-cluster","icon-display-deltas","icon-display-docs-col","icon-display-documentation","icon-display-dynamic-channel-groups","icon-display-edge-network","icon-display-elasticity","icon-display-events-col","icon-display-exactly-once-delivery","icon-display-examples-col","icon-display-fan-out","icon-display-firehose","icon-display-gdpr","icon-display-general-comms","icon-display-granular-permissions","icon-display-hipaa-mono","icon-display-hipaa","icon-display-history","icon-display-integrations-col","icon-display-integrations","icon-display-it-support-access","icon-display-it-support-helpdesk","icon-display-kafka-at-the-edge-col","icon-display-laptop","icon-display-lightbulb-col","icon-display-live-chat","icon-display-live-updates-results-metrics-col","icon-display-map-pin","icon-display-message-batching","icon-display-message-persistence","icon-display-message-queues","icon-display-message","icon-display-multi-user-spaces-col","icon-display-observe-analytics","icon-display-padlock-closed","icon-display-platform","icon-display-play","icon-display-premium-support","icon-display-privacy-shield-framework","icon-display-private-link","icon-display-push-notifications-col","icon-display-push-notifications","icon-display-quickstart-guides-col","icon-display-resources-col","icon-display-rewind","icon-display-sdks-col","icon-display-send-received-messages","icon-display-servers","icon-display-shopping-cart","icon-display-sla","icon-display-soc2-type2-mono","icon-display-soc2-type2","icon-display-subscription-filters","icon-display-system-metadata","icon-display-tech-account-comms","icon-display-tutorials-demos-col","icon-display-virtual-events-col","icon-display-virtual-events"],"gui":["icon-gui-ably-badge","icon-gui-arrow-bidirectional-horizontal","icon-gui-arrow-bidirectional-vertical","icon-gui-arrow-down","icon-gui-arrow-left","icon-gui-arrow-right","icon-gui-arrow-up","icon-gui-burger-menu","icon-gui-check-circled-fill-black","icon-gui-check-circled-fill","icon-gui-check-circled","icon-gui-checklist-checked","icon-gui-clock","icon-gui-close","icon-gui-copy","icon-gui-cross-circled-fill","icon-gui-cross-circled","icon-gui-dash-circled","icon-gui-disclosure-arrow","icon-gui-document-generic","icon-gui-enlarge","icon-gui-external-link","icon-gui-filter-flow-step-1","icon-gui-filter-flow-step-2","icon-gui-filter-flow-step-3","icon-gui-history","icon-gui-info","icon-gui-link-arrow","icon-gui-link","icon-gui-live-chat","icon-gui-minus","icon-gui-partial","icon-gui-plus","icon-gui-quote-marks-solid","icon-gui-refresh","icon-gui-resources","icon-gui-search","icon-gui-tick","icon-gui-warning"],"other":["icon-other-quote"],"product":["icon-product-asset-tracking","icon-product-chat","icon-product-liveobjects","icon-product-livesync","icon-product-pubsub","icon-product-spaces"],"social":["icon-social-discord","icon-social-facebook","icon-social-github","icon-social-glassdoor","icon-social-google","icon-social-linkedin","icon-social-stackoverflow","icon-social-twitter","icon-social-x","icon-social-youtube"],"tech":["icon-tech-amqp10","icon-tech-apache-kafka","icon-tech-apachepulsar","icon-tech-awskinesis","icon-tech-awslambda","icon-tech-awssqs","icon-tech-azureservicebus","icon-tech-cloudflareworkers","icon-tech-csharp","icon-tech-flutter","icon-tech-gcloudfunctions","icon-tech-go","icon-tech-ifttt","icon-tech-java","icon-tech-javascript","icon-tech-net","icon-tech-objectivec","icon-tech-php","icon-tech-python","icon-tech-react","icon-tech-ruby","icon-tech-swift","icon-tech-terraform","icon-tech-zapier"]};
|
package/core/Icon/types.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
import{computedIcons}from"./computed-icons";export const iconNames={gui:computedIcons.gui,display:computedIcons.display,social:computedIcons.social,other:computedIcons.other,tech:computedIcons.tech,product:computedIcons.product};
|
package/core/Meganav.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl})=>{return sessionState.signedIn?/*#__PURE__*/React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme}):/*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>/*#__PURE__*/React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&/*#__PURE__*/React.createElement(Notice,{...notice.props,config:notice.config}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"mr-24"},/*#__PURE__*/React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),/*#__PURE__*/React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?/*#__PURE__*/React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl}):/*#__PURE__*/React.createElement(SignInPlaceholder,null),/*#__PURE__*/React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl})))};export default Meganav;
|
|
1
|
+
import React,{useEffect,useState}from"react";import{connectState}from"./remote-data-store.js";import{selectSessionData}from"./remote-session-data.js";import Logo from"./Logo";import MeganavData from"./Meganav/component.json";import MeganavScripts from"./Meganav/component.js";import MeganavItemsDesktop from"./MeganavItemsDesktop";import MeganavItemsSignedIn from"./MeganavItemsSignedIn";import MeganavItemsMobile from"./MeganavItemsMobile";import Notice from"./Notice";import _absUrl from"./url-base.js";import MeganavContentProducts from"./MeganavContentProducts";import MeganavContentUseCases from"./MeganavContentUseCases";import MeganavContentCompany from"./MeganavContentCompany";import MeganavContentDevelopers from"./MeganavContentDevelopers";import MeganavSearch from"./MeganavSearch";const SignIn=({sessionState,theme,loginLink,absUrl,searchDataId})=>{return sessionState.signedIn?/*#__PURE__*/React.createElement(MeganavItemsSignedIn,{absUrl:absUrl,sessionState:sessionState,theme:theme,searchDataId:searchDataId}):/*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:`ui-meganav-link ${theme.textColor}`,"data-id":"meganav-link"},"Contact us")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:`ui-meganav-link mr-0 ${theme.textColor}`,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),"data-id":"meganav-sign-up-btn",className:`ui-btn p-btn-small ${theme.buttonBackgroundColor} ${theme.buttonTextColor}`},"Sign up free")))};const SignInPlaceholder=()=>/*#__PURE__*/React.createElement("div",null);const panels={MeganavContentProducts,MeganavContentUseCases,MeganavContentCompany,MeganavContentDevelopers};const Meganav=({paths,themeName="white",notice,loginLink="/login",urlBase,addSearchApiKey,statusUrl,searchDataId})=>{const[sessionState,setSessionState]=useState();useEffect(()=>{connectState(selectSessionData,setSessionState)},[]);useEffect(()=>{const teardown=MeganavScripts({themeName,addSearchApiKey});return()=>teardown()},[sessionState]);const theme=MeganavData.themes[themeName];const absUrl=path=>_absUrl(path,urlBase);return /*#__PURE__*/React.createElement("nav",{className:`ui-meganav-wrapper ${theme.backgroundColor} ${theme.barShadow}`,"data-id":"meganav","aria-label":"Main"},notice&&/*#__PURE__*/React.createElement(Notice,{...notice.props,config:notice.config}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav ui-grid-px"},/*#__PURE__*/React.createElement("div",{className:"mr-24"},/*#__PURE__*/React.createElement(Logo,{dataId:"meganav-logo",href:urlBase,logoUrl:paths?.logo??""})),/*#__PURE__*/React.createElement(MeganavItemsDesktop,{panels:panels,paths:paths,theme:theme,absUrl:absUrl,statusUrl:statusUrl}),sessionState?/*#__PURE__*/React.createElement(SignIn,{sessionState:sessionState,theme:theme,loginLink:loginLink,absUrl:absUrl,searchDataId:searchDataId}):/*#__PURE__*/React.createElement(SignInPlaceholder,null),/*#__PURE__*/React.createElement(MeganavItemsMobile,{panels:panels,sessionState:sessionState,paths:paths,theme:theme,loginLink:loginLink,absUrl:absUrl,statusUrl:statusUrl,searchDataId:searchDataId})))};export default Meganav;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import Status from"./Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Status",/*#__PURE__*/React.createElement(Status,{statusUrl:statusUrl,additionalCSS:"ml-4 align-middle"})))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
|
|
1
|
+
import React from"react";import Icon from"./Icon";import Status from"./Status";const MeganavContentDevelopers=({absUrl,statusUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 md:py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-explore"},"Explore"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-docs-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Documentation"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Technical guides to help you build with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/quick-start-guide"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-quickstart-guides-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Quickstart guides"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Documentation to help you get started quickly.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/integrations"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-integrations-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Integrations"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Find out more about Ably integrations."," ")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/examples"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-examples-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live examples"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Discover our features and their use cases.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pb-8 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("ul",{className:"md:mt-40","aria-labelledby":"meganav-developers-panel-explore"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/docs/sdks"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-sdks-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"SDKs"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Download an SDK to help you build realtime apps faster.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/tutorials"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-tutorials-demos-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Tutorials & Demos"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Get stuck in with our hands-on resources.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Chat apps reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build chat apps with Ably.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/reference-guide-multiplayer"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer reference guide"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Learn how to build collaborative features with Ably.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-8 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline uppercase",id:"meganav-developers-panel-quick-links"},"Quick links"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-developers-panel-quick-links"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://discord.gg/jwBPhEZ9g5",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Discord"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://github.com/ably",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"GitHub"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://changelog.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Changelog"))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:"https://status.ably.com/",className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Status",/*#__PURE__*/React.createElement(Status,{statusUrl:statusUrl,additionalCSS:"ml-4 align-middle"})))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/support"),className:"group ui-meganav-media py-12"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Support & FAQs")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentDevelopers;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;
|
|
1
|
+
import React from"react";import Icon from"./Icon";const MeganavContentUseCases=({absUrl})=>/*#__PURE__*/React.createElement("div",{className:"flex max-w-screen-xl mx-auto"},/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer bg-extra-light-grey"}),/*#__PURE__*/React.createElement("section",{className:"grid grid-cols-12 ui-grid-gap-x w-full"},/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 py-24 lg:py-32 px-24 sm:px-32 md:pl-0 md:pr-24 bg-extra-light-grey"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-use-cases"},"Solutions"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry-use-cases"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/chat"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-chat-stack-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Live Chat"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver highly reliable chat experiences at scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/multiplayer-collaboration"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-multi-user-spaces-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Multiplayer Collaboration"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Bring collaborative multiplayer experiences to your users.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-broadcast"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-broadcast-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Broadcast"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Broadcast realtime event data to millions of devices around the globe.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/data-synchronization"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-data-synchronization-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Data Synchronization"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Keep your frontend and backend in realtime sync, at global scale.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/push-notifications"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-push-notifications-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Notifications"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver cross-platform push notifications with a simple unified API.")))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/asset-tracking"),className:"ui-meganav-media-with-image group"},/*#__PURE__*/React.createElement(Icon,{name:"icon-display-asset-tracking-col",size:"2.5rem"}),/*#__PURE__*/React.createElement("div",{className:"flex flex-col justify-center"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Asset Tracking (Beta)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Track assets in realtime with a solution optimised for last mile logistics.")))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-24 pb-0 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("h3",{className:"ui-meganav-overline",id:"meganav-use-cases-panel-industry"},"Industry"),/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-industry"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/sports-and-media"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Sports, Media & Fan Engagement"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver engaging global realtime experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/b2b-platforms"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"B2B Platforms"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Empower your customers with realtime solutions."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/fintech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"FinTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver personalised financial data in realtime."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/edtech"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"EdTech"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Deliver interactive learning experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/healthcare"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Healthcare (HIPAA)"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Provide trustworthy, HIPAA-compliant realtime apps."))))),/*#__PURE__*/React.createElement("div",{className:"col-span-full md:col-span-4 pt-0 pb-24 md:py-24 lg:py-32 px-24 sm:px-32 md:px-0 bg-white"},/*#__PURE__*/React.createElement("ul",{"aria-labelledby":"meganav-use-cases-panel-solutions",className:"mt-0 md:mt-40"},/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/gaming"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Gaming"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power ultra fast and reliable gaming experiences."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/automotive-logistics-and-mobility"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"Automotive, Logistics, & Mobility"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Power diagnostics, order tracking and more."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/ecommerce-and-retail"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"eCommerce & Retail"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Enrich customer experiences with realtime updates."))),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/solutions/iot-and-connected-devices"),className:"ui-meganav-media group"},/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-heading"},"IoT & Connected Devices"),/*#__PURE__*/React.createElement("p",{className:"ui-meganav-media-copy"},"Monitor and control global IoT deployments in realtime.")))))),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-content-spacer"}));export default MeganavContentUseCases;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return /*#__PURE__*/React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},/*#__PURE__*/React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?/*#__PURE__*/React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>/*#__PURE__*/React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavControlMobileDropdown,{theme:theme}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},/*#__PURE__*/React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},/*#__PURE__*/React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},/*#__PURE__*/React.createElement("div",{className:"relative w-full"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),/*#__PURE__*/React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),/*#__PURE__*/React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":"meganav-mobile-search-input"}),/*#__PURE__*/React.createElement(MeganavSearchAutocomplete,null))),/*#__PURE__*/React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},/*#__PURE__*/React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),/*#__PURE__*/React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return /*#__PURE__*/React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},/*#__PURE__*/React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},/*#__PURE__*/React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),/*#__PURE__*/React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),/*#__PURE__*/React.createElement("hr",{className:"ui-meganav-hr mb-20"}),/*#__PURE__*/React.createElement("div",{className:"flex justify-between items-center mb-16"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default /*#__PURE__*/React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
|
|
1
|
+
import React from"react";import SignOutLink from"./SignOutLink";import MeganavSearchSuggestions from"./MeganavSearchSuggestions";import Icon from"./Icon";import MeganavData from"./Meganav/component.json";import MeganavControlMobileDropdown from"./MeganavControlMobileDropdown";import MeganavControlMobilePanelClose from"./MeganavControlMobilePanelClose";import MeganavControlMobilePanelOpen from"./MeganavControlMobilePanelOpen";import MeganavSearchAutocomplete from"./MeganavSearchAutocomplete";const MeganavItemsMobile=({panels,paths,sessionState,theme,loginLink,absUrl,statusUrl,searchDataId})=>{const classNames=`ui-meganav-link ${theme.textColor}`;return /*#__PURE__*/React.createElement("ul",{className:"flex md:hidden items-center","data-id":"meganav-items-mobile"},/*#__PURE__*/React.createElement("li",null,sessionState?.signedIn&&sessionState?.logOut?/*#__PURE__*/React.createElement(SignOutLink,{absUrl:absUrl,...sessionState.logOut},({text,href,onClick})=>/*#__PURE__*/React.createElement("a",{onClick:onClick,href:absUrl(href),className:classNames,"data-id":"meganav-link"},text)):/*#__PURE__*/React.createElement("a",{href:absUrl(loginLink),className:classNames,"data-id":"meganav-link"},"Login")),/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item"},/*#__PURE__*/React.createElement(MeganavControlMobileDropdown,{theme:theme}),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-mobile-dropdown invisible",id:"meganav-mobile-dropdown","data-id":"meganav-mobile-dropdown"},/*#__PURE__*/React.createElement("div",{className:"pt-24 pb-16 ui-grid-px bg-white"},/*#__PURE__*/React.createElement("form",{className:"mb-16",action:absUrl("/search"),method:"get"},/*#__PURE__*/React.createElement("div",{className:"relative w-full"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"absolute top-12 left-16 hover:text-gui-hover"}),/*#__PURE__*/React.createElement("button",{type:"button",className:"absolute top-12 right-16 p-0 focus:outline-gui-focus m-0 md:hidden invisible","data-id":"meganav-search-input-clear"},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-cross-circled-fill",color:"text-dark-grey",size:"1.5rem",additionalCSS:""})),/*#__PURE__*/React.createElement("input",{type:"search",name:"q",className:"ui-input px-48 h-48",style:{maxWidth:"none"},placeholder:"Search",autoComplete:"off","data-id":searchDataId?searchDataId:"meganav-mobile-search-input"}),/*#__PURE__*/React.createElement(MeganavSearchAutocomplete,null))),/*#__PURE__*/React.createElement("div",{className:"max-h-0 overflow-hidden transition-all","data-id":"meganav-mobile-search-suggestions"},/*#__PURE__*/React.createElement(MeganavSearchSuggestions,{absUrl:absUrl,displaySupportLink:false})),/*#__PURE__*/React.createElement("ul",{className:"mb-16","data-id":"meganav-mobile-panel-controls"},MeganavData.panels.map(panel=>{const PanelComponent=panels[panel.component];const displayHr=["company-panel","developers-panel"].includes(panel.id);return /*#__PURE__*/React.createElement("li",{className:"ui-meganav-mobile-item",key:`${panel.id}-mobile`},/*#__PURE__*/React.createElement(MeganavControlMobilePanelOpen,{ariaControls:`${panel.id}-mobile`},panel.label),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel-mobile hidden",id:`${panel.id}-mobile`,"data-scroll-lock-scrollable":true},/*#__PURE__*/React.createElement(MeganavControlMobilePanelClose,{ariaControls:`${panel.id}-mobile`,displayHr:displayHr}),/*#__PURE__*/React.createElement(PanelComponent,{paths:paths,absUrl:absUrl,statusUrl:statusUrl})))}),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl("/pricing"),className:"ui-meganav-mobile-link"},"Pricing"))),/*#__PURE__*/React.createElement("hr",{className:"ui-meganav-hr mb-20"}),/*#__PURE__*/React.createElement("div",{className:"flex justify-between items-center mb-16"},/*#__PURE__*/React.createElement("a",{href:absUrl("/contact"),className:"text-menu2 font-medium block ml-0 mr-8 lg:mx-12 p-0 hover:text-gui-hover focus:text-gui-focus focus:outline-none"},"Contact us"),sessionState?.signedIn&&sessionState?.account?/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary"},"Dashboard"):/*#__PURE__*/React.createElement("a",{href:absUrl("/sign-up"),className:"ui-btn"},"Sign up free"))))))};export default /*#__PURE__*/React.memo(MeganavItemsMobile,(oldState,newState)=>{const{paths:pathsOld,theme:themeOld}=oldState;const{paths:pathsNew,theme:themeNew}=newState;return pathsOld===pathsNew&&themeOld===themeNew&&Object.keys(newState.sessionState||{}).length===0});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl})=>{const accountName=truncate(sessionState.accountName,20);return /*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item relative"},/*#__PURE__*/React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl})),sessionState.account&&/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
|
|
1
|
+
import React from"react";import MeganavSearch from"./MeganavSearch";const truncate=(string,length)=>{return string?.length&&string.length>length?`${string.slice(0,length-1)}…`:string};const MeganavItemsSignedIn=({sessionState,absUrl,searchDataId})=>{const accountName=truncate(sessionState.accountName,20);return /*#__PURE__*/React.createElement("ul",{className:"hidden md:flex items-center"},/*#__PURE__*/React.createElement("li",{className:"ui-meganav-item relative"},/*#__PURE__*/React.createElement("span",{className:"ui-meganav-link h-64 hover:text-cool-black mr-0"},accountName)),/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement(MeganavSearch,{absUrl:absUrl,dataId:searchDataId})),sessionState.account&&/*#__PURE__*/React.createElement("li",null,/*#__PURE__*/React.createElement("a",{href:absUrl(sessionState.account.links.dashboard.href),className:"ui-btn-secondary p-btn-small"},"Dashboard")))};export default MeganavItemsSignedIn;
|
package/core/MeganavSearch.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl})=>/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("button",{type:"button","data-id":
|
|
1
|
+
import React from"react";import Icon from"./Icon";import MeganavSearchPanel from"./MeganavSearchPanel";const MeganavSearch=({absUrl,dataId="meganav-control"})=>/*#__PURE__*/React.createElement(React.Fragment,null,/*#__PURE__*/React.createElement("button",{type:"button","data-id":dataId,"data-control":"search",className:"h-64 w-24 px-24 pr-48 py-20 group focus:outline-none","aria-expanded":"false","aria-controls":"panel-search","aria-label":`Show Search Panel`},/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-search",color:"text-cool-black",size:"1.5rem",additionalCSS:"group-hover:text-gui-hover group-focus:text-gui-focus"})),/*#__PURE__*/React.createElement("div",{className:"ui-meganav-panel invisible",id:"panel-search","data-id":"meganav-panel"},/*#__PURE__*/React.createElement(MeganavSearchPanel,{absUrl:absUrl})));export default MeganavSearch;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle
|
|
1
|
+
import{queryId}from"../dom-query";const DRAG_BUFFER=5;const getTranslateX=node=>new DOMMatrix(window.getComputedStyle(node).transform).e;const updateTranslateX=(node,value)=>node.style.transform=`translateX(${value}px)`;const dragLeftBoundary=(translateX,threshold)=>translateX>=threshold;const dragRightBoundary=(translateX,itemsWidth,windowWidth,threshold)=>Math.abs(translateX-windowWidth+threshold)>itemsWidth;const getDistance=(e,touchStartX)=>e.changedTouches[0]?.clientX-touchStartX;const withinBuffer=distance=>Math.abs(distance)<DRAG_BUFFER;const getItemsTotalWidth=nodes=>nodes.map(item=>item.getBoundingClientRect().width).reduce((acc,val)=>acc+val,0);const MeganavSearchSuggestions=()=>{const suggestionsToggle=queryId("meganav-mobile-search-input");const suggestions=queryId("meganav-mobile-search-suggestions");const list=suggestions.querySelector("ul");const listItems=Array.from(list.querySelectorAll("li"));const dragLeft=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold))return;updateTranslateX(list,translateX)};const dragLeftEnd=(distance,threshold)=>{const currentTranslateX=getTranslateX(list);let translateX=Math.round(currentTranslateX+distance);if(dragLeftBoundary(translateX,threshold)){translateX=0}updateTranslateX(list,translateX)};const dragRight=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const translateX=Math.round(currentTranslateX+distance);const itemsTotalWidth=getItemsTotalWidth(listItems);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){return}updateTranslateX(list,translateX)};const dragRightEnd=(distance,threshold)=>{const listWidth=list.getBoundingClientRect().width;const currentTranslateX=getTranslateX(list);const itemsTotalWidth=getItemsTotalWidth(listItems);let translateX=Math.round(currentTranslateX+distance);if(dragRightBoundary(translateX,itemsTotalWidth,listWidth,threshold)){translateX=-(itemsTotalWidth-listWidth+threshold)}updateTranslateX(list,translateX)};let touchStartX;const touchstartHandler=e=>{touchStartX=e.touches[0]?.clientX};const touchmoveHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeft(distance,24):dragRight(distance,96)};const touchendHandler=e=>{const distance=getDistance(e,touchStartX);if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};const focusSuggestionsHandler=()=>{suggestions.classList.add("max-h-96")};const blurSuggestionsHandler=e=>{if(e.relatedTarget===suggestions.querySelectorAll("a")[0]){return}suggestions.classList.remove("max-h-96")};const wheelHandler=e=>{const distance=e.deltaY*4;if(withinBuffer(distance))return;distance>0?dragLeftEnd(distance,24):dragRightEnd(distance,48)};suggestionsToggle?.addEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.addEventListener("blur",blurSuggestionsHandler);suggestions.addEventListener("touchstart",touchstartHandler);suggestions.addEventListener("touchmove",touchmoveHandler);suggestions.addEventListener("touchend",touchendHandler);suggestions.addEventListener("wheel",wheelHandler);return{teardown:()=>{suggestionsToggle?.removeEventListener("focus",focusSuggestionsHandler);suggestionsToggle?.removeEventListener("blur",blurSuggestionsHandler);suggestions.removeEventListener("touchstart",touchstartHandler);suggestions.removeEventListener("touchmove",touchmoveHandler);suggestions.removeEventListener("touchend",touchendHandler)},clear:()=>{suggestions.classList.remove("max-h-96");list.style.transform=`translateX(0px)`}}};export default MeganavSearchSuggestions;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import
|
|
1
|
+
import React,{Fragment,useEffect,useRef,useState}from"react";import throttle from"lodash.throttle";import Icon from"../Icon";import FeaturedLink from"../FeaturedLink";import Tooltip from"../Tooltip";import useTheming from"../hooks/useTheming";const PricingCards=({data,theme="dark",delimiter})=>{const descriptionsRef=useRef([]);const[descriptionHeight,setDescriptionHeight]=useState(0);const determineMaxDescriptionHeight=throttle(()=>{if(descriptionsRef.current.length){setDescriptionHeight(Math.max(...descriptionsRef.current.map(description=>description?.getBoundingClientRect().height??0)))}},100);useEffect(()=>{determineMaxDescriptionHeight();window.addEventListener("resize",determineMaxDescriptionHeight);return()=>{window.removeEventListener("resize",determineMaxDescriptionHeight);determineMaxDescriptionHeight.cancel()}},[]);const{themeColor}=useTheming({baseTheme:"dark",theme});const delimiterColumn=index=>delimiter&&index%2===1?/*#__PURE__*/React.createElement("div",{className:`flex items-center justify-center w-full @[920px]:w-20 ${delimiter!=="blank"?"m-8":""}`},delimiter!=="blank"?/*#__PURE__*/React.createElement(Icon,{name:delimiter,size:"20",additionalCSS:themeColor("text-neutral-500")}):null):null;const gridRules={nonDelimited:"grid @[552px]:grid-cols-2 @[1104px]:grid-cols-4",delimited:"flex flex-col items-center @[920px]:flex-row"};const borderClasses=color=>{const classes={neutral:{border:"border-neutral-700",bg:"bg-neutral-700"},blue:{border:"border-blue-600",bg:"bg-blue-600"},orange:{border:"border-orange-600",bg:"bg-orange-600"}};if(color&&classes[color]){return classes[color]}};return /*#__PURE__*/React.createElement("div",{className:"@container flex justify-center","data-testid":delimiter?"delimited-pricing-card-group":"pricing-card-group"},/*#__PURE__*/React.createElement("div",{className:`${delimiter?gridRules.delimited:gridRules.nonDelimited} gap-8`},data.map(({title,description,price,cta,sections,border},index)=>/*#__PURE__*/React.createElement(Fragment,{key:title.content},delimiterColumn(index),/*#__PURE__*/React.createElement("div",{className:`relative border ${themeColor(borderClasses(border?.color)?.border??"border-neutral-1100")} ${border?.style??""} flex-1 px-24 py-32 flex flex-col gap-24 rounded-2xl group ${delimiter?"@[520px]:flex-row @[920px]:flex-col":""} min-w-[272px] backdrop-blur`,"data-testid":delimiter?"delimited-pricing-card":"pricing-card"},border?/*#__PURE__*/React.createElement("div",{className:`flex items-center absolute z-10 -top-12 self-center font-semibold uppercase font-sans text-white ${borderClasses(border?.color)?.border} ${borderClasses(border?.color)?.bg} h-24 text-[11px] px-[10px] py-2 rounded-2xl select-none tracking-widen-0.1`},border.text):null,/*#__PURE__*/React.createElement("div",{className:`absolute z-0 top-0 left-0 w-full h-full rounded-2xl ${themeColor("bg-neutral-1300")} ${!delimiter?`${themeColor("group-hover:bg-neutral-1200")} group-hover:opacity-100`:""} transition-[colors,opacity] opacity-25`}),/*#__PURE__*/React.createElement("div",{className:`relative z-10 flex flex-col gap-24 ${delimiter?"@[520px]:flex-1 @[920px]:flex-none":""}`},/*#__PURE__*/React.createElement("div",null,/*#__PURE__*/React.createElement("div",{className:"flex items-center mb-12"},/*#__PURE__*/React.createElement("p",{className:`${title.className??""} ${themeColor(title.color??"text-neutral-000")}`},title.content),title.tooltip?/*#__PURE__*/React.createElement(Tooltip,{theme:theme,interactive:typeof title.tooltip!=="string"},title.tooltip):null),/*#__PURE__*/React.createElement("p",{className:`ui-text-p1 ${description.className??""} ${themeColor(description.color??"text-neutral-000")} min-h-20`,style:{height:descriptionHeight}},/*#__PURE__*/React.createElement("span",{ref:el=>descriptionsRef.current[index]=el},description.content))),/*#__PURE__*/React.createElement("div",{className:`flex items-end gap-8 ${delimiter?"@[520px]:flex-col @[520px]:items-start @[920px]:flex-row @[920px]:items-end":""}`},/*#__PURE__*/React.createElement("p",{className:`ui-text-title font-medium tracking-tight leading-none ${themeColor("text-neutral-000")}`},price.amount),/*#__PURE__*/React.createElement("div",{className:`ui-text-p3 ${themeColor("text-neutral-000")}`},price.content)),cta?/*#__PURE__*/React.createElement("div",{className:"group"},/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`text-center ui-btn ${themeColor("bg-neutral-000")} ${themeColor("text-neutral-1300")} hover:text-neutral-000 px-24 !py-12 ${cta.className??""} cursor-pointer`,url:cta.url,onClick:cta.onClick,disabled:cta.disabled},cta.text)):delimiter?null:/*#__PURE__*/React.createElement("div",{className:"flex items-center justify-center h-48 w-full"},/*#__PURE__*/React.createElement("hr",{className:`${themeColor("border-neutral-800")} w-64`}))),/*#__PURE__*/React.createElement("div",{className:"flex-1 flex flex-col gap-24 relative z-10"},sections.map(({title,items,listItemColors,cta})=>/*#__PURE__*/React.createElement("div",{key:title,className:"flex flex-col gap-12"},/*#__PURE__*/React.createElement("p",{className:`${themeColor("text-neutral-500")} font-mono uppercase text-overline2 tracking-[0.16em]`},title),/*#__PURE__*/React.createElement("div",{className:delimiter?"":"flex flex-col gap-4"},items.map((item,index)=>Array.isArray(item)?/*#__PURE__*/React.createElement("div",{key:item[0],className:`flex justify-between gap-16 px-8 -mx-8 ${index===0?"py-8":"py-4"} ${index>0&&index%2===0?`${themeColor("bg-blue-900")} rounded-md`:""}`},item.map((subItem,subIndex)=>/*#__PURE__*/React.createElement("span",{key:subItem,className:`ui-text-p3 ${index===0?"font-bold":"font-medium"} ${themeColor("text-neutral-300")} ${subIndex%2===1?"text-right":""}`},subItem))):/*#__PURE__*/React.createElement("div",{key:item,className:"flex gap-8 items-start"},listItemColors?/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-check-circled-fill",color:themeColor(listItemColors.background),secondaryColor:themeColor(listItemColors.foreground),size:"16",additionalCSS:"mt-2"}):null,/*#__PURE__*/React.createElement("div",{className:`flex-1 ${listItemColors?"ui-text-p3":"ui-text-p2"} font-medium ${themeColor("text-neutral-300")}`},item)))),cta?/*#__PURE__*/React.createElement("div",{className:"relative -mx-24 flex items-center h-40 overflow-x-hidden"},/*#__PURE__*/React.createElement(FeaturedLink,{url:cta.url,additionalCSS:`absolute sm:-translate-x-120 sm:opacity-0 sm:group-hover:translate-x-24 duration-300 delay-0 sm:group-hover:delay-100 sm:group-hover:opacity-100 transition-[transform,opacity] font-medium ui-text-p3 ${themeColor("text-neutral-500")} hover:${themeColor("text-neutral-000")} cursor-pointer`,onClick:cta.onClick,iconColor:themeColor(listItemColors?.foreground??"text-white")},cta.text),/*#__PURE__*/React.createElement("div",{className:`absolute sm:translate-x-24 sm:opacity-100 sm:group-hover:translate-x-120 sm:group-hover:opacity-0 duration-200 delay-100 sm:group-hover:delay-0 transition-[transform,opacity] leading-6 tracking-widen-0.15 font-light text-p3 ${themeColor("text-neutral-800")}`},"•••")):null)))),delimiterColumn(index)))))};export default PricingCards;
|
package/core/ProductTile.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import
|
|
1
|
+
import React from"react";import EncapsulatedIcon from"./Icon/EncapsulatedIcon";import FeaturedLink from"./FeaturedLink";import{products}from"./ProductTile/data";import useTheming from"./hooks/useTheming";const ProductTile=({name,selected,currentPage,className,onClick})=>{const{themeColor}=useTheming({baseTheme:"dark",theme:selected?"light":"dark"});const{icon,label,description,link,unavailable}=products[name]??{};return /*#__PURE__*/React.createElement("div",{className:`rounded-lg p-12 flex flex-col gap-8 transition-colors ${themeColor("bg-neutral-1200")} ${selected?"":"hover:bg-neutral-1100"} ${className??""}`,onClick:onClick},/*#__PURE__*/React.createElement("div",{className:"flex gap-12 items-center"},icon?/*#__PURE__*/React.createElement(EncapsulatedIcon,{name:icon,theme:selected?"light":"dark"}):null,/*#__PURE__*/React.createElement("div",{className:`flex ${unavailable?"flex-row items-center gap-4":"flex-col justify-center"} `},/*#__PURE__*/React.createElement("p",{className:`${unavailable?"ui-text-p2":"ui-text-p3"} ${themeColor("text-neutral-300")} font-medium`},"Ably"," "),/*#__PURE__*/React.createElement("p",{className:`ui-text-p2 ${themeColor("text-neutral-000")} font-bold ${unavailable?"":"mt-[-3px]"}`},label))),unavailable?/*#__PURE__*/React.createElement("div",{className:"-mt-8"},/*#__PURE__*/React.createElement("div",{className:"table-cell font-sans bg-neutral-1000 rounded-full px-6 py-2 text-gui-unavailable tracking-tighten-0.015 font-bold text-[8px] leading-snug"},"COMING SOON")):null,/*#__PURE__*/React.createElement("p",{className:`ui-text-p3 ${selected?"text-neutral-1000":"text-neutral-500"} font-medium leading-snug`},description),selected&&link?/*#__PURE__*/React.createElement(FeaturedLink,{additionalCSS:`ui-btn-secondary bg-transparent hover:bg-transparent w-full hover:text-neutral-1300 mt-8 text-center inline-block ${themeColor("text-neutral-000")}`,iconColor:"text-orange-600",url:link},currentPage?"View docs":"Explore"):null)};export default ProductTile;
|
package/core/Tooltip.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import
|
|
1
|
+
import React,{useRef,useState,useEffect}from"react";import{createPortal}from"react-dom";import Icon from"./Icon";import useTheming from"./hooks/useTheming";const Tooltip=({children,triggerElement,triggerProps,tooltipProps,theme="dark",interactive=false,...rest})=>{const[open,setOpen]=useState(false);const[fadeOut,setFadeOut]=useState(false);const[position,setPosition]=useState({x:0,y:0,orientation:"top"});const offset=8;const reference=useRef(null);const floating=useRef(null);const fadeOutTimeoutRef=useRef(null);const{themeColor}=useTheming({baseTheme:"light",theme});useEffect(()=>{if(open){const floatingRect=floating.current?.getBoundingClientRect();const referenceRect=reference.current?.getBoundingClientRect();const viewportWidth=window.innerWidth;const viewportHeight=window.innerHeight;let orientation="top";if(floatingRect&&referenceRect){let x=referenceRect.left+referenceRect.width/2-floatingRect.width/2+window.scrollX;let y=referenceRect.top-floatingRect.height-offset+window.scrollY;if(x+floatingRect.width>viewportWidth+window.scrollX){x=viewportWidth+window.scrollX-floatingRect.width-offset;orientation="left"}if(x<window.scrollX){x=window.scrollX+offset;orientation="right"}if(y<window.scrollY){y=referenceRect.bottom+offset+window.scrollY;orientation="bottom"}if(y+floatingRect.height>viewportHeight+window.scrollY){y=referenceRect.top-floatingRect.height-offset+window.scrollY}setPosition({x,y,orientation})}}else{setPosition({x:0,y:0,orientation:"top"})}return()=>{if(fadeOutTimeoutRef.current!==null){clearTimeout(fadeOutTimeoutRef.current)}}},[open]);const initiateFadeOut=()=>{setFadeOut(true);fadeOutTimeoutRef.current=setTimeout(()=>{setOpen(false);setFadeOut(false)},250)};const cursorTowardsTooltip=(event,ref)=>{if(!ref.current){return false}const{clientX,clientY}=event;const{x,y,width,height}=ref.current.getBoundingClientRect();const{orientation}=position;switch(orientation){case"top":return clientX>=x&&clientX<=x+width&&clientY<y;case"left":return clientY>=y&&clientY<=y+height&&clientX<x;case"right":return clientY>=y&&clientY<=y+height&&clientX>x+width;case"bottom":return clientX>=x&&clientX<=x+width&&clientY>y+height;default:return false}};const fadeOutIfNotWithinTrigger=event=>{if(!reference.current)return;const{clientX,clientY}=event;const{x,y,width,height}=reference.current.getBoundingClientRect();const withinBounds=clientX>=x&&clientX<=x+width&&clientY>=y&&clientY<=y+height;if(!withinBounds){initiateFadeOut()}};return /*#__PURE__*/React.createElement("div",{...rest,className:`inline-flex ml-8 ${rest?.className??""}`},/*#__PURE__*/React.createElement("button",{onMouseEnter:()=>setOpen(true),onMouseLeave:event=>{if(!interactive||!cursorTowardsTooltip(event,reference)){initiateFadeOut()}},type:"button",ref:reference,"aria-describedby":"tooltip",...triggerProps,className:`p-0 relative focus:outline-none h-[1rem] ${triggerProps?.className??""}`},triggerElement??/*#__PURE__*/React.createElement(Icon,{name:"icon-gui-info",color:`${themeColor("text-neutral-800")}`,size:"1rem"})),open?/*#__PURE__*/createPortal(/*#__PURE__*/React.createElement("div",{role:"tooltip",ref:floating,onMouseLeave:event=>setTimeout(()=>fadeOutIfNotWithinTrigger(event),250),style:{top:position.y,left:position.x,zIndex:1e3,boxShadow:"4px 4px 15px rgba(0, 0, 0, 0.2)"},...tooltipProps,className:`${themeColor("bg-neutral-1000")} ${themeColor("text-neutral-200")} ui-text-p3 font-medium p-16 ${interactive?"":"pointer-events-none"} rounded-lg absolute ${tooltipProps?.className??""} ${fadeOut?"animate-[tooltipExit_0.25s_ease-in-out]":"animate-[tooltipEntry_0.25s_ease-in-out]"}`},/*#__PURE__*/React.createElement("div",{className:"max-w-[240px] w-auto"},children)),document.body):null)};export default Tooltip;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
import{useCallback}from"react";import{invertTailwindClassVariant}from"../styles/colors/utils";const useTheming=({baseTheme="dark",theme="dark"})=>{const themeColor=useCallback(color=>theme===baseTheme?color:invertTailwindClassVariant(color),[baseTheme,theme]);return{themeColor}};export default useTheming;
|