Fix ref forwarding in static build

coqui-ai · Aug 9, 2023 · 196c96b · 196c96b
1 parent 1f4f753
commit 196c96b
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 23 deletions.
diff --git a/src/layouts/Home/components/Buttons.tsx b/src/layouts/Home/components/Buttons.tsx
@@ -9,26 +9,29 @@ import { Button } from '@zendeskgarden/react-buttons';
 import { getColor } from '@zendeskgarden/react-theming';
 import React, { FC } from 'react';
 import { css } from 'styled-components';
+import ClientSide from 'utils/ClientSide';
 import { useSignupLink } from './SignUpLink';
 import { StyledNavigationLink } from './StyledNavigationLink';
 
 export const TryNowButton = ({ ...rest }) => {
   const signupLink = useSignupLink();
 
   return (
-    <StyledNavigationLink to={signupLink} {...rest}>
-      <Button
-        css={css`
-          border-width: 0;
-          background-color: ${p => getColor('yellow', 600, p.theme)};
-          color: #fff;
-          border-radius: 7.2px;
-          font-weight: 700;
-        `}
-      >
-        Try now for free
-      </Button>
-    </StyledNavigationLink>
+    <ClientSide>
+      <StyledNavigationLink to={signupLink} {...rest}>
+        <Button
+          css={css`
+            border-width: 0;
+            background-color: ${p => getColor('yellow', 600, p.theme)};
+            color: #fff;
+            border-radius: 7.2px;
+            font-weight: 700;
+          `}
+        >
+          Try now for free
+        </Button>
+      </StyledNavigationLink>
+    </ClientSide>
   );
 };
 

diff --git a/src/layouts/Home/components/Hero.tsx b/src/layouts/Home/components/Hero.tsx
@@ -8,6 +8,7 @@
 import { mediaQuery } from '@zendeskgarden/react-theming';
 import React from 'react';
 import { css } from 'styled-components';
+import ClientSide from 'utils/ClientSide';
 import { PrimaryButton, SecondaryButton } from './Buttons';
 import { useSignupLink } from './SignUpLink';
 import { VideoFrame } from './VideoFrame';
@@ -24,11 +25,9 @@ export const Hero = () => {
         background: linear-gradient(207.81deg, #f5faff 54.98%, #fefffe 92.7%);
         padding: 5rem 10rem;
         height: calc(100vh - 77px);
-
         ${p => mediaQuery('down', 'md', p.theme)} {
           padding: 5rem 4rem;
         }
-
         ${p => mediaQuery('down', 'sm', p.theme)} {
           height: calc(100vh - 60px);
         }
@@ -101,7 +100,9 @@ export const Hero = () => {
               padding-top: 20px;
             `}
           >
-            <PrimaryButton text="Start now for free" path={signupLink} />
+            <ClientSide>
+              <PrimaryButton text="Start now for free" path={signupLink} />
+            </ClientSide>
             <SecondaryButton text="See what we can do" path="/#features" />
           </div>
         </div>

diff --git a/src/layouts/Home/components/PricingTable.tsx b/src/layouts/Home/components/PricingTable.tsx
@@ -13,6 +13,7 @@ import NewsletterForm from 'layouts/Root/components/NewsletterForm';
 import { OrangeButton } from 'layouts/Root/components/Styled';
 import React, { ReactNode, useState } from 'react';
 import styled, { css } from 'styled-components';
+import ClientSide from 'utils/ClientSide';
 import { TryNowButton } from './Buttons';
 import { useSignupLink } from './SignUpLink';
 
@@ -506,9 +507,13 @@ const StarterPlanContainer = () => {
         <span>Directable Voice Intensity</span>
         <span>API Access</span>
       </FeatureList>
-      <a href={signupLink}>
-        <OrangeButton css="font-size: 18px; width: 100%; padding: 24px;">Get Started</OrangeButton>
-      </a>
+      <ClientSide>
+        <a href={signupLink}>
+          <OrangeButton css="font-size: 18px; width: 100%; padding: 24px;">
+            Get Started
+          </OrangeButton>
+        </a>
+      </ClientSide>
     </PlanContainer>
   );
 };
@@ -609,9 +614,11 @@ export const PricingTable = () => {
               <span>Directable Voice Intonation</span>
               <span>Directable Voice Intensity</span>
             </FeatureList>
-            <a href={signupLink}>
-              <InvertedOrangeButton>Try now for free</InvertedOrangeButton>
-            </a>
+            <ClientSide>
+              <a href={signupLink}>
+                <InvertedOrangeButton>Try now for free</InvertedOrangeButton>
+              </a>
+            </ClientSide>
           </PlanContainer>
           <StarterPlanContainer />
           <PlanContainer>

diff --git a/src/layouts/Root/components/Footer.tsx b/src/layouts/Root/components/Footer.tsx
@@ -15,6 +15,7 @@ import MaxWidthLayout from 'layouts/MaxWidth';
 import { math } from 'polished';
 import React from 'react';
 import styled, { css } from 'styled-components';
+import ClientSide from 'utils/ClientSide';
 import { ReactComponent as DiscordIcon } from '../../../data/images/general/discord-logo.svg';
 import { ReactComponent as YouTubeIcon } from '../../../data/images/general/youtube.svg';
 import { NewsletterForm } from './NewsletterForm';
@@ -311,7 +312,9 @@ const Footer: React.FC<IFooterLayoutProps> = ({ isSubscribing }) => {
                 `}
               >
                 <p css="font-weight: 700">Product</p>
-                <StyledLinksItem to={signupLink}>Coqui Studio</StyledLinksItem>
+                <ClientSide>
+                  <StyledLinksItem to={signupLink}>Coqui Studio</StyledLinksItem>
+                </ClientSide>
               </div>
               <div
                 css={css`