feat(core/presentation): add <Illustration/>, supporting files (#8336)

app/scripts/modules/core/src/presentation/illustrations/Illustration.tsx

@@ -0,0 +1,27 @@
+import React, { memo } from 'react';
+
+import { illustrationsByName } from './illustrationsByName';
+
+export type IllustrationName = keyof typeof illustrationsByName;
+
+export interface IIllustrationProps {
+  name: IllustrationName;
+}
+
+const throwInvalidIllustrationError = (name: string) => {
+  throw new Error(`No illustration with the name ${name} exists`);
+};
+
+export const Illustration = memo(({ name }: IIllustrationProps) => {
+  const Component = illustrationsByName[name];
+
+  if (!Component) {
+    throwInvalidIllustrationError(name);
+  }
+
+  return (
+    <div style={{ display: 'grid', gridTemplateColumns: '1fr', gridTemplateRows: '1fr' }}>
+      <Component style={{ gridColumn: 1, gridRow: 1 }} />
+    </div>
+  );
+});

app/scripts/modules/core/src/presentation/illustrations/illustrationsByName.ts

@@ -0,0 +1,9 @@
+import { ReactComponent as markArtifactVersionAsBad } from './vectors/markArtifactVersionAsBad.svg';
+import { ReactComponent as pinArtifactVersion } from './vectors/pinArtifactVersion.svg';
+import { ReactComponent as unpinArtifactVersion } from './vectors/unpinArtifactVersion.svg';
+
+export const illustrationsByName = {
+  markArtifactVersionAsBad,
+  pinArtifactVersion,
+  unpinArtifactVersion,
+} as const;

app/scripts/modules/core/src/presentation/illustrations/index.ts

@@ -0,0 +1 @@
+export * from './Illustration';