// Loader function để lấy dữ liệu từ Strapi
async function loader() {
  const URL = new URL('api/homepage', 'http://localhost:1337');
  const res = await fetch(URL);
  const data = await res.json();
  return data;
}

// Sử dụng loader trong route
export default async function HomeRoute() {
  const data = await loader();
  console.log(data);
  
  return (

); }

// BlockRenderer component
export default function BlockRenderer({ blocks }) {
  return (
    <>
      {blocks.map((block) => {
        switch (block.__component) {
          case 'blocks.hero-section':
            return ;
          case 'blocks.info-block':
            return ;
          default:
            return null;
        }
      })}
    </>
  );
}
    

// [slug]/page.tsx
import { notFound } from 'next/navigation';
import { getPageBySlug } from '@/data/loaders';
import BlockRenderer from '@/components/BlockRenderer';

export default async function DynamicPage({ params }) {
  const { slug } = params;
  const data = await getPageBySlug(slug);
  
  if (!data) {
    return notFound();
  }
  
  const { blocks } = data;
  
  return (

); }

// layout.tsx
import { getGlobalSettings } from '@/data/loaders';
import Header from '@/components/layout/Header';
import Footer from '@/components/layout/Footer';

export default async function RootLayout({ children }) {
  const globalData = await getGlobalSettings();
  
  if (!globalData) {
    throw new Error('Failed to fetch global settings');
  }
  
  const { header, footer } = globalData;
  
  return (

      
    
  );
}
    

// components/blocks/FeaturedArticle.tsx
import Link from 'next/link';
import StrapiImage from '@/components/StrapiImage';

export default function FeaturedArticle({ headline, excerpt, image, link }) {
  return (

); }

// actions.ts
'use server';

import { z } from 'zod';
import { subscribeService } from './services';

const subscribeSchema = z.object({
  email: z.string().email('Please enter a valid email address')
});

export async function subscribeAction(previousState, formData) {
  const email = formData.get('email');
  
  // Validate input
  const validatedFields = subscribeSchema.safeParse({ email });
  
  if (!validatedFields.success) {
    return {
      ...previousState,
      zodErrors: validatedFields.error.flatten().fieldErrors,
      strapiErrors: null,
      errorMessage: 'Validation failed',
      successMessage: null
    };
  }
  
  // Submit to Strapi
  const responseData = await subscribeService(validatedFields.data);
  
  if (!responseData) {
    return {
      ...previousState,
      zodErrors: null,
      strapiErrors: null,
      errorMessage: 'Oops! Something went wrong. Please try again later',
      successMessage: null
    };
  }
  
  if (responseData.error) {
    return {
      ...previousState,
      zodErrors: null,
      strapiErrors: responseData.error,
      errorMessage: 'Failed to subscribe',
      successMessage: null
    };
  }
  
  return {
    ...previousState,
    zodErrors: null,
    strapiErrors: null,
    errorMessage: null,
    successMessage: 'Successfully subscribed!'
  };
}
    

// blog/[slug]/page.tsx
import { notFound } from 'next/navigation';
import { getContentBySlug } from '@/data/loaders';
import HeroSection from '@/components/blocks/HeroSection';
import ArticleOverview from '@/components/ArticleOverview';
import BlockRenderer from '@/components/BlockRenderer';
import ContentList from '@/components/ContentList';
import BlogCard from '@/components/BlogCard';

export default async function SingleBlogRoute({ params }) {
  const { slug } = params;
  const data = await getContentBySlug('articles', slug);
  
  if (!data) {
    return notFound();
  }
  
  const { blocks, article } = data;
  
  // Extract headings for table of contents
  const tableOfContent = blocks
    .filter(block => block.__component === 'blocks.heading')
    .map(block => ({
      heading: block.heading,
      linkId: block.linkId
    }));
  
  return (

); }

// components/Search.tsx
'use client';

import { useRouter } from 'next/navigation';
import { usePathname, useSearchParams } from 'next/navigation';
import { useDebounceCallback } from 'usehooks-ts';

export default function Search() {
  const router = useRouter();
  const pathname = usePathname();
  const searchParams = useSearchParams();
  
  const handleSearch = useDebounceCallback((term) => {
    const params = new URLSearchParams(searchParams);
    params.set('page', '1');
    
    if (term) {
      params.set('query', term);
    } else {
      params.delete('query');
    }
    
    router.replace(`${pathname}?${params.toString()}`);
  }, 300);
  
  return (

); }

// components/EventSignupForm.tsx
'use client';

import { useState } from 'react';
import { useActionState } from 'react-dom';
import { eventSubscribeAction } from '@/data/actions';
import BlockRenderer from '@/components/BlockRenderer';
import SubmitButton from '@/components/SubmitButton';

const initialState = {
  zodErrors: null,
  strapiErrors: null,
  errorMessage: null,
  successMessage: null,
  formData: {}
};

function TextInput({ label, name, type = 'text', errors, defaultValue }) {
  return (

); } export default function EventSignupForm({ event, blocks }) { const [formState, formAction] = useActionState(eventSubscribeAction, initialState); const { zodErrors, strapiErrors, successMessage } = formState; return (

); }