Sticker Creator

sticker-creator/elements/MessageMeta.tsx

@@ -0,0 +1,54 @@
+import * as React from 'react';
+import * as styles from './MessageMeta.scss';
+import { useI18n } from '../util/i18n';
+
+export type Props = {
+  kind?: 'bubble' | 'dark' | 'light';
+  minutesAgo: number;
+};
+
+const getItemClass = ({ kind }: Props) => {
+  if (kind === 'dark') {
+    return styles.dark;
+  }
+
+  if (kind === 'light') {
+    return styles.light;
+  }
+
+  return styles.bubble;
+};
+
+export const MessageMeta = React.memo((props: Props) => {
+  const i18n = useI18n();
+  const itemClass = getItemClass(props);
+
+  return (
+    <div className={styles.base}>
+      <svg width={12} height={12} className={itemClass}>
+        <g fillRule="evenodd">
+          <path d="M8.5 1.67L9 .804a6 6 0 11-7.919 1.76l.868.504-.008.011L6.25 5.567l-.5.866-4.309-2.488A5 5 0 108.5 1.67z" />
+          <path d="M6.003 1H6a5.06 5.06 0 00-.5.025V.02A6.08 6.08 0 016 0h.003A6 6 0 0112 6h-1a5 5 0 00-4.997-5zM3.443.572l.502.87a5.06 5.06 0 00-.866.5l-.502-.87a6.08 6.08 0 01.866-.5z" />
+        </g>
+      </svg>
+      <div className={itemClass}>{i18n('minutesAgo', [props.minutesAgo])}</div>
+      <svg width={18} height={12} className={itemClass}>
+        <defs>
+          <path
+            d="M7.917.313a6.99 6.99 0 00-2.844 6.7L5 7.084l-1.795-1.79L2.5 6 5 8.5l.34-.34a7.015 7.015 0 002.577 3.527A6.002 6.002 0 010 6 6.002 6.002 0 017.917.313zM12 0c3.312 0 6 2.688 6 6s-2.688 6-6 6-6-2.688-6-6 2.688-6 6-6zm-1 8.5L15.5 4l-.705-.71L11 7.085l-1.795-1.79L8.5 6 11 8.5z"
+            id="prefix__a"
+          />
+          <path id="prefix__c" d="M0 0h18v12H0z" />
+        </defs>
+        <g fillRule="evenodd">
+          <mask id="prefix__b">
+            <use xlinkHref="#prefix__a" />
+          </mask>
+          <g mask="url(#prefix__b)">
+            <use xlinkHref="#prefix__c" />
+          </g>
+        </g>
+      </svg>
+    </div>
+  );
+});