smarter banner images

app/(app)/calendar/[naddr]/_components/Header.tsx

@@ -21,7 +21,7 @@ import {
 } from "@/lib/actions/zap";
 import { type NDKEvent } from "@nostr-dev-kit/ndk";
 import { btcToSats, formatNumber } from "@/lib/utils";
-import { nip19 } from "nostr-tools";
+import BannerImage from "@/components/PageComponents/BannerImage";
 
 const CreateEventButton = dynamic(() => import("./CreateEventButton"), {
   ssr: false,
@@ -108,16 +108,7 @@ export default function Header({ event }: { event: NDKEvent }) {
     <div className="relative overflow-hidden rounded-[1rem] border bg-muted p-[0.5rem] @container">
       <div className="overflow-hidden rounded-[0.5rem] p-0">
         <div className="relative w-full overflow-hidden bg-gradient-to-b from-primary pb-[50%] @5xl:rounded-[20px] md:pb-[40%]">
-          {!!image && (
-            <Image
-              className="absolute inset-0 h-full w-full object-cover align-middle"
-              src={image}
-              width={400}
-              height={100}
-              alt="banner"
-              unoptimized
-            />
-          )}
+          {!!image && <BannerImage image={image} />}
         </div>
       </div>
       <div className="space-y-1 p-3 @sm:px-3.5 @sm:pb-2 @sm:pt-5">

app/(app)/explore/_components/CalendarCard.tsx

@@ -150,7 +150,7 @@ export function LoadingCalendarCard() {
   const textColor = "bg-zinc-200";
   return (
     <Skeleton className="pointer-events-none relative h-[350px] w-[250px] min-w-[250px] overflow-hidden bg-muted">
-      <div className="absolute inset-0  backdrop-blur-lg transition-all">
+      <div className="absolute inset-0 backdrop-blur-lg transition-all">
         <div className="group relative flex h-full w-full flex-col items-center justify-end transition-all">
           <CardHeader className="absolute inset-x-0 top-[59%] transform pt-4 text-center transition-all duration-300 group-hover:top-[8px] group-hover:ml-[75px] group-hover:text-left">
             <Skeleton className={cn("mx-auto h-[20px] w-2/3", textColor)} />

components/PageComponents/BannerImage.tsx

@@ -0,0 +1,53 @@
+"use client";
+import { useState } from "react";
+import Image from "next/image";
+import { cn } from "@/lib/utils";
+
+export default function BannerImage({ image }: { image: string }) {
+  const [portrait, setPortrait] = useState(false);
+  return (
+    <>
+      <Image
+        className="absolute inset-0 h-full w-full scale-125 object-cover align-middle blur-lg"
+        src={image}
+        width={400}
+        height={100}
+        alt="banner"
+        unoptimized
+      />
+      <div className="absolute inset-0 bg-zinc-800/50"></div>
+      <Image
+        priority
+        className={cn(
+          "absolute h-full  object-cover align-middle",
+          portrait
+            ? "inset-y-0 left-1/2 mx-auto w-auto -translate-x-1/2"
+            : "inset-0 w-full",
+        )}
+        src={image}
+        width={400}
+        height={100}
+        alt="banner"
+        unoptimized
+      />
+      <Image
+        alt="demo"
+        className="absolute bottom-full right-full h-auto w-auto"
+        width={1}
+        height={1}
+        src={image}
+        onLoad={(e) => {
+          console.log(
+            "Width",
+            e.currentTarget.width,
+            "Height",
+            e.currentTarget.height,
+          );
+          if (e.currentTarget.width < e.currentTarget.height) {
+            setPortrait(true);
+          }
+        }}
+      />
+    </>
+  );
+}