Refactor function components across multiple files

Function components have been refactored across the codebase. Single export-const arrow function components have been adapted into traditional function declarations. This change provides better stack trace in case of errors and better function and argument names on runtime debugging.

apps/web/app/(marketing)/blog/_components/cover-image.tsx

@@ -9,12 +9,7 @@ type Props = {
   className?: string;
 };
 
-export const CoverImage: React.FC<Props> = ({
-  title,
-  src,
-  preloadImage,
-  className,
-}) => {
+export function CoverImage({ title, src, preloadImage, className }: Props) {
   return (
     <Image
       className={cn(
@@ -30,4 +25,4 @@ export const CoverImage: React.FC<Props> = ({
       fill
     />
   );
-};
+}

apps/web/app/(marketing)/blog/_components/post-header.tsx

@@ -2,12 +2,10 @@ import { Cms } from '@kit/cms';
 import { If } from '@kit/ui/if';
 import { cn } from '@kit/ui/utils';
 
-import { CoverImage } from '~/(marketing)/blog/_components/cover-image';
-import { DateFormatter } from '~/(marketing)/blog/_components/date-formatter';
+import { CoverImage } from './cover-image';
+import { DateFormatter } from './date-formatter';
 
-export const PostHeader: React.FC<{
-  post: Cms.ContentItem;
-}> = ({ post }) => {
+export function PostHeader({ post }: { post: Cms.ContentItem }) {
   const { title, publishedAt, description, image } = post;
 
   return (
@@ -45,4 +43,4 @@ export const PostHeader: React.FC<{
       </If>
     </div>
   );
-};
+}

apps/web/app/(marketing)/blog/_components/post.tsx

@@ -4,10 +4,13 @@ import { ContentRenderer } from '@kit/cms';
 import styles from './html-renderer.module.css';
 import { PostHeader } from './post-header';
 
-export const Post: React.FC<{
+export function Post({
+  post,
+  content,
+}: {
   post: Cms.ContentItem;
   content: unknown;
-}> = ({ post, content }) => {
+}) {
   return (
     <div>
       <PostHeader post={post} />
@@ -19,4 +22,4 @@ export const Post: React.FC<{
       </div>
     </div>
   );
-};
+}

apps/web/app/(marketing)/docs/_components/docs-card.tsx

@@ -4,13 +4,16 @@ import { ChevronRight } from 'lucide-react';
 
 import { Trans } from '@kit/ui/trans';
 
-export const DocsCard: React.FC<
-  React.PropsWithChildren<{
-    title: string;
-    subtitle?: string | null;
-    link: { url: string; label?: string };
-  }>
-> = ({ title, subtitle, children, link }) => {
+export function DocsCard({
+  title,
+  subtitle,
+  children,
+  link,
+}: React.PropsWithChildren<{
+  title: string;
+  subtitle?: string | null;
+  link: { url: string; label?: string };
+}>) {
   return (
     <div className="flex flex-col">
       <div
@@ -46,4 +49,4 @@ export const DocsCard: React.FC<
       )}
     </div>
   );
-};
+}

apps/web/app/(marketing)/docs/_components/docs-navigation.tsx

@@ -10,17 +10,20 @@ import { Menu } from 'lucide-react';
 import { Cms } from '@kit/cms';
 import { isBrowser } from '@kit/shared/utils';
 import { Button } from '@kit/ui/button';
-import { Heading } from '@kit/ui/heading';
 import { If } from '@kit/ui/if';
-import { Trans } from '@kit/ui/trans';
 import { cn, isRouteActive } from '@kit/ui/utils';
 
-const DocsNavLink: React.FC<{
+function DocsNavLink({
+  label,
+  url,
+  level,
+  activePath,
+}: {
   label: string;
   url: string;
   level: number;
   activePath: string;
-}> = ({ label, url, level, activePath }) => {
+}) {
   const isCurrent = isRouteActive(url, activePath, 0);
   const isFirstLevel = level === 0;
 
@@ -39,13 +42,17 @@ const DocsNavLink: React.FC<{
       </Link>
     </Button>
   );
-};
+}
 
-const Node: React.FC<{
+function Node({
+  node,
+  level,
+  activePath,
+}: {
   node: Cms.ContentItem;
   level: number;
   activePath: string;
-}> = ({ node, level, activePath }) => {
+}) {
   const pathPrefix = `/docs`;
   const url = `${pathPrefix}/${node.url}`;
 
@@ -67,7 +74,7 @@ const Node: React.FC<{
       )}
     </>
   );
-};
+}
 
 function Tree({
   pages,