add utepils score to screen

src/components/utepils.tsx

@@ -0,0 +1,49 @@
+import { useUtepils } from "../hooks/use-utepils";
+
+function getBackgroundClass(score: number) {
+  if (score >= 75) return "bg-gradient-to-br from-amber-200 via-orange-200 to-yellow-100";
+  if (score >= 45) return "bg-gradient-to-br from-sky-200 via-blue-100 to-slate-100";
+  return "bg-gradient-to-br from-slate-300 via-slate-200 to-zinc-100";
+}
+
+function getBarClass(score: number) {
+  if (score >= 70) return "bg-green-500";
+  if (score >= 40) return "bg-amber-400";
+  return "bg-red-500";
+}
+
+export default function UtepilsCard() {
+  const { verdict, score, loading, error } = useUtepils();
+  console.log("Utepils verdict:", verdict, "Score:", score, "Loading:", loading, "Error:", error);
+  const title = verdict?.title || "Laster...";
+  const subtitle = verdict?.subtitle || "Henter utepils-data";
+  const emoji = verdict?.emoji || "⏳";
+
+  return (
+    <div
+      className={`${getBackgroundClass(score)} rounded-2xl p-4 min-w-[240px] max-w-[320px] border border-yellow-200 font-sans`}
+    >
+      <div className="flex justify-between items-start">
+        <div>
+          <div className="text-[11px] font-medium tracking-widest text-[#a89060] uppercase mb-1">
+            Utepils-meter
+          </div>
+          <span className="text-[22px] font-bold text-[#1a1a2e]">{title}</span>
+          <div className="text-[13px] text-[#7a6a4a] mt-0.5">{subtitle}</div>
+        </div>
+        <span className="text-[22px]">{emoji}</span>
+      </div>
+
+      <div className="bg-[#1a1a2e] rounded-xl px-4 py-2.5 mt-3">
+        <div className="text-[10px] text-gray-400 tracking-widest uppercase">Utepils-score</div>
+        <div className="text-[28px] font-bold text-white leading-tight">{score}%</div>
+        <div className="mt-2 bg-[#333] rounded-full h-2 overflow-hidden">
+          <div
+            className={`h-full rounded-full transition-all duration-700 ease-in-out ${getBarClass(score)}`}
+            style={{ width: `${score}%` }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

src/hooks/use-utepils.ts

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+
+export type Verdict = {
+  title: string;
+  subtitle: string;
+  emoji: string;
+  score: number;
+};
+
+export function useUtepils() {
+  const [verdict, setVerdict] = useState<Verdict | null>(null);
+  const [score, setScore] = useState<number>(0);
+  const [loading, setLoading] = useState(true);
+  const [error, setError] = useState<string | null>(null);
+
+  useEffect(() => {
+    fetch("https://utepils-ten.vercel.app/api/utepils/bergen")
+      .then((res) => {
+        if (!res.ok) throw new Error(`HTTP error! status: ${res.status}`);
+        console.log("Fetched utepils data:", res);
+        return res.json();
+      })
+      .then((data) => {
+        setVerdict(data.verdict);
+        setScore(data.score);
+      })
+      .catch((err) => setError(err.message))
+      .finally(() => setLoading(false));
+  }, []);
+
+  return { verdict, score, loading, error };
+}

src/pages/calendar-screen.tsx

@@ -3,6 +3,7 @@
 import Calendar from "../components/calendar";
 import { Orakel } from "../components/orakel";
 import TodaysBirthdays from "../components/todays-birthdays";
+import UtepilsCard from "../components/utepils";
 // import SnowMinimal from "../components/christmas-decoration";
 // import HeartsMinimal from "../components/valentines";
 
@@ -13,6 +14,7 @@ export const CalendarScreen = () => {
       <div className="flex gap-7">
         <Orakel />
         <TodaysBirthdays />
+        <UtepilsCard />
       </div>
     </div>
   );