import { useRouter } from 'manicjs';

export default function Page() {
  const router = useRouter();
  // ...
}

import React from 'react';
import { useRouter } from 'manicjs';

export default function UserProfile() {
  const { path, params } = useRouter();
  
  return (
    <div>
      <p>Current path: {path}</p>
      <p>User ID: {params.userId}</p>
    </div>
  );
}

import React from 'react';
import { Link } from 'manicjs';

export function PostList({ posts }: { posts: Array<{ slug: string; title: string }> }) {
  return (
    <ul>
      {posts.map(post => (
        <li key={post.slug}>
          <Link to={`/posts/${post.slug}`}>{post.title}</Link>
        </li>
      ))}
    </ul>
  );
}

import React from 'react';
import { useRouter } from 'manicjs';

// File: app/routes/users/[userId]/posts/[postId].tsx
export default function UserPost() {
  const { params } = useRouter();
  // { userId: "123", postId: "456" }
  
  return (
    <div>
      User {params.userId}'s Post {params.postId}
    </div>
  );
}

import React from 'react';
import { useState } from 'react';
import { useRouter } from 'manicjs';

export function LoginButton() {
  const { navigate } = useRouter();
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  
  const handleLogin = async () => {
    const res = await fetch('/api/login', {
      method: 'POST',
      body: JSON.stringify({ email, password }),
    });
    
    if (res.ok) {
      navigate('/dashboard');
    }
  };
  
  return <button onClick={handleLogin}>Login</button>;
}

import React from 'react';
import { useEffect, useState } from 'react';
import { useRouter } from 'manicjs';

export default function AdminPage() {
  const { navigate, params } = useRouter();
  const [user, setUser] = useState<any>(null);
  
  useEffect(() => {
    // Fetch user data
    fetch('/api/me').then(res => res.json()).then(setUser);
  }, []);
  
  useEffect(() => {
    // Redirect if not admin
    if (user && !user.isAdmin) {
      navigate('/unauthorized', { replace: true });
    }
  }, [user]);

  if (!user?.isAdmin) return null;
  
  return <div>Admin Panel</div>;
}