wind-explorer/ecoconnect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Modified HBForm & HBContest Page

Browse Source
This commit is contained in:
ZacTohZY
2024-07-29 21:26:34 +08:00
parent 34a96a8445
commit a76ec634ca
6 changed files with 203 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

103
client/src/pages/HBContestPage.tsx
View File

@@ -1,64 +1,65 @@
import {
Card,
CardHeader,
CardBody,
CardFooter,
Divider,
Button,
} from "@nextui-org/react";
import { Button } from "@nextui-org/react";
import { useNavigate } from "react-router-dom";
export default function HBContestPage() {
const navigate = useNavigate();
const handleJoinClick = () => {
let accessToken = localStorage.getItem("accessToken");
if (!accessToken) {
setTimeout(() => {
navigate("/signin");
}, 1000);
} else {
navigate("new-submission");
}
};
return (
<div className="w-full h-full">
<section>
<Card className="max-w-[800px] bg-red-50 mx-auto">
<CardHeader className="flex gap-3">
<div className="flex flex-col">
<h2 className="text-md">Home Bill Contest</h2>
</div>
</CardHeader>
<Divider />
<CardBody>
<p>
<div className="h-screen flex items-center justify-center">
<section className="bg-red-50 dark:bg-primary-950 border border-primary-100 p-10 rounded-xl shadow-md w-full max-w-2xl">
<div className="space-y-4">
<div>
<p className="text-2xl font-bold text-red-900 dark:text-white">
Home Bill Contest
</p>
</div>
<div>
<p className="text-gray-700 dark:text-gray-300">
This contest is to encourage residents to reduce the use of
electricity and water usage. This contest would be won by the
person with the lowest overall bill average. Join us in this
important effort to create a more sustainable future for everyone.
Participants would be required to input and upload their bills
into the form to ensure integrity and honesty.{" "}
important effort to create a more sustainable future for everyone.{" "}
<span className="text-red-600">
Participants would be required to input and upload their bills into the form to ensure integrity and honesty.{" "}
</span>
</p>
</CardBody>
<Divider />
<CardFooter>
<div className="flex-col">
<div>
<h4>Winners</h4>
<p>
There will 3 winners for each month. Each winner will receive
random food vouchers.
</p>
<p>1st: 3 vouchers</p>
<p>2nd: 2 vouchers</p>
<p>3rd: 1 voucher</p>
</div>
<div>
<Button
className=" bg-red-500 dark:bg-red-700 text-white"
size="lg"
onPress={() => {
navigate("new-submission");
}}
>
<p className="font-bold">Join</p>
</Button>
</div>
</div>
</CardFooter>
</Card>
</div>
<div>
<p className="text-xl font-bold text-red-900 dark:text-white">
Winners
</p>
</div>
<div>
<p className="text-gray-700 dark:text-gray-300">
There will 3 winners for each month. Each winner will receive
random food vouchers.
</p>
<p className="text-gray-700 dark:text-gray-300">1st &rarr; 3 vouchers</p>
<p className="text-gray-700 dark:text-gray-300">2nd &rarr; 2 vouchers</p>
<p className="text-gray-700 dark:text-gray-300">3rd &rarr; 1 voucher</p>
</div>
<div>
<Button
className="bg-red-300 text-white hover:bg-red-600 focus:ring-red-400 dark:bg-red-600 dark:hover:bg-red-900 dark:focus:ring-red-700 w-100"
size="lg"
onPress={handleJoinClick}
>
<p>Join</p>
</Button>
</div>
</div>
</section>
</div>
);
}
}