start on interface docs

docs/src/components/carousel.js

@@ -58,6 +58,11 @@ const imageDescripts = {
     ["/1.png", "tabs added to part"],
     ["/2.png", "sliced part with tabs"],
   ],
+  camInterface:[
+    ["/1.png", "empty Ops list"],
+    ["/2.png", "sample Ops list"],
+    ["/3.png", "Ops list with history bar"],
+  ]
 };
 
 /**
@@ -68,13 +73,16 @@ const imageDescripts = {
  */
 export function ImageCarousel({ base, images }) {
   return (
-    <Carousel showThumbs={false}>
-      {imageDescripts[images].map(([image, caption], index) => (
-        <div>
-          <img src={base + image} alt="" />
-          <p className="caption">{caption}</p>
-        </div>
-      ))}
-    </Carousel>
+    <div class="carouselWrapper">
+
+      <Carousel showThumbs={false}>
+        {imageDescripts[images].map(([image, caption], index) => (
+          <div>
+            <img src={base + image} alt="" />
+            <p className="caption">{caption}</p>
+          </div>
+        ))}
+      </Carousel>
+    </div>
   );
 }

docs/src/custom.css

@@ -5,3 +5,15 @@
 .navbar .navbar__items {
   height: 4.5rem;
 }
+
+.carouselWrapper{
+  width:100%;
+  
+  display:flex;
+  justify-content: center;
+}
+
+.carouselWrapper .carousel-root{
+  width:fit-content;
+  max-width: 20rem;
+}