92 lines
2.7 KiB
JavaScript
92 lines
2.7 KiB
JavaScript
import React from "react";
|
|
import { Carousel } from "react-responsive-carousel";
|
|
import "react-responsive-carousel/lib/styles/carousel.min.css";
|
|
|
|
const imageDescripts = {
|
|
outline: [
|
|
["/1.png", "Outline of a complex part"],
|
|
["/2.png", "Outline of a non-flat part with inside holes"],
|
|
["/3.png", "Outside-only outline"],
|
|
["/4.png", "Inside-only outline"],
|
|
],
|
|
level: [
|
|
["/1.png", "Level of a large part"],
|
|
["/2.png", `Level of a square part's stock`],
|
|
["/3.png", `Level of a part with a non-uniform top surface`],
|
|
],
|
|
rough: [
|
|
["/1.png", "Rough cut of two parts"],
|
|
["/2.png", "Side-view of a rough cut"],
|
|
["/3.png", "Rough cut of a part with a complex top surface"],
|
|
["/4.gif", "Animate of complex rough cut"],
|
|
],
|
|
contour: [
|
|
["/1.png", "Close-up of a precise contour"],
|
|
["/2.png", "Contour of multiple parts at once"],
|
|
["/3.png", "Low precision contour"],
|
|
],
|
|
register: [
|
|
["/1.png", "2-drill register"],
|
|
["/2.png", "3-drill register"],
|
|
["/3.png", "Jigsaw register"],
|
|
],
|
|
drill: [
|
|
["/1.png", "Drills for a robot baseplate"],
|
|
["/2.png", "Drills for a pegboard"],
|
|
["/3.png", "Selecting only matching-size holes"],
|
|
],
|
|
trace: [
|
|
["/1.png", "Toolpath tracing a design into a part"],
|
|
["/2.png", "Selecting loops to trace"],
|
|
["/3.png", "Tracing edges for deburring"],
|
|
["/4.png", "Trace to clear a pocket"],
|
|
["/5.png", "Arbitrary offset outline"],
|
|
],
|
|
pocket: [
|
|
["/1.png", "Selecting areas to pocket"],
|
|
["/2.png", "Toolpath for pocket"],
|
|
["/3.gif", "Pocket animation"],
|
|
["/4.png", "Toolpath for v-bit carve"],
|
|
["/5.png", "Many-pocketed part"],
|
|
],
|
|
gcode: [["/1.png", "The gcode editor popup"]],
|
|
laserOn: [],
|
|
laserOff: [],
|
|
index: [],
|
|
lathe: [],
|
|
tabs: [
|
|
["/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"],
|
|
],
|
|
prefs: [
|
|
["/prefs-CAM.png", "Preferences in CAM mode"],
|
|
["/prefs-FDM.png", "Preferences in FDM mode"],
|
|
["/prefs-LASER.png", "Preferences in laser mode"],
|
|
],
|
|
};
|
|
|
|
/**
|
|
* A carousel of images.
|
|
*
|
|
* @param {keyof typeof imageDescripts} images - The key to an array of images and descriptions.
|
|
* @returns {ReactElement} - A carousel of the given images.
|
|
*/
|
|
export function ImageCarousel({ base, images, sml }) {
|
|
return (
|
|
<div className={sml ? "carouselWrapper" : ""}>
|
|
<Carousel showThumbs={false}>
|
|
{imageDescripts[images].map(([image, caption], index) => (
|
|
<div>
|
|
<img src={base + image} alt="" />
|
|
<p className="caption">{caption}</p>
|
|
</div>
|
|
))}
|
|
</Carousel>
|
|
</div>
|
|
);
|
|
}
|