add ViewRawButton

lumina/components/NoteCard.tsx

@@ -28,6 +28,7 @@ import {
 } from "@/components/ui/carousel"
 import ReactionButton from '@/components/ReactionButton';
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
+import ViewRawButton from '@/components/ViewRawButton';
 
 interface NoteCardProps {
   pubkey: string;
@@ -108,8 +109,9 @@ const NoteCard: React.FC<NoteCardProps> = ({ pubkey, text, eventId, tags, event
           {textWithoutImage}
         </div>
         <hr />
-        <div className='py-4'>
+        <div className='py-4 space-x-4 flex justify-between'>
           <ReactionButton event={event} />
+          <ViewRawButton event={event} />
         </div>
       </CardContent>
       <CardFooter>

lumina/components/ViewRawButton.tsx

@@ -0,0 +1,36 @@
+import { Button } from "@/components/ui/button";
+import {
+    Drawer,
+    DrawerClose,
+    DrawerContent,
+    DrawerDescription,
+    DrawerFooter,
+    DrawerHeader,
+    DrawerTitle,
+    DrawerTrigger,
+} from "@/components/ui/drawer"
+import { Textarea } from "./ui/textarea";
+
+
+export default function ViewRawButton(event: any) {
+    return (
+        <Drawer>
+            <DrawerTrigger>
+                <Button variant="outline">View Raw</Button>
+            </DrawerTrigger>
+            <DrawerContent>
+                <DrawerHeader>
+                    <DrawerTitle>Raw Event</DrawerTitle>
+                    <DrawerDescription>This shows the raw event data.</DrawerDescription>
+                </DrawerHeader>
+                <Textarea rows={20} disabled>{JSON.stringify(event, null, 2)}</Textarea>
+                <DrawerFooter>
+                    <DrawerClose>
+                        <Button variant="outline">Close</Button>
+                    </DrawerClose>
+                </DrawerFooter>
+            </DrawerContent>
+        </Drawer>
+
+    );
+}

lumina/components/ui/textarea.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface TextareaProps
+  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {}
+
+const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
+  ({ className, ...props }, ref) => {
+    return (
+      <textarea
+        className={cn(
+          "flex min-h-[80px] w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Textarea.displayName = "Textarea"
+
+export { Textarea }