Refactor/display input part 2 (#1555)

* Email - Money - Number

* Date

front/src/modules/ui/content-display/components/DateDisplay.tsx

@@ -0,0 +1,9 @@
+import { formatToHumanReadableDate } from '~/utils';
+
+type OwnProps = {
+  value: Date | string | null | undefined;
+};
+
+export function DateDisplay({ value }: OwnProps) {
+  return <div>{value && formatToHumanReadableDate(value)}</div>;
+}

front/src/modules/ui/content-display/components/EmailDisplay.tsx

@@ -0,0 +1,27 @@
+import { MouseEvent } from 'react';
+
+import { ContactLink } from '@/ui/link/components/ContactLink';
+
+function validateEmail(email: string) {
+  const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+  return emailPattern.test(email.trim());
+}
+
+type OwnProps = {
+  value: string | null;
+};
+
+export function EmailDisplay({ value }: OwnProps) {
+  return value && validateEmail(value) ? (
+    <ContactLink
+      href={`mailto:${value}`}
+      onClick={(event: MouseEvent<HTMLElement>) => {
+        event.stopPropagation();
+      }}
+    >
+      {value}
+    </ContactLink>
+  ) : (
+    <ContactLink href="#">{value}</ContactLink>
+  );
+}

front/src/modules/ui/content-display/components/MoneyDisplay.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+import { formatNumber } from '~/utils/formatNumber';
+
+const StyledTextInputDisplay = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  width: 100%;
+`;
+
+type OwnProps = {
+  value: number | null;
+};
+
+export function MoneyDisplay({ value }: OwnProps) {
+  return (
+    <StyledTextInputDisplay>
+      {value ? `$${formatNumber(value)}` : ''}
+    </StyledTextInputDisplay>
+  );
+}