first commit

common/resources/client/notifications/notification-line.tsx

@@ -0,0 +1,56 @@
+import {MixedImage} from '../ui/images/mixed-image';
+import clsx from 'clsx';
+import React, {JSXElementConstructor} from 'react';
+import {
+  DatabaseNotification,
+  DatabaseNotificationLine,
+} from './database-notification';
+import {FormattedRelativeTime} from '@common/i18n/formatted-relative-time';
+
+interface LineProps {
+  notification: DatabaseNotification;
+  line: DatabaseNotificationLine;
+  index: number;
+  iconRenderer?: JSXElementConstructor<{icon: string}>;
+}
+
+export function Line({notification, line, index, iconRenderer}: LineProps) {
+  const isPrimary = line.type === 'primary' || index === 0;
+  const Icon = iconRenderer || DefaultIconRenderer;
+  const Element = line.action ? 'a' : 'div';
+
+  return (
+    <>
+      <Element
+        key={index}
+        className={clsx(
+          'flex items-center gap-8',
+          line.action && 'hover:underline',
+          isPrimary
+            ? 'text-sm mnarktext-main whitespace-nowrap'
+            : 'text-xs text-muted mt-6'
+        )}
+        href={line.action?.action}
+        title={line.action?.label}
+      >
+        {line.icon && <Icon icon={line.icon} />}
+        <div
+          className="overflow-hidden text-ellipsis"
+          dangerouslySetInnerHTML={{__html: line.content}}
+        />
+      </Element>
+      {index === 0 && (
+        <time className="text-xs text-muted">
+          <FormattedRelativeTime date={notification.created_at} />
+        </time>
+      )}
+    </>
+  );
+}
+
+interface DefaultIconRendererProps {
+  icon: string;
+}
+function DefaultIconRenderer({icon}: DefaultIconRendererProps) {
+  return <MixedImage src={icon} />;
+}