// app/layout.tsx
import { Ssgoi, SsgoiConfig } from '@ssgoi/react'
import { fade, hero } from '@ssgoi/react/view-transitions'

const config: SsgoiConfig = {
  transitions: [
    {
      from: "/*", to: "/profile", transition: fade()
    },
    {
      from: "/posts", to: "/posts/*", transition: hero()
    },
  ],
}

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <Ssgoi config={config}>
      {children}
    </Ssgoi>
  )
}

// app/posts/page.tsx
import { SsgoiTransition } from '@ssgoi/react'

export default function PostsPage() {
  return (
    <SsgoiTransition id="/posts">
      <div>
        <h1>Posts List</h1>
        {/* Page Content */}
      </div>
    </SsgoiTransition>
  )
}