Implement use of thumbnails if available, and open original image if

file name clicked

src/App.css

@@ -32,8 +32,11 @@ body {
   max-width: calc(100vw - 2em);
 }
 
-.GalleryItem > p {
+.GalleryItem > a {
+  color: inherit;
+
   margin: 0.5em;
+  overflow: clip;
 }
 
 .GalleryItem > img, video {

src/App.tsx

@@ -28,6 +28,7 @@ function App() {
 interface galleryItemInfo {
   is_dir: boolean;
   url: string;
+  thumbnail_url: string;
 }
 
 function getContents(
@@ -59,7 +60,7 @@ function getContents(
       return getDir == item.is_dir;
     })
     .map((item: galleryItemInfo, index: number) => {
-      const url = item.url;
+      const url = item.thumbnail_url === null ? item.url : item.thumbnail_url;
       let onClick = () => {};
       if (item.is_dir) {
         onClick = () => {
@@ -89,7 +90,9 @@ interface galleryItem {
 function ImageItem({ url }: galleryItem) {
   return (
     <div className="GalleryItem">
-      <p>{getFileName(url)}</p>
+      <a href={url} target="_blank">
+        {getFileName(url)}
+      </a>
       <img src={url} loading="lazy" />
     </div>
   );
@@ -98,7 +101,9 @@ function ImageItem({ url }: galleryItem) {
 function VideoItem({ url }: galleryItem) {
   return (
     <div className="GalleryItem">
-      <p>{getFileName(url)}</p>
+      <a href={url} target="_blank">
+        {getFileName(url)}
+      </a>
       <video controls>
         <source src={url} type="video/mp4" />
       </video>
@@ -125,7 +130,7 @@ function getFileName(string: string): string {
 }
 
 function post(category: string, callback: (text: string) => void) {
-  fetch('http://localhost/react-photo-viewer/php/get.php', {
+  fetch('http://localhost/photo-viewer-backend/php/get.php', {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',