Guide Page Update
This commit is contained in:
151
src/app/(app)/guide/Info.tsx
Normal file
151
src/app/(app)/guide/Info.tsx
Normal file
@@ -0,0 +1,151 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
const InfoContent = () => {
|
||||
|
||||
return (
|
||||
<div className="px-6 py-10 max-w-full lg:max-w-1/2 mx-auto font-sans text-neutral-100">
|
||||
<h1 className="text-3xl dark:text-3xl font-bold mb-4">
|
||||
Beverage Consumption Info!
|
||||
</h1>
|
||||
<p className="mb-6 ">
|
||||
Learn what's best for your body and how to earn points and win! Making
|
||||
informed drink choices supports hydration, energy regulation, and
|
||||
overall health. Below are basic guidelines based on established public
|
||||
health recommendations.
|
||||
</p>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Water
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The recommended daily fluid intake is approximately 2.7 liters for
|
||||
women and 3.7 liters for men. This app suggest at least 100oz per
|
||||
day!
|
||||
</li>
|
||||
<li>Water contains no calories, sugar, or caffeine.</li>
|
||||
<li>Helps with focus, digestion, and temperature regulation.</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Carry a refillable water bottle to stay hydrated. Drinking water will
|
||||
earn you the most points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-success-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-200)]">
|
||||
Caffeine
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The maximum recommended daily caffeine intake for most healthy
|
||||
adults is 400 mg.
|
||||
</li>
|
||||
<li>
|
||||
Excessive caffeine consumption can cause elevated heart rate,
|
||||
insomnia, anxiety, and headaches.
|
||||
</li>
|
||||
<li>
|
||||
Caffeine content in common drinks:
|
||||
<ul className="list-disc pl-5 mt-1 space-y-1">
|
||||
<li> Celsius (can): 200–270 mg </li>
|
||||
<li> Brewed coffee (8 oz): ~95 mg</li>
|
||||
<li>Coca-Cola (12 oz): ~34 mg</li>
|
||||
<li>Bottle of Mountain Dew: 91-98 mg</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
Exceeding the 400 mg daily limit will result in no points awarded for
|
||||
additional caffeinated drinks that day!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Added Sugar Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The American Heart Association recommends limiting added sugar
|
||||
intake to 25 grams per day for women and 36 grams per day for men
|
||||
</li>
|
||||
<li>
|
||||
High sugar intake is associated with increased risk of obesity,
|
||||
diabetes, and heart disease!
|
||||
</li>
|
||||
<li>
|
||||
Added sugar is commonly found in sodas, energy drinks, sweetened
|
||||
teas, and flavored waters.
|
||||
</li>
|
||||
<li>
|
||||
Sugar content in common drinks:
|
||||
<ul className="list-disc pl-5 mt-1 space-y-1">
|
||||
<li> Monster Energy (16 oz): 54g </li>
|
||||
<li> Bottled sweet tea: 25–30g</li>
|
||||
<li>Vitaminwater (20 oz): 27g</li>
|
||||
<li>Coca-Cola (12 oz): 39g</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Surpassing the daily sugar limit will result in zero points awarded
|
||||
for any further drink entries for that day!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-success-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Juice and Flavored Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
100% fruit juice contains essential vitamins but also high amounts
|
||||
of natural sugar and lacks dietary fiber.
|
||||
</li>
|
||||
<li>
|
||||
Many flavored drinks marketed as “healthy” contain significant added
|
||||
sugar.
|
||||
</li>
|
||||
<li>
|
||||
Look for “unsweetened” or “no added sugar” labels to minimize sugar
|
||||
intake! Whole fruits are preferable over fruit juice!
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
These drinks still count to the daily sugar intake but you’ll earn
|
||||
more points with juice than most other drinks!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Milk and Milk Alternatives
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
Dairy and fortified plant-based milks (such as almond, soy, or oat)
|
||||
provide calcium, vitamin D, and protein!
|
||||
</li>
|
||||
<li>Choose unsweetened, low-fat, or fat-free options!</li>
|
||||
<li>
|
||||
Flavored varieties (ex. chocolate or vanilla) often contain added
|
||||
sugars and should be consumed in moderation.
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Unsweetened/regular milk or milk alternatives can allow you to gain
|
||||
more points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="h-6" />
|
||||
<div className="h-6" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default InfoContent;
|
||||
@@ -1,5 +1,7 @@
|
||||
"use client";
|
||||
|
||||
import React from "react";
|
||||
|
||||
const tableData = [
|
||||
{
|
||||
drink: "Water",
|
||||
@@ -51,7 +53,8 @@ const tableData = [
|
||||
},
|
||||
];
|
||||
|
||||
export default function PointsGuidePage() {
|
||||
const PointGuide = () => {
|
||||
|
||||
return (
|
||||
<div className="px-6 py-10 max-w-full lg:max-w-3/4 mx-auto font-sans text-neutral-100">
|
||||
<h1 className="text-2xl sm:text-3xl font-bold mb-4 text-white">
|
||||
@@ -111,4 +114,6 @@ export default function PointsGuidePage() {
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export default PointGuide;
|
||||
41
src/app/(app)/guide/page.tsx
Normal file
41
src/app/(app)/guide/page.tsx
Normal file
@@ -0,0 +1,41 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import InfoContent from "./Info";
|
||||
import PointGuide from "./PointGuide";
|
||||
|
||||
export default function InfoPage() {
|
||||
const [activeComponent, setActiveComponent] = useState<"info" | "points">("info");
|
||||
|
||||
return (
|
||||
<div className="px-6 py-10 max-w-full lg:max-w-3/4 mx-auto font-sans text-neutral-100">
|
||||
<div className="flex justify-center gap-4 mb-6">
|
||||
<button
|
||||
className={`px-4 py-2 rounded ${
|
||||
activeComponent === "info"
|
||||
? "bg-primary-500 text-white"
|
||||
: "bg-secondary-700 text-gray-300"
|
||||
}`}
|
||||
onClick={() => setActiveComponent("info")}
|
||||
>
|
||||
Info Content
|
||||
</button>
|
||||
<button
|
||||
className={`px-4 py-2 rounded ${
|
||||
activeComponent === "points"
|
||||
? "bg-primary-500 text-white"
|
||||
: "bg-secondary-700 text-gray-300"
|
||||
}`}
|
||||
onClick={() => setActiveComponent("points")}
|
||||
>
|
||||
Point Guide
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
{activeComponent === "info" && <InfoContent />}
|
||||
{activeComponent === "points" && <PointGuide />}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
"use client";
|
||||
|
||||
export default function InfoPage() {
|
||||
return (
|
||||
<div className="px-6 py-10 max-w-full lg:max-w-1/2 mx-auto font-sans text-neutral-100">
|
||||
<h1 className="text-3xl dark:text-3xl font-bold mb-4">
|
||||
Beverage Consumption Info!
|
||||
</h1>
|
||||
<p className="mb-6 ">
|
||||
Learn what's best for your body and how to earn points and win! Making
|
||||
informed drink choices supports hydration, energy regulation, and
|
||||
overall health. Below are basic guidelines based on established public
|
||||
health recommendations.
|
||||
</p>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Water
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The recommended daily fluid intake is approximately 2.7 liters for
|
||||
women and 3.7 liters for men. This app suggest at least 100oz per
|
||||
day!
|
||||
</li>
|
||||
<li>Water contains no calories, sugar, or caffeine.</li>
|
||||
<li>Helps with focus, digestion, and temperature regulation.</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Carry a refillable water bottle to stay hydrated. Drinking water will
|
||||
earn you the most points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-success-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-200)]">
|
||||
Caffeine
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The maximum recommended daily caffeine intake for most healthy
|
||||
adults is 400 mg.
|
||||
</li>
|
||||
<li>
|
||||
Excessive caffeine consumption can cause elevated heart rate,
|
||||
insomnia, anxiety, and headaches.
|
||||
</li>
|
||||
<li>
|
||||
Caffeine content in common drinks:
|
||||
<ul className="list-disc pl-5 mt-1 space-y-1">
|
||||
<li> Celsius (can): 200–270 mg </li>
|
||||
<li> Brewed coffee (8 oz): ~95 mg</li>
|
||||
<li>Coca-Cola (12 oz): ~34 mg</li>
|
||||
<li>Bottle of Mountain Dew: 91-98 mg</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
Exceeding the 400 mg daily limit will result in no points awarded for
|
||||
additional caffeinated drinks that day!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Added Sugar Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
The American Heart Association recommends limiting added sugar
|
||||
intake to 25 grams per day for women and 36 grams per day for men
|
||||
</li>
|
||||
<li>
|
||||
High sugar intake is associated with increased risk of obesity,
|
||||
diabetes, and heart disease!
|
||||
</li>
|
||||
<li>
|
||||
Added sugar is commonly found in sodas, energy drinks, sweetened
|
||||
teas, and flavored waters.
|
||||
</li>
|
||||
<li>
|
||||
Sugar content in common drinks:
|
||||
<ul className="list-disc pl-5 mt-1 space-y-1">
|
||||
<li> Monster Energy (16 oz): 54g </li>
|
||||
<li> Bottled sweet tea: 25–30g</li>
|
||||
<li>Vitaminwater (20 oz): 27g</li>
|
||||
<li>Coca-Cola (12 oz): 39g</li>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Surpassing the daily sugar limit will result in zero points awarded
|
||||
for any further drink entries for that day!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-success-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Juice and Flavored Drinks
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
100% fruit juice contains essential vitamins but also high amounts
|
||||
of natural sugar and lacks dietary fiber.
|
||||
</li>
|
||||
<li>
|
||||
Many flavored drinks marketed as “healthy” contain significant added
|
||||
sugar.
|
||||
</li>
|
||||
<li>
|
||||
Look for “unsweetened” or “no added sugar” labels to minimize sugar
|
||||
intake! Whole fruits are preferable over fruit juice!
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-700)] mt-1">
|
||||
These drinks still count to the daily sugar intake but you’ll earn
|
||||
more points with juice than most other drinks!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="bg-[color:var(--color-surface-600)] rounded-xl px-6 py-5 my-6 shadow-sm">
|
||||
<h2 className="text-2xl font-semibold mt-0 mb-2 text-[color:var(--color-warning-300)]">
|
||||
Milk and Milk Alternatives
|
||||
</h2>
|
||||
<ul className="list-disc pl-5 text-neutral-200 space-y-1">
|
||||
<li>
|
||||
Dairy and fortified plant-based milks (such as almond, soy, or oat)
|
||||
provide calcium, vitamin D, and protein!
|
||||
</li>
|
||||
<li>Choose unsweetened, low-fat, or fat-free options!</li>
|
||||
<li>
|
||||
Flavored varieties (ex. chocolate or vanilla) often contain added
|
||||
sugars and should be consumed in moderation.
|
||||
</li>
|
||||
</ul>
|
||||
<p className="font-semibold italic text-[color:var(--color-surface-300)] mt-1">
|
||||
Unsweetened/regular milk or milk alternatives can allow you to gain
|
||||
more points!
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="h-6" />
|
||||
<div className="h-6" />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -18,17 +18,14 @@ const MobileNav = () => {
|
||||
return (
|
||||
<div className="p-4 flex flex-col items-center gap-4 bg-surface-900">
|
||||
<Navigation.Bar className="flex justify-around w-full">
|
||||
<Navigation.Tile label="Home" href="/" className="flex flex-col items-center">
|
||||
<Navigation.Tile href="/" className="flex flex-col items-center">
|
||||
<IconHome />
|
||||
</Navigation.Tile>
|
||||
<Navigation.Tile label="Info" href="/info" className="flex flex-col items-center">
|
||||
<Navigation.Tile href="/guide" className="flex flex-col items-center">
|
||||
<BookImage />
|
||||
</Navigation.Tile>
|
||||
<Navigation.Tile label="Points Guide" href="/pointsguide" className="flex flex-col items-center">
|
||||
<CoinsImage />
|
||||
</Navigation.Tile>
|
||||
{isAuthenticated ? (
|
||||
<Navigation.Tile label="Profile" href="/profile" className="flex flex-col items-center">
|
||||
<Navigation.Tile href="/profile" className="flex flex-col items-center">
|
||||
<UserImage />
|
||||
</Navigation.Tile>
|
||||
) : null}
|
||||
|
||||
@@ -26,11 +26,8 @@ const NavBar = () => {
|
||||
</a>
|
||||
</h1>
|
||||
<div className="hidden md:flex items-center gap-4 justify-center">
|
||||
<a href="/info" className="btn variant-ghost">
|
||||
Info
|
||||
</a>
|
||||
<a href="/pointsguide" className="btn variant-ghost">
|
||||
Points Guide
|
||||
<a href="/guide" className="btn variant-ghost">
|
||||
Guide
|
||||
</a>
|
||||
</div>
|
||||
<div className="justify-self-end">
|
||||
|
||||
Reference in New Issue
Block a user