From 549080cba68be18fea88a58e970bcf68b1d57d48 Mon Sep 17 00:00:00 2001 From: NelsonDong41 Date: Fri, 3 Nov 2023 10:50:07 -0400 Subject: [PATCH 1/5] initial commit for stagger animations --- .../landing-section/LandingSection.styles.ts | 29 +++++----- .../landing-section/LandingSection.tsx | 54 +++++++++++++------ package.json | 1 + yarn.lock | 5 ++ 4 files changed, 57 insertions(+), 32 deletions(-) diff --git a/main-site/components/landing-section/LandingSection.styles.ts b/main-site/components/landing-section/LandingSection.styles.ts index c6bbce69..2701c1e1 100644 --- a/main-site/components/landing-section/LandingSection.styles.ts +++ b/main-site/components/landing-section/LandingSection.styles.ts @@ -5,8 +5,8 @@ import { max, min } from '../../../shared-ui/lib/responsive'; import { colors } from '../../../shared-ui/style/colors'; import { H1, H3, H5, H6, P } from '../../../shared-ui/style/typography'; -const StyledHackathonText = styled(H5)` - { +const StyledHackathonText = styled(motion(H5))` + { color: ${colors.WHITE}; padding-bottom: 0.2em; @media ${max.tablet} { @@ -19,8 +19,7 @@ const StyledHackathonText = styled(H5)` } `; - -const StyledThemeText = styled(H1)` +const StyledThemeText = styled(motion(H1))` { color: ${colors.WHITE}; padding-bottom: 0.1em; @@ -33,7 +32,7 @@ const StyledThemeText = styled(H1)` } `; -const StyledThemeTextSmall = styled(H6)` +const StyledThemeTextSmall = styled(motion(H6))` { color: ${colors.WHITE}; padding-bottom: 0.1em; @@ -46,7 +45,7 @@ const StyledThemeTextSmall = styled(H6)` } `; -const StyledThemeTextParagraph = styled(P)` +const StyledThemeTextParagraph = styled(motion(P))` { color: ${colors.WHITE}; padding-bottom: 0.1em; @@ -88,7 +87,7 @@ const StyledBubble1 = styled.img` @media ${min.tablet} { width: 5%; } -` +`; const StyledBubble2 = styled.img` position: absolute; @@ -107,7 +106,7 @@ const StyledBubble2 = styled.img` top: 90vw; right: -5vw; } -` +`; const StyledFish = styled.img` position: absolute; @@ -126,7 +125,7 @@ const StyledFish = styled.img` @media ${max.mobile} { top: 110vw; } -` +`; const StyledJellyfish = styled.img` position: absolute; @@ -146,7 +145,7 @@ const StyledJellyfish = styled.img` @media ${max.mobile} { top: 110vw; } -` +`; const StyledWhale = styled.img` position: absolute; @@ -165,9 +164,9 @@ const StyledWhale = styled.img` @media ${max.mobile} { top: 120vw; } -` +`; -const StyledLandingTextContainer = styled.div` +const StyledLandingTextContainer = styled(motion.div)` padding-top: 21em; text-align: center; @media ${max.tabletLg} { @@ -184,11 +183,11 @@ const StyledLandingTextContainer = styled.div` } `; -const StyledLandingSectionContainer = styled.div` +const StyledLandingSectionContainer = styled(motion.div)` position: relative; `; -const StyledLandingButtonContainer = styled(PrimaryButton)` +const StyledLandingButtonContainer = styled(motion(PrimaryButton))` padding-top: 2em; position: fixed; justify-content: left; @@ -218,7 +217,7 @@ const StyledToggle = styled.img` export { StyledHackathonText, StyledThemeText, - StyledThemeTextSmall, + StyledThemeTextSmall, StyledThemeTextParagraph, StyledLandingButtonContainer, StyledLandingSectionContainer, diff --git a/main-site/components/landing-section/LandingSection.tsx b/main-site/components/landing-section/LandingSection.tsx index a43b533f..640b3ec8 100644 --- a/main-site/components/landing-section/LandingSection.tsx +++ b/main-site/components/landing-section/LandingSection.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useRef } from 'react'; import { StyledHackathonText, StyledThemeText, @@ -13,28 +13,48 @@ import { StyledJellyfish, StyledWhale } from './LandingSection.styles'; -import Bubble from '../../../shared-ui/images/bubbles.svg' -import Bubble2 from '../../../shared-ui/images/bubbles2.svg' -import Fish from '../../../shared-ui/images/fish.svg' -import Jellyfish from '../../../shared-ui/images/jellyfish.svg' -import Whale from '../../../shared-ui/images/whale.svg' +import Bubble from '../../../shared-ui/images/bubbles.svg'; +import Bubble2 from '../../../shared-ui/images/bubbles2.svg'; +import Fish from '../../../shared-ui/images/fish.svg'; +import Jellyfish from '../../../shared-ui/images/jellyfish.svg'; +import Whale from '../../../shared-ui/images/whale.svg'; import ToggleMode from '../../../shared-ui/components/toggle-mode/ToggleMode'; import { LandingSectionProps } from '../../lib/types'; +import { useInView } from 'framer-motion'; +import { + customAnimationVariants, + containerAnimation, + itemAnimation +} from '../../../shared-ui/animations/variants'; const LandingSection: React.FC = ({ isDay, setIsDay }) => { + const LandingSectionRef = useRef(null); + const LandingSectionInView = useInView(LandingSectionRef, { once: true }); + return ( - + - - - - - - - HackBeanpot 2024 - Under the Sea - February 10-12, 2024 - @ Wood Mackenzie (Formerly known as PowerAdvocate)
179 Lincoln St, Boston, MA 02111 + + + + + + + + HackBeanpot 2024 + + + Under the Sea + + + February 10-12, 2024 + + + @ Wood Mackenzie (Formerly known as PowerAdvocate)
179 Lincoln + St, Boston, MA 02111 + {/* */} Date: Fri, 3 Nov 2023 11:02:10 -0400 Subject: [PATCH 2/5] variations file --- shared-ui/animations/variants.ts | 40 ++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 shared-ui/animations/variants.ts diff --git a/shared-ui/animations/variants.ts b/shared-ui/animations/variants.ts new file mode 100644 index 00000000..c1c64764 --- /dev/null +++ b/shared-ui/animations/variants.ts @@ -0,0 +1,40 @@ +const customAnimationVariants = { + initial: { opacity: 0 }, + visible: { + opacity: 1, + y: 0, + transition: { + when: 'afterChildren' + } + }, + hidden: { + opacity: 0, + y: '25vh', + transition: { + when: 'beforeChildren', + staggerChildren: 0.08, + delayChildren: 0 + } + } +}; + +const containerAnimation = { + animate: { + transition: { + staggerChildren: 0.5 + } + } +}; + +const itemAnimation = { + initial: { opacity: 0, y: 60 }, + animate: { + opacity: 1, + y: 0, + transition: { + duration: 1 + } + } +}; + +export default { customAnimationVariants, containerAnimation, itemAnimation }; From 1c4685e7967266c4fd137d516cd1222ce3b2c4dc Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 3 Nov 2023 11:44:32 -0400 Subject: [PATCH 3/5] animations for landing and about --- .../about-section/AboutSection.styles.ts | 3 ++- .../components/about-section/AboutSection.tsx | 9 ++++++- .../landing-section/LandingSection.tsx | 25 ++++++++----------- 3 files changed, 21 insertions(+), 16 deletions(-) diff --git a/main-site/components/about-section/AboutSection.styles.ts b/main-site/components/about-section/AboutSection.styles.ts index 8452c8e1..9dd37982 100644 --- a/main-site/components/about-section/AboutSection.styles.ts +++ b/main-site/components/about-section/AboutSection.styles.ts @@ -1,8 +1,9 @@ import styled from '@emotion/styled'; import { H2, H3, P } from '../../../shared-ui/style/typography'; import { max, min } from '../../../shared-ui/lib/responsive'; +import { motion } from 'framer-motion'; -const StyledAboutSectionContainer = styled.div` +const StyledAboutSectionContainer = styled(motion.div)` margin-top: 10em; padding-bottom: 10em; position: relative; diff --git a/main-site/components/about-section/AboutSection.tsx b/main-site/components/about-section/AboutSection.tsx index a0d75aa8..5a888f69 100644 --- a/main-site/components/about-section/AboutSection.tsx +++ b/main-site/components/about-section/AboutSection.tsx @@ -24,6 +24,8 @@ import { AboutSectionData } from '../../lib/types'; import Arrow from '../../../shared-ui/components/arrow/Arrow'; import { getLeftOrRight } from '../../lib/utils'; import Shell from '../../../shared-ui/images/shell.png'; +import { motion } from 'framer-motion'; +import variants from '../../../shared-ui/animations/variants'; function getImage(title: string): string { if (title === 'Community') { @@ -43,7 +45,12 @@ const AboutSection: React.FC = () => { return (
- + HackBeanpot is about... {!isDesktop && ( diff --git a/main-site/components/landing-section/LandingSection.tsx b/main-site/components/landing-section/LandingSection.tsx index 640b3ec8..fb275432 100644 --- a/main-site/components/landing-section/LandingSection.tsx +++ b/main-site/components/landing-section/LandingSection.tsx @@ -21,18 +21,12 @@ import Whale from '../../../shared-ui/images/whale.svg'; import ToggleMode from '../../../shared-ui/components/toggle-mode/ToggleMode'; import { LandingSectionProps } from '../../lib/types'; import { useInView } from 'framer-motion'; -import { - customAnimationVariants, - containerAnimation, - itemAnimation -} from '../../../shared-ui/animations/variants'; +import variants from '../../../shared-ui/animations/variants'; const LandingSection: React.FC = ({ isDay, setIsDay }) => { - const LandingSectionRef = useRef(null); - const LandingSectionInView = useInView(LandingSectionRef, { once: true }); return ( - + @@ -40,27 +34,30 @@ const LandingSection: React.FC = ({ isDay, setIsDay }) => { - + HackBeanpot 2024 - + Under the Sea - + February 10-12, 2024 - + @ Wood Mackenzie (Formerly known as PowerAdvocate)
179 Lincoln St, Boston, MA 02111 - {/* */} + {/* */} ); From e0fc4fb40889fcaf3ff3bbd4da6f1e9fb7e7be7b Mon Sep 17 00:00:00 2001 From: unknown Date: Fri, 3 Nov 2023 11:47:42 -0400 Subject: [PATCH 4/5] variants --- shared-ui/animations/variants.ts | 43 +++++++++++--------------------- 1 file changed, 14 insertions(+), 29 deletions(-) diff --git a/shared-ui/animations/variants.ts b/shared-ui/animations/variants.ts index c1c64764..e4651804 100644 --- a/shared-ui/animations/variants.ts +++ b/shared-ui/animations/variants.ts @@ -1,40 +1,25 @@ -const customAnimationVariants = { - initial: { opacity: 0 }, - visible: { +const container = { + hidden: { opacity: 0, y: '50vh' }, + staggerFadeInAndUp: { opacity: 1, - y: 0, + y: '0', transition: { - when: 'afterChildren' + staggerChildren: 0.2 } }, - hidden: { - opacity: 0, - y: '25vh', - transition: { - when: 'beforeChildren', - staggerChildren: 0.08, - delayChildren: 0 - } - } -}; - -const containerAnimation = { - animate: { - transition: { - staggerChildren: 0.5 - } + fadeInAndUp: { + opacity: 1, + y: '0' } }; -const itemAnimation = { - initial: { opacity: 0, y: 60 }, - animate: { +const item = { + hidden: { opacity: 0, y: '50vh' }, + staggerFadeInAndUp: { opacity: 1, y: 0 }, + fadeInAndUp: { opacity: 1, - y: 0, - transition: { - duration: 1 - } + y: '0' } }; -export default { customAnimationVariants, containerAnimation, itemAnimation }; +export default { container, item }; From e9ef5e4f959ae93a17abcd7aa7054f1bb0de119b Mon Sep 17 00:00:00 2001 From: unknown Date: Sat, 4 Nov 2023 18:05:41 -0400 Subject: [PATCH 5/5] add animations to landing page, about page, and events calender page --- .../about-section/AboutSection.animations.ts | 27 ++++++++++ .../about-section/AboutSection.styles.ts | 6 +-- .../components/about-section/AboutSection.tsx | 26 ++++++---- .../EventsCalendarSection.styles.ts | 7 +-- .../EventsCalendarSection.tsx | 26 +++++++--- .../EventsCalenderSection.animation.ts | 28 +++++++++++ .../LandingSection.animations.ts | 50 +++++++++++++++++++ .../landing-section/LandingSection.styles.ts | 2 +- .../landing-section/LandingSection.tsx | 18 +++---- main-site/lib/types.ts | 4 ++ shared-ui/animations/variants.ts | 25 ---------- .../primary-button/PrimaryButton.tsx | 10 ++-- 12 files changed, 166 insertions(+), 63 deletions(-) create mode 100644 main-site/components/about-section/AboutSection.animations.ts create mode 100644 main-site/components/events-calendar-section/EventsCalenderSection.animation.ts delete mode 100644 shared-ui/animations/variants.ts diff --git a/main-site/components/about-section/AboutSection.animations.ts b/main-site/components/about-section/AboutSection.animations.ts new file mode 100644 index 00000000..ca14d824 --- /dev/null +++ b/main-site/components/about-section/AboutSection.animations.ts @@ -0,0 +1,27 @@ +export const hidden = { + initial: { + opacity: 0, + transition: { + duration: 1 + } + }, + animate: { + opacity: 0, + transition: { + duration: 1 + } + } +}; +export const fadeInUp = { + initial: { + y: 60, + opacity: 0 + }, + animate: { + y: 0, + opacity: 1, + transition: { + duration: 1 + } + } +}; diff --git a/main-site/components/about-section/AboutSection.styles.ts b/main-site/components/about-section/AboutSection.styles.ts index adae6a17..28865df7 100644 --- a/main-site/components/about-section/AboutSection.styles.ts +++ b/main-site/components/about-section/AboutSection.styles.ts @@ -13,7 +13,7 @@ const StyledAboutSectionContainer = styled(motion.div)` } `; -const StyledItemsContainer = styled.div` +const StyledItemsContainer = styled(motion.div)` display: flex; margin: 5em; justify-content: center; @@ -36,7 +36,7 @@ const StyledItemTextContainer = styled.div` } `; -const StyledTitle = styled(H2)` +const StyledTitle = styled(motion(H2))` color: white; text-align: center; `; @@ -62,7 +62,7 @@ const StyledItemDescription = styled(P)` } `; -const StyledItemContainer = styled.div` +const StyledItemContainer = styled(motion.div)` width: 17em; display: flex; justify-content: center; diff --git a/main-site/components/about-section/AboutSection.tsx b/main-site/components/about-section/AboutSection.tsx index c7961578..358ae227 100644 --- a/main-site/components/about-section/AboutSection.tsx +++ b/main-site/components/about-section/AboutSection.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React, { useState, useRef, useEffect } from 'react'; import { min } from '../../../shared-ui/lib/responsive'; import useMatchMedia from 'react-use-match-media'; import { colors } from '../../../shared-ui/style/colors'; @@ -24,8 +24,9 @@ import { AboutSectionData } from '../../lib/types'; import Arrow from '../../../shared-ui/components/arrow/Arrow'; import { getLeftOrRight } from '../../lib/utils'; import Shell from '../../../shared-ui/images/shell.png'; -import { motion } from 'framer-motion'; -import variants from '../../../shared-ui/animations/variants'; +import { useInView } from 'react-intersection-observer'; +import {fadeInUp, hidden } from './AboutSection.animations'; +import { useAnimation } from 'framer-motion'; function getImage(title: string): string { if (title === 'Community') { @@ -43,15 +44,18 @@ const AboutSection: React.FC = () => { aboutSectionData[0] ); + const animationControls = useAnimation(); + const [ref, inView] = useInView(); + + // if the section is in view, start the animation for the section + useEffect(() => { + inView ? animationControls.start("animate") : animationControls.set("initial") + }, [animationControls, inView]) + return (
- - HackBeanpot is about... + + HackBeanpot is about... {!isDesktop && ( @@ -92,7 +96,7 @@ const AboutSection: React.FC = () => { {isDesktop && ( {aboutSectionData.map((curr) => ( - + diff --git a/main-site/components/events-calendar-section/EventsCalendarSection.styles.ts b/main-site/components/events-calendar-section/EventsCalendarSection.styles.ts index d93866f9..5bd60164 100644 --- a/main-site/components/events-calendar-section/EventsCalendarSection.styles.ts +++ b/main-site/components/events-calendar-section/EventsCalendarSection.styles.ts @@ -3,12 +3,13 @@ import { max, min } from '../../../shared-ui/lib/responsive'; import { colors } from '../../../shared-ui/style/colors'; import { fonts, H2, P } from '../../../shared-ui/style/typography'; import { eventsCalendarData } from '../../lib/data'; +import {motion} from 'framer-motion' const StyledDesktopTextsContainer = styled.div` padding: 1em 0; `; -const StyledSectionContainer = styled.div` +const StyledSectionContainer = styled(motion.div)` padding-top: 5em; padding-bottom: 30em; @media ${max.tablet} { @@ -17,7 +18,7 @@ const StyledSectionContainer = styled.div` } `; -const StyledEventsContainer = styled.div` +const StyledEventsContainer = styled(motion.div)` top: 3em; position: relative; display: flex; @@ -162,7 +163,7 @@ const EventsSubHeader = styled(P)` } `; -const StyledH2 = styled(H2)` +const StyledH2 = styled(motion(H2))` text-align: center; color: ${colors.WHITE}; `; diff --git a/main-site/components/events-calendar-section/EventsCalendarSection.tsx b/main-site/components/events-calendar-section/EventsCalendarSection.tsx index c16461ce..8b579b60 100644 --- a/main-site/components/events-calendar-section/EventsCalendarSection.tsx +++ b/main-site/components/events-calendar-section/EventsCalendarSection.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect } from 'react'; import EventsSeaweed from '../../../shared-ui/images/seaweed-rock.svg'; import EventsSeaweedDark from '../../../shared-ui/images/seaweed-rock-dark.svg'; import EventsFishSchool from '../../../shared-ui/images/school-fish.svg'; @@ -16,21 +16,35 @@ import { min } from '../../../shared-ui/lib/responsive'; import useMatchMedia from 'react-use-match-media'; import DesktopTexts from './texts/DesktopTexts'; import { eventsCalendarData } from '../../lib/data'; +import variants from '../../../shared-ui/animations/variants'; +import { useAnimation } from 'framer-motion'; +import { useInView } from 'react-intersection-observer'; +import { fadeInUp } from './EventsCalenderSection.animation'; +import { EventsCalenderSectionProps } from '../../lib/types'; -const EventsCalendarSection: React.FC = ({ isDay }) => { +const EventsCalendarSection: React.FC = ({ isDay }) => { const isDesktop = useMatchMedia(min.tablet); + + const animationControls = useAnimation(); + const [ref, inView] = useInView(); + + // if the section is in view, start the animation for the section + useEffect(() => { + inView ? animationControls.start("animate") : animationControls.set("initial") + }, [animationControls, inView]) + return (
- - Events Calendar - + + Events Calendar + {isDesktop && ( )} - + diff --git a/main-site/components/events-calendar-section/EventsCalenderSection.animation.ts b/main-site/components/events-calendar-section/EventsCalenderSection.animation.ts new file mode 100644 index 00000000..f421bce6 --- /dev/null +++ b/main-site/components/events-calendar-section/EventsCalenderSection.animation.ts @@ -0,0 +1,28 @@ +export const hidden = { + initial: { + opacity: 0, + transition: { + duration: 1 + } + }, + animate: { + opacity: 0, + transition: { + duration: 1 + } + } +}; + +export const fadeInUp = { + initial: { + y: 60, + opacity: 0 + }, + animate: { + y: 0, + opacity: 1, + transition: { + duration: 1 + } + } +}; diff --git a/main-site/components/landing-section/LandingSection.animations.ts b/main-site/components/landing-section/LandingSection.animations.ts index dead89a7..04b18920 100644 --- a/main-site/components/landing-section/LandingSection.animations.ts +++ b/main-site/components/landing-section/LandingSection.animations.ts @@ -18,3 +18,53 @@ export const moonRock = { } } }; + + +export const fadeInUp = { + initial: { + y: 60, + opacity: 0 + }, + animate: { + y: 0, + opacity: 1, + transition: { + duration: 1 + } + } +}; +export const fadeInLeft = { + initial: { + x: -60, + opacity: 0 + }, + animate: { + x: 0, + opacity: 1, + transition: { + duration: 1 + } + } +}; + +export const fadeInRight = { + initial: { + x: 60, + opacity: 0 + }, + animate: { + x: 0, + opacity: 1, + transition: { + duration: 1 + } + } +}; + +export const stagger = { + animate: { + transition: { + staggerChildren: 0.5 + } + } +}; \ No newline at end of file diff --git a/main-site/components/landing-section/LandingSection.styles.ts b/main-site/components/landing-section/LandingSection.styles.ts index 8700f19f..ccedb2bb 100644 --- a/main-site/components/landing-section/LandingSection.styles.ts +++ b/main-site/components/landing-section/LandingSection.styles.ts @@ -225,7 +225,7 @@ const StyledHourglass = styled.img` margin-right: 0.3em; `; -const StyledCountdownContainer = styled.div` +const StyledCountdownContainer = styled(motion.div)` display: flex; justify-content: center; `; diff --git a/main-site/components/landing-section/LandingSection.tsx b/main-site/components/landing-section/LandingSection.tsx index 9e63ee0f..81505111 100644 --- a/main-site/components/landing-section/LandingSection.tsx +++ b/main-site/components/landing-section/LandingSection.tsx @@ -23,7 +23,7 @@ import Jellyfish from '../../../shared-ui/images/jellyfish.svg'; import Whale from '../../../shared-ui/images/whale.svg'; import ToggleMode from '../../../shared-ui/components/toggle-mode/ToggleMode'; import { useInView } from 'framer-motion'; -import variants from '../../../shared-ui/animations/variants'; +import { fadeInUp, stagger } from './LandingSection.animations'; import { CountdownProps, LandingSectionProps } from '../../lib/types'; import { CountdownData } from '../../lib/data'; import hourglass from '../../../shared-ui/images/hourglass.svg' @@ -70,29 +70,29 @@ const Countdown: React.FC = ({ targetDate }) => { const LandingSection: React.FC = ({ isDay, setIsDay }) => { return ( - + - - HackBeanpot 2024 - Under the Sea - February 9-11, 2024 - Location TBD + + HackBeanpot 2024 + Under the Sea + February 9-11, 2024 + Location TBD {/* @ Wood Mackenzie (Formerly known as PowerAdvocate)
179 Lincoln St, Boston, MA 02111 */} {/* */} {/* */} - + diff --git a/main-site/lib/types.ts b/main-site/lib/types.ts index 039fb329..bb52a942 100644 --- a/main-site/lib/types.ts +++ b/main-site/lib/types.ts @@ -32,6 +32,10 @@ export interface ExploreSectionProps { isDay: boolean; } +export interface EventsCalenderSectionProps { + isDay: boolean; +} + export interface TestimonialData { id: number; author: string; diff --git a/shared-ui/animations/variants.ts b/shared-ui/animations/variants.ts deleted file mode 100644 index e4651804..00000000 --- a/shared-ui/animations/variants.ts +++ /dev/null @@ -1,25 +0,0 @@ -const container = { - hidden: { opacity: 0, y: '50vh' }, - staggerFadeInAndUp: { - opacity: 1, - y: '0', - transition: { - staggerChildren: 0.2 - } - }, - fadeInAndUp: { - opacity: 1, - y: '0' - } -}; - -const item = { - hidden: { opacity: 0, y: '50vh' }, - staggerFadeInAndUp: { opacity: 1, y: 0 }, - fadeInAndUp: { - opacity: 1, - y: '0' - } -}; - -export default { container, item }; diff --git a/shared-ui/components/primary-button/PrimaryButton.tsx b/shared-ui/components/primary-button/PrimaryButton.tsx index 0fb0e4d7..7f638853 100644 --- a/shared-ui/components/primary-button/PrimaryButton.tsx +++ b/shared-ui/components/primary-button/PrimaryButton.tsx @@ -3,14 +3,14 @@ import { StyledPrimaryButton } from './PrimaryButton.styles'; import { ButtonProps } from '../../lib/types'; import { buttonAnimations } from './PrimaryButton.animations'; -const PrimaryButton: React.FC = ({ +const PrimaryButton: React.FC = React.forwardRef(({ btnText, btnLink, newTab = false, isSmallPrimary = false, transparent = false, isApplyButton = false, -}) => { +}, ref) => { const [isClicked, setIsClicked] = useState(false); if (!btnLink) { const ctaText = isClicked ? 'Copied to clipboard!' : btnText; @@ -28,7 +28,7 @@ const PrimaryButton: React.FC = ({ document.body.removeChild(el); }; return ( - + {ctaText} @@ -37,7 +37,7 @@ const PrimaryButton: React.FC = ({ } return ( - + = ({ ); -}; +}); export default PrimaryButton;