FreshのブログをAtomicDesignで設計したい

/components
  /atoms
    ├── Button.tsx
    ├── Input.tsx
    ├── Heading.tsx
  /molecules
    ├── SearchBox.tsx       // Input + Button
    ├── AccordionItem.tsx
  /organisms
    ├── Sidebar.tsx
    ├── TOC.tsx
    ├── Footer.tsx
    ├── MobileNav.tsx
    └── DarkModeToggle.tsx
/routes
  ├── index.tsx
  └── _layout.tsx     <- これを templates の役割にした

routes/
├── _app.tsx               ← 全ページに BaseLayout を適用
├── index.tsx              ← data: { postIndexes: PostIndex[] } を返す
└── articles/[slug].tsx    ← 同上

components/
├── layouts/
│   ├── BaseLayout.tsx     ← postIndexes を Sidebar に渡す
│   ├── DesktopLayout.tsx
│   └── MobileLayout.tsx
├── Sidebar.tsx            ← props.postIndexes を受け取って表示

import { ComponentType } from "preact/src/index.d.ts";
/**
 * レイアウトテンプレートに渡すProps
 */
export type LayoutProps<T> = {
  Component: ComponentType<{ data: T }>;
  route: string;
  data: T;
};