refactor: add image logo variant and subtle texts on home

2026-05-07 05:52:52 +05:30
parent 167b1d2875
commit 06f5c2d119
2 changed files with 425 additions and 415 deletions
@@ -2,47 +2,54 @@ import { DotIcon } from "@phosphor-icons/react";
 import "@fontsource/knewave/400.css";

 interface LogoProps {
-  scale?: number;
-  type?: "inline" | "mono" | "logo";
+    scale?: number;
+    type?: "inline" | "mono" | "logo" | null;
+    ul?: boolean;
 }

-export default function Logo({ scale = 1, type = "logo" }: LogoProps) {
-  if (type === "inline") {
-    return (
-      <span className={"text-accent font-display italic "}>
-        pi<span className="text-primary">.</span>&nbsp;ku
-        <span className="text-primary">.</span>&nbsp;
-      </span>
-    );
-  }
+export default function Logo({ scale = 1, type = null, ul = false }: LogoProps) {
+    if (type === "inline") {
+        return (
+            <span className={"text-accent font-display italic "}>
+                pi<span className="text-primary">.</span>&nbsp;ku
+                <span className="text-primary">.</span>&nbsp;
+            </span>
+        );
+    }

-  if (type === "mono") {
-    return (
-      <span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
-        pi. ku.
-      </span>
-    );
-  }
+    if (type === "mono") {
+        return (
+            <span className="font-display italic font-bold border-b-3 border-dashed border-stone-800/50">
+                pi. ku.
+            </span>
+        );
+    }

-  return (
-    <div
-      role="img"
-      aria-label="Pi. Ku. logo"
-      className="inline-flex items-baseline justify-center leading-none select-none"
-      style={{ fontFamily: "'Knewave', serif", scale }}
-    >
-      <span className={`text-3xl font-light text-accent`}>Pi</span>
-      <DotIcon
-        weight="fill"
-        size={12}
-        className={`text-primary translate-y-1 -mx-px`}
-      />
-      <span className={`text-3xl font-light text-accent`}>&nbsp;Ku</span>
-      <DotIcon
-        weight="fill"
-        size={12}
-        className={`text-primary translate-y-1 -mx-px`}
-      />
-    </div>
-  );
+    if (type === "logo") {
+        return (
+            <img src="/android-chrome-512x512.png" alt="Pi. Ku. logo" className="mx-auto" width={scale * 100} />
+        );
+    }
+
+    return (
+        <div
+            role="img"
+            aria-label="Pi. Ku. logo"
+            className={`inline-flex items-baseline justify-center leading-none select-none ${ul ? "ul-wavy" : ""}`}
+            style={{ fontFamily: "'Knewave', serif", scale }}
+        >
+            <span className="text-3xl font-light text-accent">Pi</span>
+            <DotIcon
+                weight="fill"
+                size={12}
+                className="text-primary translate-y-1 -mx-px"
+            />
+            <span className="text-3xl font-light text-accent">&nbsp;Ku</span>
+            <DotIcon
+                weight="fill"
+                size={12}
+                className="text-primary translate-y-1 -mx-px"
+            />
+        </div>
+    );
 }