Refactor DocImage components and improve type ordering

Co-authored-by: paul.jaffre <[email protected]>

Author: cursoragent

src/components/docImage.tsx

@@ -1,6 +1,7 @@
 import path from 'path';
 
 import {serverContext} from 'sentry-docs/serverContext';
+
 import {DocImageClient} from './docImageClient';
 
 export default function DocImage({

src/components/docImageClient.tsx

@@ -1,16 +1,17 @@
 'use client';
 
 import Image from 'next/image';
+
 import {ImageLightbox} from './imageLightbox';
 
 interface DocImageClientProps {
-  src: string;
+  alt: string;
+  height: number;
   imgPath: string;
+  src: string;
   width: number;
-  height: number;
-  alt: string;
-  style?: React.CSSProperties;
   className?: string;
+  style?: React.CSSProperties;
 }
 
 export function DocImageClient({
@@ -22,7 +23,7 @@ export function DocImageClient({
   style,
   className,
 }: DocImageClientProps) {
-  const handleContextMenu = (e: React.MouseEvent) => {
+  const handleContextMenu = (_e: React.MouseEvent) => {
     // Allow right-click to open in new tab
     const link = document.createElement('a');
     link.href = imgPath;

src/components/imageLightbox.tsx

@@ -1,16 +1,16 @@
 'use client';
 
 import {useState} from 'react';
-import * as Dialog from '@radix-ui/react-dialog';
 import {X} from 'react-feather';
+import * as Dialog from '@radix-ui/react-dialog';
 import Image from 'next/image';
 
 interface ImageLightboxProps {
-  src: string;
   alt: string;
-  width: number;
-  height: number;
   children: React.ReactNode;
+  height: number;
+  src: string;
+  width: number;
 }
 
 export function ImageLightbox({src, alt, width, height, children}: ImageLightboxProps) {