> ## Documentation Index
> Fetch the complete documentation index at: https://docs.tuturuuu.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Examples

> Practical examples and code samples for the Tuturuuu platform

This section contains practical examples and code samples demonstrating how to use various components and features of the Tuturuuu platform.

## Component Examples

### WorkspaceWrapper

Examples showing how to use the WorkspaceWrapper component in different scenarios.

The main [WorkspaceWrapper documentation](/platform/components/workspace-wrapper) includes comprehensive code examples demonstrating various usage patterns.

## Usage Patterns

### Server Components

```tsx theme={null}
// Basic server component with WorkspaceWrapper
export default async function MyPage({ 
  params 
}: { 
  params: Promise<{ wsId: string }> 
}) {
  return (
    <WorkspaceWrapper params={params}>
      {({ workspace, wsId }) => (
        <div>{workspace.name}</div>
      )}
    </WorkspaceWrapper>
  );
}
```

### Client Components

```tsx theme={null}
'use client';

interface MyComponentProps {
  workspace: Workspace & { joined: boolean };
  wsId: string;
}

export function MyComponent({ workspace, wsId }: MyComponentProps) {
  return <div>{workspace.name}</div>;
}
```

### API Routes

```tsx theme={null}
// API route with workspace validation
export async function GET(
  request: Request,
  { params }: { params: Promise<{ wsId: string }> }
) {
  const { wsId } = await params;
  const workspace = await getWorkspace(wsId);
  
  if (!workspace) {
    return Response.json({ error: 'Workspace not found' }, { status: 404 });
  }
  
  return Response.json({ workspace });
}
```

## Best Practices

### Error Handling

```tsx theme={null}
// Proper error handling in components
export default async function MyPage({ params }) {
  return (
    <WorkspaceWrapper 
      params={params}
      fallback={<ErrorBoundary />}
    >
      {({ workspace, wsId }) => {
        try {
          return <MyComponent workspace={workspace} wsId={wsId} />;
        } catch (error) {
          return <ErrorMessage error={error} />;
        }
      }}
    </WorkspaceWrapper>
  );
}
```

### Loading States

```tsx theme={null}
// Proper loading state handling
export default async function MyPage({ params }) {
  return (
    <WorkspaceWrapper 
      params={params}
      fallback={<LoadingSkeleton />}
    >
      {({ workspace, wsId }) => (
        <Suspense fallback={<LoadingSpinner />}>
          <AsyncContent workspace={workspace} wsId={wsId} />
        </Suspense>
      )}
    </WorkspaceWrapper>
  );
}
```

### Type Safety

```tsx theme={null}
// Proper TypeScript usage
interface PageProps {
  params: Promise<{ wsId: string }>;
}

interface WorkspaceData {
  workspace: Workspace & { joined: boolean };
  wsId: string;
}

export default async function MyPage({ params }: PageProps) {
  return (
    <WorkspaceWrapper params={params}>
      {({ workspace, wsId }: WorkspaceData) => (
        <MyComponent workspace={workspace} wsId={wsId} />
      )}
    </WorkspaceWrapper>
  );
}
```

## Common Patterns

### Dashboard Pages

Most dashboard pages follow this pattern:

1. Use WorkspaceWrapper for workspace resolution
2. Fetch additional data based on workspace
3. Render components with proper loading states
4. Handle permissions and access control

### Settings Pages

Settings pages typically:

1. Validate user permissions
2. Show different UI based on user role
3. Handle form submissions with proper validation
4. Provide clear feedback to users

### API Endpoints

API endpoints should:

1. Validate workspace access
2. Handle errors gracefully
3. Return appropriate HTTP status codes
4. Include proper error messages

## Contributing Examples

When adding new examples:

1. Use realistic, practical scenarios
2. Include proper TypeScript types
3. Show error handling
4. Include both server and client examples
5. Update this index page