From 3a67337bd90868a78e3476487d837ada92f3310b Mon Sep 17 00:00:00 2001
From: Chrono <me@disilla.org>
Date: Sat, 4 May 2024 19:36:38 -0400
Subject: [PATCH] improve profile card

---
 components/AboutPage/Clock.tsx       |  6 ++--
 components/AboutPage/ProfileCard.tsx | 41 ++++++++++++++++++++--------
 fresh.gen.ts                         |  2 ++
 islands/Clock.tsx                    | 31 +++++++++++++++++++++
 4 files changed, 65 insertions(+), 15 deletions(-)
 create mode 100644 islands/Clock.tsx

diff --git a/components/AboutPage/Clock.tsx b/components/AboutPage/Clock.tsx
index 94e13bd..733f4f3 100644
--- a/components/AboutPage/Clock.tsx
+++ b/components/AboutPage/Clock.tsx
@@ -8,7 +8,7 @@ const timeOptions = {
 
 export default class Clock extends Component {
   timer: number | undefined;
-  state: { time: number } | { time: Date };
+  state: { time: number };
   constructor() {
     super();
     this.state = { time: Date.now() };
@@ -36,9 +36,9 @@ export default class Clock extends Component {
     const deltaFromUTC = time.getUTCHours() - currentLocalHours;
 
     return (
-      <li className="row-end-3">
+      <span>
         {currentLocalTime} ({"UTC-" + deltaFromUTC})
-      </li>
+      </span>
     );
   }
 }
diff --git a/components/AboutPage/ProfileCard.tsx b/components/AboutPage/ProfileCard.tsx
index 3731357..73fef51 100644
--- a/components/AboutPage/ProfileCard.tsx
+++ b/components/AboutPage/ProfileCard.tsx
@@ -1,6 +1,12 @@
-// import Clock from "../../islands/Clock.tsx";
-import Clock from "./Clock.tsx";
-import { clockSvg, collegeSvg, locationSvg } from "./images.tsx";
+// import Clock from "./Clock.tsx";
+import Clock from "../../islands/Clock.tsx";
+import { ClockIcon, College, MapPin } from "./images.tsx";
+
+const iconProps = {
+  size: 24,
+  color: "#f0f0f0",
+  stroke: 1.75,
+};
 
 export default function ProfileCard() {
   return (
@@ -9,7 +15,6 @@ export default function ProfileCard() {
       style={{
         background: "rgba(10, 8, 0, 0.70)",
         color: "#f0f0f0",
-        // minWidth: "",
         borderRadius: "0.8rem",
         border: "6.45px solid #2b2b2b",
         padding: "25px",
@@ -34,20 +39,32 @@ export default function ProfileCard() {
       </div>
       <style>
         {`
-.profile-card li {
+#profile-card-text {
   height: 30px;
   line-height: 30px;
 }
       `}
       </style>
-      <div className="grid grid-rows-3 max-w-lg text-sm list-none whitespace-nowrap">
-        <div className="row-end-1">{collegeSvg}</div>
-        <li className="row-end-1">
+      <div className="grid grid-rows-3 max-w-lg whitespace-nowrap">
+        <div className="row-end-1 w-8">
+          <div className="m-1">
+            {College(iconProps)}
+          </div>
+        </div>
+        <span className="row-end-1">
           Indiana University Indianapolis
-        </li>
-        <div className="row-end-2">{locationSvg}</div>
-        <li className="row-end-2">Greater Indianapolis, IN, USA</li>
-        <div className="row-end-3">{clockSvg}</div>
+        </span>
+        <div className="row-end-2 w-8">
+          <div className="m-1">
+            {MapPin(iconProps)}
+          </div>
+        </div>
+        <span className="row-end-2">Indianapolis, IN, USA</span>
+        <div className="row-end-3 w-8">
+          <div className="m-1">
+            {ClockIcon(iconProps)}
+          </div>
+        </div>
         <Clock />
       </div>
     </div>
diff --git a/fresh.gen.ts b/fresh.gen.ts
index 62488ce..d5483b5 100644
--- a/fresh.gen.ts
+++ b/fresh.gen.ts
@@ -13,6 +13,7 @@ import * as $positions_slug_ from "./routes/positions/[slug].tsx";
 import * as $posts from "./routes/posts.tsx";
 import * as $posts_slug_ from "./routes/posts/[slug].tsx";
 import * as $projects from "./routes/projects.tsx";
+import * as $Clock from "./islands/Clock.tsx";
 import * as $DiscordLink from "./islands/DiscordLink.tsx";
 import * as $MarkdownBlock from "./islands/MarkdownBlock.tsx";
 import * as $SplashTextDisplay from "./islands/SplashTextDisplay.tsx";
@@ -34,6 +35,7 @@ const manifest = {
     "./routes/projects.tsx": $projects,
   },
   islands: {
+    "./islands/Clock.tsx": $Clock,
     "./islands/DiscordLink.tsx": $DiscordLink,
     "./islands/MarkdownBlock.tsx": $MarkdownBlock,
     "./islands/SplashTextDisplay.tsx": $SplashTextDisplay,
diff --git a/islands/Clock.tsx b/islands/Clock.tsx
new file mode 100644
index 0000000..6ff1993
--- /dev/null
+++ b/islands/Clock.tsx
@@ -0,0 +1,31 @@
+import { useSignal } from "@preact/signals";
+import { useCallback, useEffect } from "preact/hooks";
+
+const timeOptions = {
+  timeZone: "America/Indiana/Indianapolis",
+  hour12: false,
+  timeStyle: "medium" as const,
+};
+
+export default function Countdown() {
+  const now = useSignal(new Date());
+
+  const updateTime = useCallback(() => {
+    now.value = new Date();
+  }, [now]);
+
+  useEffect(() => {
+    const timer = setInterval(updateTime, 1000);
+    return () => clearInterval(timer);
+  }, [updateTime]);
+
+  const currentLocalTime = now.value.toLocaleString("en-US", timeOptions);
+  const currentLocalHours = parseInt(currentLocalTime.split(":")[0]);
+  const deltaFromUTC = now.value.getUTCHours() - currentLocalHours;
+
+  return (
+    <span>
+      {currentLocalTime} ({"UTC-" + deltaFromUTC})
+    </span>
+  );
+}
-- 
2.45.2