Privacy page restyling (#22)

components/form/FormErrorMessage.tsx

@@ -0,0 +1,25 @@
+import { useFormField } from '@hooks/useFormField';
+import { XCircle } from 'lucide-react';
+import * as React from 'react';
+
+export const FormErrorMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(() => {
+  const { error, formMessageId } = useFormField();
+  const body = error?.message;
+
+  return (
+    body && (
+      <div
+        id={formMessageId}
+        className='flex items-center justify-center gap-2 text-sm text-red-500 duration-200 animate-in fade-in slide-in-from-top-1'
+      >
+        <XCircle className='h-4 w-4' />
+        <span>{body}</span>
+      </div>
+    )
+  );
+});
+
+FormErrorMessage.displayName = 'FormErrorMessage';