Skip to content

Commit

Permalink
Merge pull request #29 from rice-apps/backbutton
Browse files Browse the repository at this point in the history 
Backbutton added for Donations page
  • Loading branch information
@KataTech
KataTech authored Mar 30, 2024
2 parents bb38997 + 32ab97c commit 05a9b89
Show file tree
Hide file tree
Showing 3 changed files with 98 additions and 65 deletions.
41 changes: 29 additions & 12 deletions src/app/donations/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import Donation from "./Donation"
import Link from "next/link"
import Logo from "../Logo"

const page = ({
params,
Expand All @@ -21,19 +23,34 @@ const page = ({
}
const dollarsRaised = parseFloat(amount)
return (
<div>
<div className="flex w-full justify-center flex-col mx-auto mb-5">
<a className="text-xl font-semibold text-center">{label}</a>
<a className="text-lg font-semibold text-center">
made possible last year
</a>
<a className="text-xl text-center">
Based on campaign results of{" "}
<span className="font-bold text-2xl">${dollarsRaised}</span>
</a>
<>
<div className="navbar bg-base-100 mt-2">
<div className="flex-1">
<Link className="btn btn-ghost normal-case text-xl" href="/">
{"<"}--
</Link>{" "}
</div>

<div className="navbar-end">
<div className="w-1/4">
<Logo />
</div>
</div>
</div>
<div>
<div className="flex w-full justify-center flex-col mx-auto mb-5">
<a className="text-xl font-semibold text-center">{label}</a>
<a className="text-lg font-semibold text-center">
made possible last year
</a>
<a className="text-xl text-center">
Based on campaign results of{" "}
<span className="font-bold text-2xl">${dollarsRaised}</span>
</a>
</div>
<Donation companyName={companyName} dollarsRaised={dollarsRaised} />
</div>
<Donation companyName={companyName} dollarsRaised={dollarsRaised} />
</div>
</>
)
}
export default page
1 change: 0 additions & 1 deletion src/app/layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@ export default function RootLayout({
return (
<html lang="en" data-theme="default">
<body className={inter.className}>
<NavBarComp />
<main>{children}</main>
</body>
</html>
Expand Down
121 changes: 69 additions & 52 deletions src/app/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
"use client"

import React, { useState, useEffect } from "react"
import Link from "next/link"
import Logo from "./Logo"

interface FormData {
companyName: string
Expand Down Expand Up @@ -63,71 +65,86 @@ const Home: React.FC = () => {
}, [warning])

return (
<div className="flex flex-row justify-center items-center w-full">
<div className="mx-auto w-full max-w-xl">
<p className="normal-case text-3xl text-center m-7 font-bold">
Calculate Your Impact
</p>
<div className="bg-gradient-to-br from-blue from-0% via-purple via-75% to-red to-100% rounded-2xl form-control w-full max-w-xl relative">
<button
onClick={toggleMode}
className="btn btn-outline m-5 w-2/12 absolute top-0 right-0"
>
{mode === "full" ? "Individual" : "Company"}
</button>
<form>
<div className="flex flex-col justify-center align-middle">
{mode === "full" && (
<>
<div className="navbar bg-base-100 mt-2">
<div className="flex-1">
<Link className="btn btn-ghost normal-case text-xl" href="/">
United Way Impact Calculator
</Link>{" "}
</div>

<div className="navbar-end">
<div className="w-1/4">
<Logo />
</div>
</div>
</div>
<div className="flex flex-row justify-center items-center w-full">
<div className="mx-auto w-full max-w-xl">
<p className="normal-case text-3xl text-center m-7 font-bold">
Calculate Your Impact
</p>
<div className="bg-gradient-to-br from-blue from-0% via-purple via-75% to-red to-100% rounded-2xl form-control w-full max-w-xl relative">
<button
onClick={toggleMode}
className="btn btn-outline m-5 w-2/12 absolute top-0 right-0"
>
{mode === "full" ? "Individual" : "Company"}
</button>
<form>
<div className="flex flex-col justify-center align-middle">
{mode === "full" && (
<div className="mt-6 w-full flex flex-col items-center">
<label
htmlFor="Company Name"
style={{ marginRight: "190px" }}
>
Company Name
</label>
<input
type="text"
id="companyname"
name="companyName"
value={formData.companyName}
onChange={handleInputChange}
placeholder="Enter your company name"
className="input input-bordered w-full bg-white bg-opacity-70 max-w-xs mt-3 rounded-full border-black text-black"
/>
</div>
)}
<div className="mt-6 w-full flex flex-col items-center">
<label
htmlFor="Company Name"
style={{ marginRight: "190px" }}
htmlFor="Donation Amount"
style={{ marginRight: "180px" }}
>
Company Name
Donation Amount
</label>
<input
type="text"
id="companyname"
name="companyName"
value={formData.companyName}
id="donationamt"
name="donationAmt"
value={formData.donationAmt}
onKeyPress={handleKeyPress}
onChange={handleInputChange}
placeholder="Enter your company name"
placeholder="Enter amount"
className="input input-bordered w-full bg-white bg-opacity-70 max-w-xs mt-3 rounded-full border-black text-black"
required
/>
<button
type="button"
onClick={handleCalculate}
className="btn btn-outline rounded-full mt-6 bg-yellow text-black hover:bg-orange"
>
Calculate
</button>
</div>
)}
<div className="mt-6 w-full flex flex-col items-center">
<label
htmlFor="Donation Amount"
style={{ marginRight: "180px" }}
>
Donation Amount
</label>
<input
type="text"
id="donationamt"
name="donationAmt"
value={formData.donationAmt}
onKeyPress={handleKeyPress}
onChange={handleInputChange}
placeholder="Enter amount"
className="input input-bordered w-full bg-white bg-opacity-70 max-w-xs mt-3 rounded-full border-black text-black"
required
/>
<button
type="button"
onClick={handleCalculate}
className="btn btn-outline rounded-full mt-6 bg-yellow text-black hover:bg-orange"
>
Calculate
</button>
</div>
</div>
</form>
<label className="label"></label>
</form>
<label className="label"></label>
</div>
</div>
</div>
</div>
</>
)
}

Expand Down

0 comments on commit 05a9b89

Please sign in to comment.