From 9bd0ea22f5ef5a7824f454ad56eea768494a24e7 Mon Sep 17 00:00:00 2001
From: danidfra <danielfilemondev@gmail.com>
Date: Tue, 10 Sep 2024 21:41:16 -0300
Subject: [PATCH] Create display-name-row

---
 src/components/display-name-row.tsx | 45 +++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/display-name-row.tsx

diff --git a/src/components/display-name-row.tsx b/src/components/display-name-row.tsx
new file mode 100644
index 000000000..ac617ff0a
--- /dev/null
+++ b/src/components/display-name-row.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import { getAcct } from '../utils/accounts';
+
+import { HStack, Text } from './ui';
+import VerificationBadge from './verification-badge';
+
+import type { Account } from 'soapbox/schemas';
+
+interface IDisplayName {
+  account: Pick<Account, 'id' | 'acct' | 'fqn' | 'verified' | 'display_name_html'>;
+  withSuffix?: boolean;
+}
+
+const DisplayNameRow: React.FC<IDisplayName> = ({ account, withSuffix = true }) => {
+  const { displayFqn = false } = useSoapboxConfig();
+  const { verified } = account;
+
+  const displayName = (
+    <HStack space={1} alignItems='center' justifyContent='center' grow>
+      <Text
+        size='sm'
+        weight='normal'
+        truncate
+        dangerouslySetInnerHTML={{ __html: account.display_name_html }}
+      />
+
+      {verified && <VerificationBadge />}
+    </HStack>
+  );
+
+  const suffix = (<span className='display-name'>@{getAcct(account, displayFqn)}</span>);
+
+  return (
+    <div className='flex max-w-80 flex-col items-center justify-center text-center sm:flex-row sm:gap-2'>
+      {displayName}
+      <span className='hidden text-2xl font-bold sm:block'>-</span>
+      {withSuffix && suffix}
+    </div>
+  );
+};
+
+export default DisplayNameRow;