Hackathons/HooHacks-12
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Button Styles

Browse Source
This commit is contained in:
GamerBoss101
2025-03-29 18:43:55 -04:00
parent 77fb8bf350
commit ccbbfa8ec2
1 changed files with 41 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
React/src/app/page.tsx
View File

@@ -12,22 +12,43 @@ export default async function Home() {
// If no session, show sign-up and login buttons // If no session, show sign-up and login buttons
if (!session) { if (!session) {
return ( return (
<div className=" items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]"> <div className=" items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-row gap-[32px] row-start-2 items-center sm:items-start"> <main className="flex flex-row gap-4 row-start-2 items-center sm:items-start">
<button type="button" className="btn preset-filled">
<a href="/auth/login?screen_hint=signup"> <a href="/auth/login?screen_hint=signup">
<button>Sign up</button> <span>Sign Up</span>
</a> </a>
</button>
<button type="button" className="btn preset-filled">
<a href="/auth/login"> <a href="/auth/login">
<button>Log in</button> <span>Log In</span>
<span>&rarr;</span>
</a> </a>
</button>
</main> </main>
</div>
);
}
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<h1>Welcome, {session.user.name}!</h1>
<h1>fauxcall</h1> <h1>fauxcall</h1>
<h2>set emergency contacts</h2> <h2>set emergency contacts</h2>
<p>if you stop speaking or say the codeword, these contacts will be notified</p> <p>
if you stop speaking or say the codeword, these contacts will be
notified
</p>
{/* form for setting codeword */} {/* form for setting codeword */}
<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}> <form
className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
onSubmit={(e) => e.preventDefault()}
>
<input <input
type="text" type="text"
value={codeword} value={codeword}
@@ -37,10 +58,16 @@ export default async function Home() {
/> />
<button <button
className="bg-blue-500 text-white rounded-md p-2" className="bg-blue-500 text-white rounded-md p-2"
type="submit">Set codeword</button> type="submit"
>
Set codeword
</button>
</form> </form>
{/* form for adding contacts */} {/* form for adding contacts */}
<form className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start" onSubmit={(e) => e.preventDefault()}> <form
className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start"
onSubmit={(e) => e.preventDefault()}
>
<input <input
type="text" type="text"
value={contacts} value={contacts}
@@ -50,19 +77,7 @@ export default async function Home() {
/> />
<button type="submit">Set contacts</button> <button type="submit">Set contacts</button>
</form> </form>
</div>
);
}
return (
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
<h1>Welcome, {session.user.name}!</h1>
<p>
<a href="/auth/logout">
<button>Log out</button>
</a>
</p>
</main> </main>
</div> </div>
); );