feat: add daily forecasts

src/components/HomePage/index.tsx

@@ -12,6 +12,8 @@ import { useSelector } from "react-redux";
 import { getCategoryIdByZodiacSign, getZodiacSignByDate } from "@/services/zodiac-sign";
 import { selectors } from "@/store";
 import { getRandomArbitrary } from "@/services/random-value";
+import Title from "../Title";
+import { UserDailyForecast } from "@/api/resources/UserDailyForecasts";
 
 const buttonTextFormatter = (text: string): JSX.Element => {
   const sentences = text.split(".");
@@ -71,6 +73,16 @@ function HomePage(): JSX.Element {
     // isPending
   } = useApiCall<UserAura>(auraData);
 
+  const dailyForecastData = useCallback(async () => {
+    const { user_daily_forecast } = await api.getDailyForecasts({ token });
+    return user_daily_forecast;
+  }, [api, token])
+
+  const {
+    data: dailyForecast,
+    // isPending
+  } = useApiCall<UserDailyForecast>(dailyForecastData);
+
   return (
     <section
       className={`${styles.page} page`}
@@ -109,6 +121,18 @@ function HomePage(): JSX.Element {
             {buttonTextFormatter(t("aura-10_breath-button"))}
           </BlurringSubstrate>
         </div>
+        <div className={styles["content__daily-forecast"]}>
+          {dailyForecast && dailyForecast.forecasts.map((forecast, index) => (
+            <div className={styles["content__daily-forecast-item"]} key={index}>
+              <Title variant="h3" className={styles["content__daily-forecast-title"]}>
+                {forecast.category}
+              </Title>
+              <p className={styles["content__daily-forecast-body"]}>
+                {forecast.body}
+              </p>
+            </div>
+          ))}
+        </div>
       </div>
     </section>
   );

src/components/HomePage/styles.module.css

@@ -1,15 +1,17 @@
 .page {
   position: relative;
-  height: calc(100vh - 50px);
+  min-height: calc(100vh - 50px);
-  max-height: -webkit-fill-available;
+  max-height: calc(100vh - 50px);
+  height: -webkit-fill-available;
   flex: auto;
-  justify-content: space-between;
+  /* justify-content: space-between; */
   justify-items: center;
   background-color: #01010b;
   background-size: calc(100% + 186px);
   background-position: center;
   background-repeat: no-repeat;
   padding: 16px 12px;
+  overflow-y: scroll;
 }
 
 .header {
@@ -73,6 +75,15 @@
   height: 100%;
 }
 
+.content {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  align-items: center;
+  margin-top: calc(100vh - 432px);
+}
+
 .content__buttons {
   display: flex;
   flex-direction: column;
@@ -89,6 +100,19 @@
   cursor: pointer;
 }
 
+.content__daily-forecast-title {
+  text-align: left;
+  color: #f23f57;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.content__daily-forecast-body {
+  color: #a4a4a4;
+  line-height: 130%;
+  font-weight: 500;
+}
+
 @keyframes pulse {
   0% {
     transform: scale(0.9);