All solutions

I had some trouble with importing fonts into Tailwind. My paths to the font files are relative and when I ctrl + click them it leads me to the file in VS Code. The import statements for the fonts in globals.css are as follows:

@layer base {
  @font-face {
    font-family: WorkSans;
    font-weight: 400;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf"); 
  } 
  @font-face {
    font-family: WorkSans;
    font-weight: 400;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 600;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 600;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 700;
    src: url('/public/static/fonts/WorkSans-VariableFont_wght.ttf') format("ttf");
  }
  @font-face {
    font-family: WorkSans;
    font-weight: 700;
    font-style: italic;
    src: url('/public/static/fonts/WorkSans-Italic-VariableFont_wght.ttf') format("ttf");
  }
}

Additionally, I found that Tailwind would only animate the accordion expanding if I explicitly defined the height of the container (h-0 to h-32 works, but h-0 to h-auto didn't). However, this means the container for the answer text will either be too small or too large depending on the screen size/amount of text. Is there a way to animate from h-0 to h-auto with Tailwind, or would the best solution be to animate the expanding and collapsing from scratch?

I struggled with getting the calculated age to be consistent across different lengths of time. The approach I took was to:

1. Fetch the current time as a millisecond time stamp
2. Convert the user inputted date to a millisecond time stamp
3. Find the difference between the two time stamps
4. Convert that difference into a number of years by dividing by the average number of milliseconds in a year
5. Convert the remainder after calculating years into months by dividing by the average number of milliseconds in a month
6. Convert the remainder after calculating months into days by dividing by the number of milliseconds in a day
7. Use Math.floor() to round years, months and days down

The code for the calculation is as follows:

 function timestampToYMD(timestampDiff) {
        // calculated age is not accurate, try converting from ms to days first, then to months and years?
        const MsInADay = (1000 * 60 * 60 * 24)
        const NumOfLeapYears = (1000/4) - 7;
        const ExactMonthLength = 
        // Average length of a month, accounting for leap years using the number of leap years between 1000 and 2000
        (((1000 - ((1000/4) - 7)) * ((31 + 28 + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + 31) / 12) //average month length in a normal year
        + 
        (((1000/4) - 7) * (31 + 29 + 31 + 30 + 31 + 30 + 31 + 31 + 30 + 31 + 30 + 31) / 12) ) //average month length in a leap year
         / 1000 /* averaging out the normal year month length and leap year month length over the span of 1000 years */);
        const MsInAYear = (
            // taking years of 1001 to 2000
            /* LEAP YEAR RULES: 
                Divisible by 4
                For centuries, those divisible by 400
            */
            (365 + (NumOfLeapYears/ 999)) * MsInADay
        );
        // 31_557_016_216.21622
        let numOfYears = timestampDiff / MsInAYear;
        let numOfMonths = ((timestampDiff % MsInAYear) / (MsInADay * ExactMonthLength));
        let numOfDays = ((timestampDiff % MsInAYear) % (ExactMonthLength * MsInADay) / MsInADay);

        
        document.querySelector("#num-of-years").innerHTML = Math.floor(numOfYears);
        document.querySelector("#num-of-months").innerHTML = Math.floor(numOfMonths);
        document.querySelector("#num-of-days").innerHTML = Math.floor(numOfDays);
    }

This approach has a margin of error of a few days, so I'm wondering if there is a better approach to make the calculation more accurate. Would it be better to actually find the distance in days between two calendar dates than to calculate it using milliseconds?

One thing I wasn't able to get working was making the bordering countries on the Country Details page render with their common name instead of their 3 letter country code. For this to work without the page asking the API for every country at once, I imagine the page would need to make another API request after pulling information for the main country, but I couldn't manage to get it to work.

Is the way I handled adding a dark mode toggle the best way? I wrapped the Header component and the contents of the page in a container and used a boolean state to handle if dark mode is toggled on or not.

I struggled a lot with handling the SVG images in this challenge, both getting them to overlap properly with other elements and also trying to keep them from deforming in a way that could be reused in the component I made for the time tracking cards. I did end up solving the overlap problem by giving the SVG z-index: -1 and the background element z-index: -10.

I also managed to get both the mobile and desktop views to look passable, but I had trouble making everything in between look alright. The way the breakpoints are setup are still pretty rough, so I might go back and adjust those later.

Is <Image /> the best way to handle SVGs in Next.js at the moment? When I was looking for solutions to my problems I read that some people gave up on using it, but I also saw that it was overhauled recently, so maybe the problems it had initially have been addressed.

What is best practice in regards to making varying styles for a single component, such as the cards for the different time categories in this project (Work, Play, etc.)? For this project I created an object to store the styles (classes for Tailwind to handle) and accessed them based on properties passed down to the component, but I'm not sure if this approach is ideal.

Thanks for checking out my solution!

What would the appropriate semantic HTML be for the main container of the component? I'd imagine it would be something like an aside.