adding grid

1 files changed, 15 insertions, 10 deletions

diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
index 277a237..5852ff1 100644
--- a/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
+++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.gallery.js
@@ -1,7 +1,7 @@
 import React from 'react'
 
 import { CURTAIN_COLOR_LOOKUP } from 'app/constants'
-import { MediaCitation, Vitrine, Gallery, Carousel } from '../components.utility'
+import { MediaCitation, Vitrine, Gallery, Carousel, Grid } from '../components.utility'
 
 export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
@@ -26,20 +26,12 @@ export const InlineVitrine = ({ paragraph, media, currentParagraph, currentAnnot
 export const InlineGallery = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
   const annotation = paragraph.annotations[0]
   const item = media.lookup[annotation.settings.media_id]
-  const color = CURTAIN_COLOR_LOOKUP[annotation.settings.color] || CURTAIN_COLOR_LOOKUP.white
-  const style = {
-    backgroundColor: color.backgroundColor,
-    color: color.textColor,
-  }
 
   return (
     <div
       className='inline-element media gallery'
     >
-      <div style={style} className='gallery-container'>
-        <Gallery media={item} />
-      </div>
-      <MediaCitation media={item} />
+      <Gallery media={item} annotation={annotation} />
     </div>
   )
 }
@@ -64,3 +56,16 @@ export const InlineCarousel = ({ paragraph, media, currentParagraph, currentAnno
     </div>
   )
 }
+
+export const InlineGrid = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => {
+  const annotation = paragraph.annotations[0]
+  const item = media.lookup[annotation.settings.media_id]
+
+  return (
+    <div
+      className='inline-element media grid'
+    >
+      <Grid media={item} annotation={annotation} />
+    </div>
+  )
+}