snowballtools-base/packages/frontend/src/components/examples/ExamplePage.tsx

import { ReactNode } from 'react';
import {
  Header,
  NavigationWrapper,
  ScreenWrapper,
  TabWrapper,
  TabsContent,
  TabsList,
  TabsTrigger,
} from '../layout';

interface ExamplePageProps {
  children?: ReactNode;
}

export function ExamplePage({ children }: ExamplePageProps) {
  return (
    <NavigationWrapper>
      <ScreenWrapper>
        <Header
          title="Example Page"
          subtitle="Demonstrating the standard layout components"
          actions={[
            <button key="action" className="btn-primary">
              Action
            </button>,
          ]}
        />

        <TabWrapper defaultValue="tab1">
          <TabsList>
            <TabsTrigger value="tab1">Overview</TabsTrigger>
            <TabsTrigger value="tab2">Details</TabsTrigger>
            <TabsTrigger value="tab3">Settings</TabsTrigger>
          </TabsList>

          <TabsContent value="tab1">
            <div className="p-4">
              <h2>Overview Content</h2>
              {children}
            </div>
          </TabsContent>
          <TabsContent value="tab2">
            <div className="p-4">
              <h2>Details Content</h2>
            </div>
          </TabsContent>
          <TabsContent value="tab3">
            <div className="p-4">
              <h2>Settings Content</h2>
            </div>
          </TabsContent>
        </TabWrapper>
      </ScreenWrapper>
    </NavigationWrapper>
  );
}