1  import "./spoolIcon.css";
 2  
 3  interface Props {
 4    color: string | { colors: string[]; vertical: boolean };
 5    size?: "small" | "large";
 6    no_margin?: boolean;
 7  }
 8  
 9  export default function SpoolIcon(props: Readonly<Props>) {
10    let dirClass = "vertical";
11    let cols = [];
12    const size = props.size ? props.size : "small";
13    const no_margin = props.no_margin ? "no-margin" : "";
14  
15    if (typeof props.color === "string") {
16      cols = [props.color];
17    } else {
18      dirClass = props.color.vertical ? "vertical" : "horizontal";
19      cols = props.color.colors;
20    }
21  
22    return (
23      <div className={"spool-icon " + dirClass + " " + size + " " + no_margin}>
24        {cols.map((col) => (
25          <div
26            key={col}
27            style={{
28              backgroundColor: "#" + col.replace("#", ""),
29            }}
30          ></div>
31        ))}
32      </div>
33    );
34  }