feat: some cleanup

src/app/[locale]/page.tsx

@@ -1,20 +1,20 @@
 /* eslint-disable react/jsx-no-literals */
+import CodeLink from '@/components/common/code-link';
 import LanguageSwitcher from '@/components/common/language-switcher';
+import MarkdownDisplay from '@/components/common/markdown-display';
 import Navbar from '@/components/common/navbar';
 import ThemeToggle from '@/components/common/theme-toggle';
+import {
+  FormExample,
+  SentryExample,
+  ToastExample,
+  ZodiosClientExample,
+  ZodiosServerExample,
+} from '@/components/examples';
 import ExampleCard from '@/components/examples/example-card';
-import { FormExample } from '@/components/examples/form-example';
-import SentryExample from '@/components/examples/sentry-example';
-import ToastExample from '@/components/examples/toast-example';
-import ZodiosClientExample from '@/components/examples/zodios-client-example';
-import ZodiosServerExample from '@/components/examples/zodios-server-example';
 import { BackgroundBeams } from '@/components/ui/background-beams';
-import env from '@/env';
 import { getScopedI18n } from '@/i18n/server';
-import path from 'path';
 import { FaGithub } from 'react-icons/fa';
-import Markdown from 'react-markdown';
-import remarkGfm from 'remark-gfm';
 import readme from '../../../docs/README.md';
 
 export default async function Home() {
@@ -43,16 +43,12 @@ export default async function Home() {
             <h1 className="text-5xl font-bold">{t('title')}</h1>
             <p className="font-mono">{t('subtitle')}</p>
             <div className="relative grow">
-              <div className="scrollbar-none flex flex-col pt-8 lg:overflow-auto">
-                <Markdown
-                  className="prose prose-zinc dark:prose-invert min-w-full"
-                  remarkPlugins={[remarkGfm]}>
-                  {readme}
-                </Markdown>
+              <div className="flex flex-col pt-8 scrollbar-none lg:overflow-auto">
+                <MarkdownDisplay content={readme} />
               </div>
             </div>
           </div>
-          <div className="scrollbar-none flex h-full flex-col gap-y-8 lg:overflow-auto">
+          <div className="flex h-full flex-col gap-y-8 scrollbar-none lg:overflow-auto">
             <ExampleCard
               title="✅ Form example"
               subtitle={
@@ -114,33 +110,3 @@ export default async function Home() {
     </main>
   );
 }
-
-const CodeLink = ({
-  filePath,
-  lineNumber = 1,
-}: {
-  filePath: string;
-  lineNumber?: number;
-}) => {
-  let url = '';
-  const isDev = env.NODE_ENV === 'development';
-  if (isDev) {
-    const projectRoot = process.cwd();
-    const absolutePath = path.join(projectRoot, filePath);
-    url = `vscode://file/${absolutePath}:${lineNumber}`;
-  } else {
-    url = `https://github.com/zerodays/nextjs-template/tree/master/${filePath}`;
-  }
-  const fileName = filePath.split('/').pop();
-
-  return (
-    <span className="mx-1 rounded-lg bg-foreground px-2 text-sm font-semibold text-background transition-colors hover:bg-foreground/70">
-      <a
-        target={!isDev ? '_blank' : undefined}
-        href={url}
-        rel="noopener noreferrer">
-        {fileName}
-      </a>
-    </span>
-  );
-};

src/app/layout.tsx

@@ -1,4 +1,4 @@
-import Providers from '@/components/common/providers';
+import Providers from '@/app/providers';
 import { cn } from '@/lib/utils';
 import type { Metadata } from 'next';
 import { Inter as FontSans } from 'next/font/google';

src/components/common/code-link.tsx

@@ -0,0 +1,39 @@
+import env from '@/env';
+import path from 'path';
+
+interface CodeLinkProps {
+  filePath: string;
+  lineNumber?: number;
+}
+
+const CodeLink = ({ filePath, lineNumber = 1 }: CodeLinkProps) => {
+  // Check if running on server
+  if (typeof window !== 'undefined') {
+    console.error('CodeLink component is only supported on server');
+    return null;
+  }
+
+  let url = '';
+  const isDev = env.NODE_ENV === 'development';
+  if (isDev) {
+    const projectRoot = process.cwd();
+    const absolutePath = path.join(projectRoot, filePath);
+    url = `vscode://file/${absolutePath}:${lineNumber}`;
+  } else {
+    url = `https://github.com/zerodays/nextjs-template/tree/master/${filePath}`;
+  }
+  const fileName = filePath.split('/').pop();
+
+  return (
+    <span className="mx-1 rounded-lg bg-foreground px-2 text-sm font-semibold text-background transition-colors hover:bg-foreground/70">
+      <a
+        target={!isDev ? '_blank' : undefined}
+        href={url}
+        rel="noopener noreferrer">
+        {fileName}
+      </a>
+    </span>
+  );
+};
+
+export default CodeLink;

src/components/common/markdown-display.tsx

@@ -0,0 +1,17 @@
+import Markdown from 'react-markdown';
+import remarkGfm from 'remark-gfm';
+
+interface MarkdownDisplayProps {
+  content: string;
+}
+const MarkdownDisplay = ({ content }: MarkdownDisplayProps) => {
+  return (
+    <Markdown
+      className="prose prose-zinc dark:prose-invert min-w-full"
+      remarkPlugins={[remarkGfm]}>
+      {content}
+    </Markdown>
+  );
+};
+
+export default MarkdownDisplay;

src/components/examples/form-example.test.tsx

@@ -1,9 +1,8 @@
+import FormExample from '@/components/examples/form-example';
 import '@testing-library/jest-dom';
 
 import { fireEvent, render, screen, waitFor } from '@testing-library/react';
 
-import { FormExample } from './form-example';
-
 describe('FormExample Component', () => {
   it('renders correctly', () => {
     render(<FormExample />);

src/components/examples/form-example.tsx

@@ -29,7 +29,7 @@ const formSchema = z.object({
 // Infer TS type from zod schema
 type FormValues = z.infer<typeof formSchema>;
 
-export const FormExample = () => {
+const FormExample = () => {
   const t = useScopedI18n('home.formExample');
 
   const form = useForm<FormValues>({
@@ -98,3 +98,5 @@ export const FormExample = () => {
     </Form>
   );
 };
+
+export default FormExample;

src/components/examples/index.ts

@@ -0,0 +1,5 @@
+export { default as FormExample } from './form-example';
+export { default as SentryExample } from './sentry-example';
+export { default as ToastExample } from './toast-example';
+export { default as ZodiosClientExample } from './zodios-client-example';
+export { default as ZodiosServerExample } from './zodios-server-example';