Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update count down tier backgrond and mobile styling #89

Merged
merged 3 commits into from
Sep 19, 2024
Merged

update count down tier backgrond and mobile styling #89

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
8317168
update page.tsx, CountdownComponent.tsx and ParticleComponent.tsx
mitch1009 Sep 19, 2024
66fd6a2
update page.tsx
mitch1009 Sep 19, 2024
2511d7a
Merge branch 'publish' into main
mitch1009 Sep 19, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions components/src/app/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import React from "react";
import { MainLandingPage } from '../components/'
import { CountdownComponent } from '../components/'

export default function Home() {
return (
<div className="">
<MainLandingPage session={null} />
<CountdownComponent url='/api/auth/signin' targetDate={'2024-09-26T12:00:00'} />
</div>

);
Expand Down
28 changes: 14 additions & 14 deletions components/src/components/CountDown/CountdownComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@
}, 1000);

return () => clearInterval(timer);
}, [targetDate, isClient]);

Check warning on line 36 in components/src/components/CountDown/CountdownComponent.tsx

View workflow job for this annotation

GitHub Actions / Validate Code Base 

React Hook useEffect has a missing dependency: 'calculateTimeLeft'. Either include it or remove the dependency array

const timeComponents = Object.keys(timeLeft).map((interval) => {
if (!timeLeft[interval]) {
Expand All @@ -41,24 +41,29 @@
}

return (
<div key={interval} className="flex flex-col items-center p-4 bg-white bg-opacity-20 rounded-lg backdrop-blur-md">
<span className="text-4xl font-bold text-white mb-2 sm:text-2xl">{timeLeft[interval]}</span>
<span className="text-lg text-white uppercase sm:text-base">{interval}</span>
<div key={interval} className="flex px-3 flex-col items-center p-4 bg-white bg-opacity-20 rounded-lg backdrop-blur-md">
<span className="text-3xl font-bold text-white mb-2 sm:text-2xl 2xl:text-5xl">{timeLeft[interval]}</span>
<span className="text-sm text-white uppercase sm:text-base 2xl:text-lg">{interval}</span>
</div>
);
});

return (
<div className="relative min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-br from-blue-900 via-purple-800 to-pink-700 text-white overflow-hidden">
<div className="relative px-4 min-h-screen w-full flex flex-col items-center justify-center bg-gradient-to-br from-blue-900 via-purple-800 to-pink-700 text-white overflow-hidden">
<AnimatedBackground />
<div className="z-10 text-center mb-8">
<h1 className="text-4xl font-bold mb-4 sm:text-2xl">Unity in Diversity: A Cultural Celebration Game</h1>
<div className="z-10 text-center px-4 mx-3 mb-8">
<h1 className="text-3xl font-bold mb-4 sm:text-3xl pt-4 sm:pt-0 2xl:text-5xl">Unity in Diversity: A Cultural Celebration Game</h1>
<p className="text-xl mb-4 sm:text-lg">Countdown to Heritage Day Celebration</p>
<div className="flex space-x-4 justify-center sm:space-x-2">
{isClient ? (timeComponents.length ? timeComponents : <span className="text-4xl sm:text-2xl">The event has started!</span>) : <span className="text-4xl sm:text-2xl">Loading...</span>}
{isClient ? (timeComponents.length ? timeComponents : <span className="text-xl sm:text-2xl 2xl:text-5xl">The Game has started!</span>) : <span className="text-4xl sm:text-2xl 2xl:text-5xl">Loading...</span>}
</div>
</div>
<div className="z-10 mt-3 text-center">
<p className="text-lg sm:text-base">Register by 23 September 2024 to secure your spot!</p>
<div className="py-3 my-4">
<RegisterAction url={url} />
</div>
</div>

<div className="z-10 bg-white bg-opacity-10 p-6 rounded-lg backdrop-blur-md max-w-2xl sm:max-w-2xl sm:p-4">
<h2 className="text-2xl font-bold mb-4 sm:text-xl">How to Play the Game</h2>
<ul className="space-y-4 sm:space-y-2">
Expand All @@ -77,12 +82,7 @@
</ul>
</div>

<div className="z-10 mt-8 text-center">
<p className="text-lg sm:text-base">Register by 23 September 2024 to secure your spot!</p>
<div className="py-3">
<RegisterAction url={url} />
</div>
</div>

</div>
);
};
2 changes: 1 addition & 1 deletion components/src/components/CountDown/ParticleComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export const ParticleComponent: React.FC<ParticleProps> = ({ count }) => {
return <div className="absolute inset-0 bg-gray-900" />;
}

return <canvas ref={canvasRef} className="absolute inset-0 bg-gray-900" />;
return <canvas ref={canvasRef} className="absolute min-h-screen inset-0 bg-opacity-50 bg-gray-900" />;
};

export default ParticleComponent;
Loading