NavBar Icons Update

This commit is contained in:
2025-04-12 16:36:25 -04:00
parent 1957d3df5f
commit bd74288c4f
3 changed files with 143 additions and 136 deletions

View File

@@ -21,7 +21,7 @@ export default function RootLayout({
alt="Drink Happy Logo Image"
width={500}
height={500}
className="w-100 h-auto mx-auto w-1/2"
className="h-auto mx-auto w-1/2"
/>
{children}
{ isMobile && isSafari ? (

View File

@@ -20,29 +20,31 @@ export default function InfoPage() {
<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!
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>
<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!
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.
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>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">
@@ -54,22 +56,27 @@ export default function InfoPage() {
</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!
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
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.
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:
@@ -82,48 +89,53 @@ export default function InfoPage() {
</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!
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.
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!
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 youll earn more points with juice than most other drinks!
These drinks still count to the daily sugar intake but youll 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!
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.
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!
Unsweetened/regular milk or milk alternatives can allow you to gain
more points!
</p>
</div>

View File

@@ -3,8 +3,9 @@
import React from "react";
import { Navigation } from "@skeletonlabs/skeleton-react";
import {
Home as IconHome,
Folder as IconFolder,
Image as IconImage,
BookText as BookImage,
Music as IconMusic,
Video as IconVideo,
} from "lucide-react";
@@ -15,17 +16,11 @@ const Footer = () => {
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="Files" href="#/files" className="flex flex-col items-center">
<IconFolder />
<Navigation.Tile label="Home" href="/" className="flex flex-col items-center">
<IconHome />
</Navigation.Tile>
<Navigation.Tile label="Images" href="#/images" className="flex flex-col items-center">
<IconImage />
</Navigation.Tile>
<Navigation.Tile label="Music" href="#/music" className="flex flex-col items-center">
<IconMusic />
</Navigation.Tile>
<Navigation.Tile label="Videos" href="#/videos" className="flex flex-col items-center">
<IconVideo />
<Navigation.Tile label="Info" href="/info" className="flex flex-col items-center">
<BookImage />
</Navigation.Tile>
</Navigation.Bar>
</div>