first commit

common/resources/client/comments/comment-list/account-required-card.tsx

@@ -0,0 +1,37 @@
+import {useAuth} from '@common/auth/use-auth';
+import {Trans} from '@common/i18n/trans';
+import {Link} from 'react-router-dom';
+import {LinkStyle} from '@common/ui/buttons/external-link';
+import {MessageDescriptor} from '@common/i18n/message-descriptor';
+
+interface Props {
+  message: MessageDescriptor;
+}
+export function AccountRequiredCard({message}: Props) {
+  const {user} = useAuth();
+  if (user) return null;
+  return (
+    <div className="border border-dashed py-30 px-20 my-40 mx-auto text-center max-w-850 rounded">
+      <div className="text-xl font-semibold mb-8">
+        <Trans message="Account required" />
+      </div>
+      <div className="text-muted text-base">
+        <Trans
+          {...message}
+          values={{
+            l: parts => (
+              <Link className={LinkStyle} to="/login">
+                {parts}
+              </Link>
+            ),
+            r: parts => (
+              <Link className={LinkStyle} to="/register">
+                {parts}
+              </Link>
+            ),
+          }}
+        />
+      </div>
+    </div>
+  );
+}