- Create useFetchProjects composable for API integration - Implement responsive grid layout (1/2/3/4 columns) - Add stagger fadeInUp animation with prefers-reduced-motion support - Include loading skeleton, error state with retry, and empty state - Configure SEO meta tags via useSeo composable - Update Project model ordered scope for proper sorting Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
22 lines
510 B
TypeScript
22 lines
510 B
TypeScript
import type { Project } from '~/types/project'
|
|
|
|
interface ProjectsResponse {
|
|
data: Project[]
|
|
meta: { lang: string }
|
|
}
|
|
|
|
export function useFetchProjects() {
|
|
const config = useRuntimeConfig()
|
|
const { locale } = useI18n()
|
|
|
|
return useFetch<ProjectsResponse>('/projects', {
|
|
baseURL: config.public.apiUrl as string,
|
|
headers: {
|
|
'X-API-Key': config.public.apiKey as string,
|
|
'Accept-Language': locale.value,
|
|
},
|
|
transform: (response) => response.data,
|
|
default: () => [],
|
|
})
|
|
}
|