refactor KIND20Card component for improved readability and structure and better image visibility (#30)

lumina/components/KIND20Card.tsx

@@ -1,76 +1,65 @@
-import React from 'react';
-import { useProfile } from "nostr-react";
-import {
-  nip19,
-} from "nostr-tools";
-import {
-  Card,
-  CardContent,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "@/components/ui/card"
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipProvider,
-  TooltipTrigger,
-} from "@/components/ui/tooltip"
-import {
-  Carousel,
-  CarouselContent,
-  CarouselItem,
-  CarouselNext,
-  CarouselPrevious,
-} from "@/components/ui/carousel"
-import ReactionButton from '@/components/ReactionButton';
-import { Avatar, AvatarImage } from '@/components/ui/avatar';
-import ViewRawButton from '@/components/ViewRawButton';
-import ViewNoteButton from './ViewNoteButton';
-import Link from 'next/link';
-import ViewCopyButton from './ViewCopyButton';
-import { Event as NostrEvent } from "nostr-tools";
-import ZapButton from './ZapButton';
-import Image from 'next/image';
-import { extractDimensions } from '@/utils/utils';
+import type React from "react"
+import { useProfile } from "nostr-react"
+import { nip19 } from "nostr-tools"
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from "@/components/ui/card"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Carousel, CarouselContent, CarouselItem, CarouselNext, CarouselPrevious } from "@/components/ui/carousel"
+import ReactionButton from "@/components/ReactionButton"
+import { Avatar, AvatarImage } from "@/components/ui/avatar"
+import ViewRawButton from "@/components/ViewRawButton"
+import ViewNoteButton from "./ViewNoteButton"
+import Link from "next/link"
+import ViewCopyButton from "./ViewCopyButton"
+import type { Event as NostrEvent } from "nostr-tools"
+import ZapButton from "./ZapButton"
+import Image from "next/image"
 
 interface KIND20CardProps {
-  pubkey: string;
-  text: string;
-  image: string;
-  eventId: string;
-  tags: string[][];
-  event: NostrEvent;
-  showViewNoteCardButton: boolean;
+  pubkey: string
+  text: string
+  image: string
+  eventId: string
+  tags: string[][]
+  event: NostrEvent
+  showViewNoteCardButton: boolean
 }
 
-const KIND20Card: React.FC<KIND20CardProps> = ({ pubkey, text, image, eventId, tags, event, showViewNoteCardButton }) => {
+const KIND20Card: React.FC<KIND20CardProps> = ({
+  pubkey,
+  text,
+  image,
+  eventId,
+  tags,
+  event,
+  showViewNoteCardButton,
+}) => {
   const { data: userData } = useProfile({
     pubkey,
-  });
+  })
 
-  const title = userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey);
-  text = text.replaceAll('\n', ' ');
-  const createdAt = new Date(event.created_at * 1000);
-  const hrefProfile = `/profile/${nip19.npubEncode(pubkey)}`;
-  const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey;
-
-  const { width, height } = extractDimensions(event);
+  const title =
+    userData?.username || userData?.display_name || userData?.name || userData?.npub || nip19.npubEncode(pubkey)
+  text = text.replaceAll("\n", " ")
+  const createdAt = new Date(event.created_at * 1000)
+  const hrefProfile = `/profile/${nip19.npubEncode(pubkey)}`
+  const profileImageSrc = userData?.picture || "https://robohash.org/" + pubkey
 
   return (
     <>
       <Card>
         <CardHeader>
           <CardTitle>
-            <Link href={hrefProfile} style={{ textDecoration: 'none' }}>
+            <Link href={hrefProfile} style={{ textDecoration: "none" }}>
               <TooltipProvider>
                 <Tooltip>
                   <TooltipTrigger>
-                    <div style={{ display: 'flex', alignItems: 'center' }}>
+                    <div style={{ display: "flex", alignItems: "center" }}>
                       <Avatar>
                         <AvatarImage src={profileImageSrc} />
                       </Avatar>
-                      <span className='break-all' style={{ marginLeft: '10px' }}>{title}</span>
+                      <span className="break-all" style={{ marginLeft: "10px" }}>
+                        {title}
+                      </span>
                     </div>
                   </TooltipTrigger>
                   <TooltipContent>
@@ -81,35 +70,33 @@ const KIND20Card: React.FC<KIND20CardProps> = ({ pubkey, text, image, eventId, t
             </Link>
           </CardTitle>
         </CardHeader>
-        <CardContent>
-          <div className='py-4'>
-            <div className='w-full h-full px-10'>
+        <CardContent className="p-0">
+          <div className="px-2 sm:px-4">
+            <div className="relative w-full" style={{ paddingBottom: "66.67%" }}>
               {image && (
                 <Image
                   src={image || "/placeholder.svg"}
                   alt={text}
-                  width={width}
-                  height={height}
-                  className='rounded lg:rounded-lg'
-                  style={{ maxWidth: '100%', maxHeight: '66vh', objectFit: 'contain', margin: 'auto' }}
+                  fill
+                  className="rounded-lg object-cover"
+                  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
                 />
               )}
             </div>
-            <br />
-            <div className='break-word overflow-hidden'>
-              {text}
-            </div>
           </div>
-          <hr />
-          <div className='py-4 space-x-4 flex justify-between items-start'>
-            <div className='flex space-x-4'>
-              <ReactionButton event={event} />
-              <ZapButton event={event} />
-              {showViewNoteCardButton && <ViewNoteButton event={event} />}
-            </div>
-            <div className='flex space-x-2'>
-              <ViewCopyButton event={event} />
-              <ViewRawButton event={event} />
+          <div className="p-4">
+            <div className="break-word overflow-hidden">{text}</div>
+            <hr className="my-4" />
+            <div className="space-x-4 flex justify-between items-start">
+              <div className="flex space-x-4">
+                <ReactionButton event={event} />
+                <ZapButton event={event} />
+                {showViewNoteCardButton && <ViewNoteButton event={event} />}
+              </div>
+              <div className="flex space-x-2">
+                <ViewCopyButton event={event} />
+                <ViewRawButton event={event} />
+              </div>
             </div>
           </div>
         </CardContent>
@@ -118,7 +105,7 @@ const KIND20Card: React.FC<KIND20CardProps> = ({ pubkey, text, image, eventId, t
         </CardFooter>
       </Card>
     </>
-  );
+  )
 }
 
-export default KIND20Card;
+export default KIND20Card