From 63411b0496772788c87d155c9f55f73f99d84848 Mon Sep 17 00:00:00 2001
From: krassowski <5832902+krassowski@users.noreply.github.com>
Date: Mon, 1 Jul 2024 09:40:36 +0100
Subject: [PATCH] Add placeholder icon

---
 src/gallery.tsx               |  8 +++++++-
 src/icons.ts                  |  6 ++++++
 style/base.css                | 11 ++++++++++-
 style/icons/md/repository.svg |  1 +
 4 files changed, 24 insertions(+), 2 deletions(-)
 create mode 100644 style/icons/md/repository.svg

diff --git a/src/gallery.tsx b/src/gallery.tsx
index 5848664..e9f1170 100644
--- a/src/gallery.tsx
+++ b/src/gallery.tsx
@@ -13,6 +13,7 @@ import { TranslationBundle } from '@jupyterlab/translation';
 import { IExhibit } from './types';
 import { IExhibitReply } from './types';
 import { requestAPI, eventStream, IStreamMessage, IProgress } from './handler';
+import { repositoryIcon } from './icons';
 
 interface IActions {
   download(exhibit: IExhibit): Promise<void>;
@@ -233,7 +234,12 @@ function Exhibit(props: {
       <h4 className="jp-Exhibit-title">{exhibit.title}</h4>
       <div className="jp-Exhibit-middle">
         <div className="jp-Exhibit-icon">
-          <img src={exhibit.icon} alt={exhibit.title} />
+          {
+            exhibit.icon ?
+            <img src={exhibit.icon} alt={exhibit.title} />
+            :
+            <repositoryIcon.react className="jp-exhibitPlaceholder" />
+          }
         </div>
         <div className="jp-Exhibit-buttons">
           {!exhibit.isCloned ? (
diff --git a/src/icons.ts b/src/icons.ts
index d884ac1..169b8b8 100644
--- a/src/icons.ts
+++ b/src/icons.ts
@@ -1,7 +1,13 @@
 import { LabIcon } from '@jupyterlab/ui-components';
 import gallerySvgstr from '../style/icons/md/gallery.svg';
+import repositorySvgstr from '../style/icons/md/repository.svg';
 
 export const galleryIcon = new LabIcon({
   name: 'jupyterlab-gallery:gallery',
   svgstr: gallerySvgstr
 });
+
+export const repositoryIcon = new LabIcon({
+  name: 'jupyterlab-gallery:repository',
+  svgstr: repositorySvgstr
+});
diff --git a/style/base.css b/style/base.css
index c1899bf..258eeae 100644
--- a/style/base.css
+++ b/style/base.css
@@ -38,10 +38,19 @@
   cursor: default;
 }
 
-.jp-Exhibit-icon > img {
+.jp-Exhibit-icon > img, .jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
   max-width: 100%;
 }
 
+.jp-Exhibit-icon > .jp-exhibitPlaceholder > svg {
+  max-width: 100%;
+  block-size: 100%;
+}
+
+.jp-exhibitPlaceholder {
+  height: 100%;
+}
+
 .jp-Exhibit-icon {
   display: flex;
   justify-content: center;
diff --git a/style/icons/md/repository.svg b/style/icons/md/repository.svg
new file mode 100644
index 0000000..5250b24
--- /dev/null
+++ b/style/icons/md/repository.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path class="jp-icon3" fill="rgb(97,97,97)"  d="M6,2H18A2,2 0 0,1 20,4V20A2,2 0 0,1 18,22H6A2,2 0 0,1 4,20V4A2,2 0 0,1 6,2M12.75,13.5C15.5,13.5 16.24,11.47 16.43,10.4C17.34,10.11 18,9.26 18,8.25C18,7 17,6 15.75,6C14.5,6 13.5,7 13.5,8.25C13.5,9.19 14.07,10 14.89,10.33C14.67,11 14,12 12,12C10.62,12 9.66,12.35 9,12.84V8.87C9.87,8.56 10.5,7.73 10.5,6.75C10.5,5.5 9.5,4.5 8.25,4.5C7,4.5 6,5.5 6,6.75C6,7.73 6.63,8.56 7.5,8.87V15.13C6.63,15.44 6,16.27 6,17.25C6,18.5 7,19.5 8.25,19.5C9.5,19.5 10.5,18.5 10.5,17.25C10.5,16.32 9.94,15.5 9.13,15.18C9.41,14.5 10.23,13.5 12.75,13.5M8.25,16.5A0.75,0.75 0 0,1 9,17.25A0.75,0.75 0 0,1 8.25,18A0.75,0.75 0 0,1 7.5,17.25A0.75,0.75 0 0,1 8.25,16.5M8.25,6A0.75,0.75 0 0,1 9,6.75A0.75,0.75 0 0,1 8.25,7.5A0.75,0.75 0 0,1 7.5,6.75A0.75,0.75 0 0,1 8.25,6M15.75,7.5A0.75,0.75 0 0,1 16.5,8.25A0.75,0.75 0 0,1 15.75,9A0.75,0.75 0 0,1 15,8.25A0.75,0.75 0 0,1 15.75,7.5Z" /></svg>
\ No newline at end of file