From dc427470c41617fe7fceddd41194bf1b7aecb57b Mon Sep 17 00:00:00 2001
From: mroxso <24775431+mroxso@users.noreply.github.com>
Date: Sun, 28 Jan 2024 17:37:17 +0100
Subject: [PATCH] add ViewRawButton

---
 lumina/components/NoteCard.tsx      |  4 +++-
 lumina/components/ViewRawButton.tsx | 36 +++++++++++++++++++++++++++++
 lumina/components/ui/textarea.tsx   | 24 +++++++++++++++++++
 3 files changed, 63 insertions(+), 1 deletion(-)
 create mode 100644 lumina/components/ViewRawButton.tsx
 create mode 100644 lumina/components/ui/textarea.tsx

diff --git a/lumina/components/NoteCard.tsx b/lumina/components/NoteCard.tsx
index 710cd67..6c320ec 100644
--- a/lumina/components/NoteCard.tsx
+++ b/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>
diff --git a/lumina/components/ViewRawButton.tsx b/lumina/components/ViewRawButton.tsx
new file mode 100644
index 0000000..cd89925
--- /dev/null
+++ b/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>
+
+    );
+}
\ No newline at end of file
diff --git a/lumina/components/ui/textarea.tsx b/lumina/components/ui/textarea.tsx
new file mode 100644
index 0000000..9f9a6dc
--- /dev/null
+++ b/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 }