wip: refresh design

apps/web/src/components/formatter/document-status.tsx

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+
+import { CheckCircle2, Clock, File, LucideIcon } from 'lucide-react';
+
+import { DocumentStatus as InternalDocumentStatus } from '@documenso/prisma/client';
+import { cn } from '@documenso/ui/lib/utils';
+
+type FriendlyStatus = {
+  label: string;
+  icon: LucideIcon;
+  color: string;
+};
+
+const FRIENDLY_STATUS_MAP: Record<InternalDocumentStatus, FriendlyStatus> = {
+  DRAFT: {
+    label: 'Draft',
+    icon: File,
+    color: 'text-yellow-500',
+  },
+  PENDING: {
+    label: 'Pending',
+    icon: Clock,
+    color: 'text-blue-600',
+  },
+  COMPLETED: {
+    label: 'Completed',
+    icon: CheckCircle2,
+    color: 'text-green-500',
+  },
+};
+
+export type DocumentStatusProps = HTMLAttributes<HTMLSpanElement> & {
+  status: InternalDocumentStatus;
+};
+
+export const DocumentStatus = ({ className, status, ...props }: DocumentStatusProps) => {
+  const { label, icon: Icon, color } = FRIENDLY_STATUS_MAP[status];
+
+  return (
+    <span className={cn('flex items-center', className)} {...props}>
+      <Icon className={cn('mr-2 inline-block h-4 w-4', color)} />
+      {label}
+    </span>
+  );
+};

apps/web/src/components/formatter/locale-date.tsx

@@ -0,0 +1,21 @@
+'use client';
+
+import { HTMLAttributes, useEffect, useState } from 'react';
+
+export type LocaleDateProps = HTMLAttributes<HTMLSpanElement> & {
+  date: string | number | Date;
+};
+
+export const LocaleDate = ({ className, date, ...props }: LocaleDateProps) => {
+  const [localeDate, setLocaleDate] = useState(() => new Date(date).toISOString());
+
+  useEffect(() => {
+    setLocaleDate(new Date(date).toLocaleString());
+  }, [date]);
+
+  return (
+    <span className={className} {...props}>
+      {localeDate}
+    </span>
+  );
+};