Merge pull request #74 from TheYuriG/dev

feat: created a retirement calculator

components/UI/AccentButton.tsx

@@ -11,7 +11,6 @@ interface AccentButtonProperties {
 }
 
 //? Simple button that uses accent color for fill and neutral neutral for text color and border
-//! Requires importing accent-button.css!
 //* Style buttons on-demand by providing a optional style prop!
 export function AccentButton({
   children,

components/UI/ErrorAlert.tsx

@@ -1,17 +1,20 @@
+//? Define expected and optional properties for this component
 interface ErrorAlertProperties {
+  classes?: string;
   errorText: string;
 }
 
-//? Exports a component as wide as possible with a custom error message passed with 'errorText'
-export function ErrorAlert({ errorText }: ErrorAlertProperties) {
+//? Exports a component as wide as possible with a custom error message
+export function ErrorAlert({ errorText, classes = "" }: ErrorAlertProperties) {
   return (
     <div
-      class="flex items-center w-full py-2 px-2 shadow-lg space-x-2 rounded-xl"
+      class={"flex items-center w-full py-2 px-2 shadow-lg space-x-2 rounded-xl " +
+        classes}
       style="background-color: rgb(255, 87, 87); color: rgb(50, 24, 22);"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
-        class="h-8 w-8"
+        class="h-8 w-8 flex-shrink-0"
         fill="none"
         stroke="rgb(50, 24, 22)"
         viewBox="0 0 24 24"

components/UI/StyledHeader.tsx

@@ -0,0 +1,8 @@
+//? Export a header that contains all common classes for easy styling
+export function StyledHeader({ title }: { title: string }) {
+  return (
+    <h1 class="custom-underline-thick custom-font-scale-largest f-as my-4 text-center">
+      {title}
+    </h1>
+  );
+}

components/UI/StyledInput.tsx

@@ -1,5 +1,6 @@
 //? Validation values for typecasting
 import { InformationIcon } from "../../assets/InformationIcon.tsx";
+//? Toggle what validation status this form should display
 import { validationStatus } from "../../types/misc/validationStatus.ts";
 
 //? Define optional and required properties for inputs
@@ -8,33 +9,29 @@ interface StyledInputProperties {
   label: string;
   //? Key that helps Preact to track this input on the DOM
   key: string;
-  //? Whether this input is a file, image, text, number or anything else
+  //? Whether this input's format should be a date, number or other string
   //! Reference: https://www.w3schools.com/tags/tag_input.asp
-  inputType: string;
+  inputType: "text" | "number" | "date";
   //? Tracks the validation reference state for this input
   validationReference: validationStatus;
   //? Input name, helps Screenreaders to connect label+input
   name: string;
   //? Placeholder text to display on input, if relevant
   placeholder?: string;
-  //? If this field should have automatic focus on page load
-  autoFocus?: boolean;
   //? Initial/current value for this input
   value: string;
   //? Function that updates the input state when typing in the input field
   inputFunction: (input: string) => void;
   //? String to be turned into a RegExp. Don't enclose with forward slashes (/)!
   validationFunction: (input: string | number) => validationStatus;
-  //? Mininum and maximum values for numerical inputs
+  //? Minimum and maximum values for numerical or date (as string) inputs
   min?: number | string;
   max?: number | string;
   //? Optional string to be used on the optional help Information icon
   helpInformation?: string;
 }
 
 //? Exports a styled combo of label + input
-//! Requires form.css! Will organize in column on smaller
-//! resolutions and as row on larger resolutions
 export function StyledInput(
   {
     label,
@@ -43,7 +40,6 @@ export function StyledInput(
     validationReference,
     name,
     placeholder,
-    autoFocus,
     value,
     inputFunction,
     validationFunction,
@@ -78,8 +74,6 @@ export function StyledInput(
             name={name}
             //? Placeholder value, if provided
             placeholder={placeholder}
-            //? If this
-            autofocus={autoFocus}
             //? Initial value for the input, mostly used by the number input
             //! Gets updated by onInput()
             value={value}

components/UI/StyledSubHeader.tsx

@@ -0,0 +1,8 @@
+//? Export a subheader that contains all common classes for easy styling and is slightly smaller than Header
+export function StyledSubHeader({ title }: { title: string }) {
+  return (
+    <h1 class="custom-underline-thick custom-font-scale-large f-as my-4 text-center">
+      {title}
+    </h1>
+  );
+}

components/base/Footer.tsx

@@ -1,5 +1,4 @@
 //? This exports the footer that is located on the bottom right corner
-//? of the Home page. All related CSS is in the file.css file
 export function Footer() {
   const footerImage = "mx-2 w-4 h-4";
   return (

components/blog/BlogPostSummary.tsx

@@ -1,5 +1,7 @@
 //? Require the interface to ensure we receive the proper data
 import BlogPostSummaryProperties from "../../types/BlogPostSummaryProperties.ts";
+//? Default styled header
+import { StyledSubHeader } from "../../components/UI/StyledSubHeader.tsx";
 
 //? Exports a single Blog Post Summary
 export function BlogPostSummary(summary: BlogPostSummaryProperties) {
@@ -9,9 +11,7 @@ export function BlogPostSummary(summary: BlogPostSummaryProperties) {
       {/* Post link */}
       <a href={"/blog" + summary.link}>
         {/* Centered heading */}
-        <h2 class="custom-underline-thick f-as my-4 text-center">
-          {summary.title}
-        </h2>
+        <StyledSubHeader title={summary.title} />
       </a>
       {/* Post creation date */}
       <p class="text-sm mb-2 text-center">

components/expenses-tracker/ExpensesChart.tsx

@@ -1,3 +1,5 @@
+//? Default styled header
+import { StyledSubHeader } from "../../components/UI/StyledSubHeader.tsx";
 //? Import individual MonthBar components to render all 12 months
 import { ExpensesChartMonthBar } from "./ExpensesChartMonthBar.tsx";
 //? Import the Expense type for casting
@@ -45,7 +47,7 @@ export function ExpenseChart(
 
   return (
     <>
-      <h2 class="text-3xl my-2 f-as">{year}'s Expenses</h2>
+      <StyledSubHeader title={year + "'s Expenses"} />
       <div class="w-full flex flex-wrap">
         {monthExpenses.map((monthData) => (
           <ExpensesChartMonthBar

components/food-order/CartModal.tsx

@@ -1,3 +1,5 @@
+//? Default styled header
+import { StyledSubHeader } from "../../components/UI/StyledSubHeader.tsx";
 //? Import the StyledButton to close the modal on empty carts or
 //? confirm orders on a filled cart
 import { MinusIcon } from "../../assets/MinusIcon.tsx";
@@ -53,9 +55,7 @@ export default function CartModal({
   return (
     <div class="flex flex-col p-3 w-fit max-w-[90dvw] max-h-[90dvh]">
       {/* Modal header */}
-      <h2 class="text-bold my-2 min-w-max text-center text-3xl f-as">
-        Cart items
-      </h2>
+      <StyledSubHeader title="Cart items" />
       {/* List of items in cart */}
       <ol class="overflow-auto styled-scrollbar">
         {cartItems.map(([foodName, { quantity, cost }]) => (
@@ -123,13 +123,7 @@ export default function CartModal({
               </span>
             </div>
             {/* Divider */}
-            <hr
-              class="my-2 border-solid border"
-              //? Must style border color invidually instead of using the 'custom-bo-nc' class
-              //? because the base.css will override the twind class and make
-              //? the border thicker
-              style="border-color: var(--neutral-color)"
-            />
+            <hr class="my-2 custom-bo-nc border" />
           </li>
         ))}
       </ol>

components/home/NavigationMenu.tsx

@@ -6,47 +6,47 @@ export function NavigationMenu() {
     >
       <a
         href="/work"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 1"
         title="Things I've done for money"
       >
         Work
       </a>
       <a
         href="/projects"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 1.5;"
         title="Things I've created to learn a tech stack"
       >
         Projects
       </a>
       <a
         href="/certificates"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 2;"
         title="Cerfications I've got from completing various courses"
       >
         Certificates
       </a>
       <a
         href="/toys"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 2;"
         title="Curiosity projects"
       >
         Toys
       </a>
       <a
         href="/blog"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 1.5;"
         title="Development findings shared over the years"
       >
         Blog
       </a>
       <a
         href="/me"
-        class="custom-underline-thick animate-slide-right delay-slide-right"
+        class="custom-underline-thick custom-font-scale-largest animate-slide-right delay-slide-right"
         style="--dur: 1;"
         title="Who is Yuri?"
       >

components/projects/ProjectsGrid.tsx

@@ -4,22 +4,37 @@ import { ProjectDisplay } from "./ProjectDisplay.tsx";
 import type { ProjectDisplayProperties } from "../../types/ProjectDisplayProperties.ts";
 
 //? Array of projects to be rendered and displayed
-const projects: ProjectDisplayProperties[] = [{
-  projectLink: "/projects/expenses-tracker",
-  projectTitle:
-    "Expenses tracker that allow filtering by year and provides simple bar charts for each month's totals",
-  projectImageLink:
-    "https://cdn.discordapp.com/attachments/576538316296421399/1120271217954406420/image.png",
-  projectName: "Expenses tracker",
-}, {
-  projectLink: "/projects/food-order",
-  projectTitle:
-    "Mock of a food order app. Comes with a built-in cart system that allows the user to manage their items",
-  projectImageLink:
-    "https://media.discordapp.net/attachments/576538316296421399/1120279085952794634/image.png",
-  projectName: "Food order",
-}];
+const projects: ProjectDisplayProperties[] = [
+  //* Expenses tracker
+  {
+    projectLink: "/projects/expenses-tracker",
+    projectTitle:
+      "Expenses tracker that allow filtering by year and provides simple bar charts for each month's totals",
+    projectImageLink:
+      "https://cdn.discordapp.com/attachments/576538316296421399/1120271217954406420/image.png",
+    projectName: "Expenses tracker",
+  },
+  //* Food order
+  {
+    projectLink: "/projects/food-order",
+    projectTitle:
+      "Mock of a food order app. Comes with a built-in cart system that allows the user to manage their items",
+    projectImageLink:
+      "https://media.discordapp.net/attachments/576538316296421399/1120279085952794634/image.png",
+    projectName: "Food order",
+  },
+  //* Retirement calculator
+  {
+    projectLink: "/projects/retirement-calculator",
+    projectTitle:
+      "Calculate how much more time/money you need to invest until you are able to FIRE retire and live from your returns forever",
+    projectImageLink:
+      "https://media.discordapp.net/attachments/576538316296421399/1121945060561387542/image.png",
+    projectName: "Retirement calculator",
+  },
+];
 
+//
 //? Creates a column grid of projects created
 export function ProjectsGrid() {
   return (