import { useState, useEffect } from 'react'; const Comp = ({ onLinkClick, title = "Our Party Packages", titleFontF = 'var(--font-family-heading)', titleFontW = 'var(--font-weight-heading)', titleFontS = '', backgroundColor = 'rgba(252, 231, 243, 1)', // Package Names basicName = "Basic", basicNameFontF = 'var(--font-family-heading)', basicNameFontW = 'var(--font-weight-heading)', basicNameFontS = '', standardName = "Standard", standardNameFontF = 'var(--font-family-heading)', standardNameFontW = 'var(--font-weight-heading)', standardNameFontS = '', premiumName = "Premium", premiumNameFontF = 'var(--font-family-heading)', premiumNameFontW = 'var(--font-weight-heading)', premiumNameFontS = '', // Durations basicDuration = "2 Hours", basicDurationFontF = 'var(--font-family)', basicDurationFontW = 'var(--font-weight)', basicDurationFontS = '', standardDuration = "3 Hours", standardDurationFontF = 'var(--font-family)', standardDurationFontW = 'var(--font-weight)', standardDurationFontS = '', premiumDuration = "4 Hours", premiumDurationFontF = 'var(--font-family)', premiumDurationFontW = 'var(--font-weight)', premiumDurationFontS = '', // Features basicChildren = "Up to 8 children", standardChildren = "Up to 12 children", premiumChildren = "Up to 15 children", basicBabysitters = "1 Babysitter", standardBabysitters = "2 Babysitters", premiumBabysitters = "3 Babysitters", basicTeepees = "Basic setup", standardTeepees = "Standard setup", premiumTeepees = "Premium setup", basicGames = "Basic games", standardGames = "Standard games & activities", premiumGames = "Premium games & activities", basicPlaydoh = "-", standardPlaydoh = "✓", premiumPlaydoh = "✓", basicTreasure = "-", standardTreasure = "-", premiumTreasure = "✓", basicBallpit = "-", standardBallpit = "-", premiumBallpit = "✓", basicSetup = "Basic setup & pack-up", standardSetup = "Standard setup & pack-up", premiumSetup = "Premium setup & pack-up", // Buttons basicButtonText = "Enquire Basic", basicButtonTextFontF = 'var(--font-family-button)', basicButtonTextFontW = 'var(--font-weight-button)', basicButtonTextFontS = 'var(--font-size-button)', basicButtonLink = '', basicButtonLinkType = 'page', basicButtonNewTab = false, standardButtonText = "Enquire Standard", standardButtonTextFontF = 'var(--font-family-button)', standardButtonTextFontW = 'var(--font-weight-button)', standardButtonTextFontS = 'var(--font-size-button)', standardButtonLink = '', standardButtonLinkType = 'page', standardButtonNewTab = false, premiumButtonText = "Enquire Premium", premiumButtonTextFontF = 'var(--font-family-button)', premiumButtonTextFontW = 'var(--font-weight-button)', premiumButtonTextFontS = 'var(--font-size-button)', premiumButtonLink = '', premiumButtonLinkType = 'page', premiumButtonNewTab = false, // Colors cardBackgroundColor = '#FFFFFF', buttonBackgroundColor = '#DB2777', buttonHoverColor = '#BE185D', buttonTextColor = '#FFFFFF', popularBadgeColor = '#DB2777', popularBadgeTextColor = '#FFFFFF', // Badge popularBadgeText = "Most Popular", popularBadgeTextFontF = 'var(--font-family)', popularBadgeTextFontW = 'var(--font-weight)', popularBadgeTextFontS = '', // Table Headers featureHeader = "Features", featureHeaderFontF = 'var(--font-family-heading)', featureHeaderFontW = 'var(--font-weight-heading)', featureHeaderFontS = '', // Border Radius cardBorderRadius = 8, buttonBorderRadius = 4, badgeBorderRadius = 4, // Spacing cardPadding = 24, tableCellPadding = 16, // Show/Hide Popular Badge showPopularBadge = true, // Feature Row Labels durationLabel = "Duration", childrenLabel = "Children Included", babysittersLabel = "Babysitters", teepeesLabel = "Teepees/Cushions/Rugs/Toys", gamesLabel = "Games & Activities", playdohLabel = "Play-doh & Creative Fun", treasureLabel = "Treasure Hunt & Garden Games", ballpitLabel = "Ball Pit / Soft Play", setupLabel = "Setup/Pack-up & Travel", // Full Width fullWidth = true }) => { const [isMobile, setIsMobile] = useState(window.innerWidth < 768); useEffect(() => { const handleResize = () => { setIsMobile(window.innerWidth < 768); }; window.addEventListener('resize', handleResize); return () => window.removeEventListener('resize', handleResize); }, []); const handleButtonClick = (link, linkType, newTab) => { if (onLinkClick) { onLinkClick(link, linkType, newTab); } }; const Button = ({ text, textFontF, textFontW, textFontS, link, linkType, newTab }) => ( ); const PopularBadge = () => ( showPopularBadge && (

{popularBadgeText}

) ); const MobileView = () => (

{/* Basic Package Card */}

{basicName}

{basicDuration}

{basicChildren}
{basicBabysitters}
{basicTeepees}
{basicGames}
{basicPlaydoh}
{basicTreasure}
{basicBallpit}
{basicSetup}

{/* Standard Package Card */}

{standardName}

{standardDuration}

{standardChildren}
{standardBabysitters}
{standardTeepees}
{standardGames}
{standardPlaydoh}
{standardTreasure}
{standardBallpit}
{standardSetup}

{/* Premium Package Card */}

{premiumName}

{premiumDuration}

{premiumChildren}
{premiumBabysitters}
{premiumTeepees}
{premiumGames}
{premiumPlaydoh}
{premiumTreasure}
{premiumBallpit}
{premiumSetup}

); const DesktopView = () => (

{/* Duration Row */} {/* Children Row */} {/* Babysitters Row */} {/* Teepees Row */} {/* Games Row */} {/* Playdoh Row */} {/* Treasure Hunt Row */} {/* Ball Pit Row */} {/* Setup Row */}

{featureHeader}	{basicName}	{standardName}	{premiumName} {showPopularBadge && ( {popularBadgeText} )}
{durationLabel}	{basicDuration}	{standardDuration}	{premiumDuration}
{childrenLabel}	{basicChildren}	{standardChildren}	{premiumChildren}
{babysittersLabel}	{basicBabysitters}	{standardBabysitters}	{premiumBabysitters}
{teepeesLabel}	{basicTeepees}	{standardTeepees}	{premiumTeepees}
{gamesLabel}	{basicGames}	{standardGames}	{premiumGames}
{playdohLabel}	{basicPlaydoh}	{standardPlaydoh}	{premiumPlaydoh}
{treasureLabel}	{basicTreasure}	{standardTreasure}	{premiumTreasure}
{ballpitLabel}	{basicBallpit}	{standardBallpit}	{premiumBallpit}
{setupLabel}	{basicSetup}	{standardSetup}	{premiumSetup}

{/* Button Row */}

); return (

{title}

{isMobile ? : }

); };

Common questions