Sticker Creator

sticker-creator/components/StickerPackPreview.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as styles from './StickerPackPreview.scss';
+import { useI18n } from '../util/i18n';
+
+export type Props = {
+  images: Array<string>;
+  title: string;
+  author: string;
+};
+
+export const StickerPackPreview = React.memo(
+  ({ images, title, author }: Props) => {
+    const i18n = useI18n();
+
+    return (
+      <div className={styles.container}>
+        <div className={styles.titleBar}>
+          {i18n('StickerCreator--Preview--title')}
+        </div>
+        <div className={styles.scroller}>
+          <div className={styles.grid}>
+            {images.map((src, id) => (
+              <img key={id} className={styles.sticker} src={src} alt={src} />
+            ))}
+          </div>
+        </div>
+        <div className={styles.meta}>
+          <div className={styles.metaTitle}>{title}</div>
+          <div className={styles.metaAuthor}>{author}</div>
+        </div>
+      </div>
+    );
+  }
+);