chore: code polish and social preview optimization

Author: ATHARVA262005

src/components/Meta.tsx

@@ -47,12 +47,34 @@ export function Meta(props: MetaProps) {
     return null;
 }
 
+/**
+ * Common meta tag presets for convenience.
+ */
 /**
  * Common meta tag presets for convenience.
  */
 export const MetaPresets = {
+    /**
+     * Standard SEO description.
+     * @param content - Page description (recommended: 50-160 chars)
+     */
     description: (content: string) => <Meta name="description" content={content} />,
+
+    /**
+     * Viewport configuration for responsive design.
+     * @param content - default: "width=device-width, initial-scale=1"
+     */
     viewport: (content = "width=device-width, initial-scale=1") => <Meta name="viewport" content={content} />,
+
+    /**
+     * Character encoding declaration.
+     * @param charset - default: "UTF-8"
+     */
     charset: (charset = "UTF-8") => <Meta charset={charset} />,
+
+    /**
+     * Robots indexing directives.
+     * @param content - e.g., "index, follow" or "noindex"
+     */
     robots: (content: string) => <Meta name="robots" content={content} />,
 };

src/components/SocialPreview/index.tsx

@@ -1,5 +1,5 @@
 'use client';
-import { useSyncExternalStore, useState } from 'react';
+import { useSyncExternalStore, useState, memo } from 'react';
 
 interface PreviewData {
     title: string;
@@ -71,7 +71,7 @@ export interface SocialPreviewProps {
     forceVisible?: boolean;
 }
 
-export function SocialPreview({ forceVisible }: SocialPreviewProps) {
+export const SocialPreview = memo(function SocialPreview({ forceVisible }: SocialPreviewProps) {
     // Safety guard: only run in development unless forced
     if (process.env.NODE_ENV !== 'development' && !forceVisible) {
         return null;
@@ -137,4 +137,4 @@ export function SocialPreview({ forceVisible }: SocialPreviewProps) {
             </div>
         </div>
     );
-}
+});