React

frontend/src/components/Table/Formatter/CertificateFormatter.tsx

@@ -0,0 +1,13 @@
+import type { Certificate } from "src/api/backend";
+import { intl } from "src/locale";
+
+interface Props {
+	certificate?: Certificate;
+}
+export function CertificateFormatter({ certificate }: Props) {
+	if (certificate) {
+		return intl.formatMessage({ id: "lets-encrypt" });
+	}
+
+	return intl.formatMessage({ id: "http-only" });
+}

frontend/src/components/Table/Formatter/DomainsFormatter.tsx

@@ -0,0 +1,25 @@
+import { intlFormat, parseISO } from "date-fns";
+import { intl } from "src/locale";
+
+interface Props {
+	domains: string[];
+	createdOn?: string;
+}
+export function DomainsFormatter({ domains, createdOn }: Props) {
+	return (
+		<div className="flex-fill">
+			<div className="font-weight-medium">
+				{domains.map((domain: string) => (
+					<span key={domain} className="badge badge-lg domain-name">
+						{domain}
+					</span>
+				))}
+			</div>
+			{createdOn ? (
+				<div className="text-secondary mt-1">
+					{intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+				</div>
+			) : null}
+		</div>
+	);
+}

frontend/src/components/Table/Formatter/GravatarFormatter.tsx

@@ -0,0 +1,17 @@
+interface Props {
+	url: string;
+	name?: string;
+}
+export function GravatarFormatter({ url, name }: Props) {
+	return (
+		<div className="d-flex py-1 align-items-center">
+			<span
+				title={name}
+				className="avatar avatar-2 me-2"
+				style={{
+					backgroundImage: `url(${url})`,
+				}}
+			/>
+		</div>
+	);
+}

frontend/src/components/Table/Formatter/StatusFormatter.tsx

@@ -0,0 +1,11 @@
+import { intl } from "src/locale";
+
+interface Props {
+	enabled: boolean;
+}
+export function StatusFormatter({ enabled }: Props) {
+	if (enabled) {
+		return <span className="badge bg-lime-lt">{intl.formatMessage({ id: "online" })}</span>;
+	}
+	return <span className="badge bg-red-lt">{intl.formatMessage({ id: "offline" })}</span>;
+}

frontend/src/components/Table/Formatter/ValueWithDateFormatter.tsx

@@ -0,0 +1,21 @@
+import { intlFormat, parseISO } from "date-fns";
+import { intl } from "src/locale";
+
+interface Props {
+	value: string;
+	createdOn?: string;
+}
+export function ValueWithDateFormatter({ value, createdOn }: Props) {
+	return (
+		<div className="flex-fill">
+			<div className="font-weight-medium">
+				<div className="font-weight-medium">{value}</div>
+			</div>
+			{createdOn ? (
+				<div className="text-secondary mt-1">
+					{intl.formatMessage({ id: "created-on" }, { date: intlFormat(parseISO(createdOn)) })}
+				</div>
+			) : null}
+		</div>
+	);
+}

frontend/src/components/Table/Formatter/index.ts

@@ -0,0 +1,5 @@
+export * from "./CertificateFormatter";
+export * from "./DomainsFormatter";
+export * from "./GravatarFormatter";
+export * from "./StatusFormatter";
+export * from "./ValueWithDateFormatter";